{ "name": "Kodza", "description": "Free premium UI components in plain HTML, CSS and vanilla JS.", "site": "https://kodza.dev", "generated": "2026-10-22", "categories": [ { "id": "buttons", "label": "Buttons", "group": "interface", "count": 12 }, { "id": "links", "label": "Links", "group": "interface", "count": 6 }, { "id": "forms", "label": "Forms", "group": "interface", "count": 15 }, { "id": "navigation", "label": "Navigation", "group": "interface", "count": 13 }, { "id": "overlays", "label": "Overlays", "group": "interface", "count": 7 }, { "id": "feedback", "label": "Feedback & loading", "group": "interface", "count": 6 }, { "id": "data", "label": "Data display", "group": "interface", "count": 13 }, { "id": "cards", "label": "Cards", "group": "interface", "count": 5 }, { "id": "media", "label": "Media", "group": "interface", "count": 6 }, { "id": "text", "label": "Text effects", "group": "effects", "count": 8 }, { "id": "images", "label": "Image effects", "group": "effects", "count": 3 }, { "id": "backgrounds", "label": "Backgrounds & textures", "group": "effects", "count": 3 }, { "id": "scroll", "label": "Scroll", "group": "effects", "count": 6 }, { "id": "cursor", "label": "Cursor", "group": "effects", "count": 1 }, { "id": "transitions", "label": "Preloaders & transitions", "group": "effects", "count": 2 }, { "id": "hero", "label": "Hero", "group": "sections", "count": 2 } ], "components": [ { "slug": "press-button", "title": "3D Press Button", "category": "buttons", "description": "A button with real thickness: the face sinks into its base, even the quickest tap goes all the way down, and it springs back with a small bounce. A keycap, a brutalist slab, or a toggle that stays down.", "tags": [ "button", "press", "3d", "click", "toggle" ], "updated": "2026-10-19", "js": true, "dependencies": [] }, { "slug": "button-arrow-slide", "title": "Arrow Button", "category": "buttons", "description": "An arrow that draws itself in on hover, nudges the label aside, then carries on through the button when you leave.", "tags": [ "hover", "button", "arrow", "svg" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "call-button-expand", "title": "Call Button", "category": "buttons", "description": "A round phone icon that opens into a full \"Book a call\" button, with a little ring. Stays open on touch screens. Pure CSS.", "tags": [ "hover", "button", "expand", "icon" ], "updated": "2026-10-16", "js": false, "dependencies": [] }, { "slug": "copy-clipboard", "title": "Copy to Clipboard", "category": "buttons", "description": "A command, or a sentence for your AI, with a copy button: the icon turns into a check that draws itself and the label rolls to \"Copied\".", "tags": [ "button", "clipboard", "code", "feedback" ], "updated": "2026-10-20", "js": true, "dependencies": [] }, { "slug": "button-fill", "title": "Fill Button", "category": "buttons", "description": "A button that fills from the exact point your cursor enters and empties toward where it leaves, with a rolling label and a looping arrow.", "tags": [ "hover", "button", "fill", "pointer" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "hold-to-confirm", "title": "Hold to Confirm", "category": "buttons", "description": "For the actions you cannot take back: hold it down and an ink pill fills the button, let go too early and it drains back, hold to the end and it ticks. Mouse, finger, Space or Enter.", "tags": [ "button", "hold", "confirm", "destructive", "progress" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "loading-button", "title": "Loading Button", "category": "buttons", "description": "A button that shows its work: its words roll from Deploy to Deploying while a ring comes in, then the ring closes on a tick for Deployed. The width never moves.", "tags": [ "button", "loading", "spinner", "state" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "magnetic-button", "title": "Magnetic Button", "category": "buttons", "description": "A button that leans towards the pointer as it comes near, its words a little further, and settles back softly. Its click area moves with it. Calm on touch screens.", "tags": [ "button", "magnetic", "hover", "cursor" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "button-svg-morph", "title": "Morph Button", "category": "buttons", "description": "A pill that tightens into a circle on hover while its label gives way to an arrow. The clickable area never moves. Pure CSS.", "tags": [ "hover", "button", "morph", "clip-path" ], "updated": "2026-10-16", "js": false, "dependencies": [] }, { "slug": "button-slide", "title": "Roll Button", "category": "buttons", "description": "A button whose label rolls up letter by letter on hover, and keeps rolling the same way when you leave. Plain CSS and a few lines of JS.", "tags": [ "hover", "button", "text", "stagger" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "share-button", "title": "Share Button", "category": "buttons", "description": "Press Share and the options slide out from behind it, the last one pushing the pill open, while the arrow takes off and a cross draws itself. Copy link turns into a check; X and LinkedIn open in a small window.", "tags": [ "button", "share", "social", "copy link", "blog" ], "updated": "2026-10-20", "js": true, "dependencies": [] }, { "slug": "split-button", "title": "Split Button", "category": "buttons", "description": "The main action on the left, the other options behind an arrow. One tint slides between the halves; pick another way to do it and the label rolls over, the button easing to its new width.", "tags": [ "button", "split button", "menu", "dropdown", "actions" ], "updated": "2026-10-20", "js": true, "dependencies": [] }, { "slug": "arrow-link", "title": "Arrow Link", "category": "links", "description": "A link that points the way: at rest a chevron, on hover the shaft draws itself in and the head moves on, › becomes →. A back variant points the other way. Pure CSS.", "tags": [ "link", "arrow", "hover", "css" ], "updated": "2026-10-16", "js": false, "dependencies": [] }, { "slug": "external-link", "title": "External Link", "category": "links", "description": "A link that leaves the site says so: a line of ink runs under the words to the ↗, which then springs out towards the corner, its shaft stretching after it. Pure CSS.", "tags": [ "link", "external", "new tab", "css" ], "updated": "2026-10-21", "js": false, "dependencies": [] }, { "slug": "hover-link-text-background-reveal", "title": "Highlight Link", "category": "links", "description": "A highlighter stroke that sweeps behind the link text, or a solid block that flips the text to white exactly under its edge.", "tags": [ "hover", "link", "highlight", "text" ], "updated": "2026-10-16", "js": false, "dependencies": [] }, { "slug": "link-preview", "title": "Link Preview", "category": "links", "description": "Point at a link and a card of where it goes unfolds above it. One card per paragraph: it glides from link to link, its picture cross-fading and its words rolling.", "tags": [ "link", "preview", "hover", "card" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "hover-link-text-shuffle", "title": "Scramble Link", "category": "links", "description": "Hover a link and its word scrambles, then settles from left to right: symbols that decode, its own letters shuffling, or a split-flap.", "tags": [ "hover", "link", "scramble", "text", "split-flap" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "hover-link-text-underline", "title": "Underline Link", "category": "links", "description": "An underline that slides in from the left and leaves through the right, or the reverse. Follows the text across lines, like a pen.", "tags": [ "hover", "link", "underline", "text" ], "updated": "2026-10-16", "js": false, "dependencies": [] }, { "slug": "checkbox-component", "title": "Checkbox", "category": "forms", "description": "Real checkboxes, redrawn: ink grows from the centre and the tick draws itself. A select-all box shows a dash when only some are checked. Cards too.", "tags": [ "checkbox", "form", "select-all", "cards" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "color-picker", "title": "Color Picker", "category": "forms", "description": "A real colour input with a proper panel: saturation square, hue slider, hex field, presets, eyedropper and copy. Pick a preset and the handles glide to it.", "tags": [ "color", "picker", "form", "hex" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "date-picker", "title": "Date Picker", "category": "forms", "description": "A real date input with a calendar: months slide the way you go, the month name rolls, and the ink mark travels to the day you pick. Full keyboard.", "tags": [ "date", "calendar", "form", "keyboard" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "file-upload", "title": "File Upload", "category": "forms", "description": "A drop zone over a real file input: the border marches when files hover, each file gets a row with a thumbnail and a rolling progress, too-big files say so.", "tags": [ "upload", "drag-and-drop", "files", "progress" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "multi-select", "title": "Multi Select", "category": "forms", "description": "A real multiple select as a field of tags: type to filter, pick to add a tag. Removed tags shrink away while the others glide into their place.", "tags": [ "select", "tags", "form", "filter" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "otp-input", "title": "OTP Input", "category": "forms", "description": "A one-time code field: one real input drawn as cells. Digits rise into place, paste and SMS autofill just work, and the cells turn to ink once complete.", "tags": [ "otp", "code", "input", "form" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "password-field", "title": "Password", "category": "forms", "description": "A password field with an eye that crosses itself out, a meter that fills as it gets stronger, a verdict that rolls and rules that tick themselves off.", "tags": [ "password", "input", "form", "strength" ], "updated": "2026-10-17", "js": true, "dependencies": [] }, { "slug": "radio-component", "title": "Radio", "category": "forms", "description": "Real radio buttons with one dot for the whole group: pick another option and the dot travels to it, stretching on the way like a drop of ink.", "tags": [ "radio", "form", "cards", "choice" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "range-slider", "title": "Range Slider", "category": "forms", "description": "Real range inputs on a drawn track: a value bubble pops out of the handle, ticks darken as the fill passes, and two handles push each other instead of crossing.", "tags": [ "range", "slider", "form", "price" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "search-input", "title": "Search Autocomplete", "category": "forms", "description": "A search field over a real datalist: suggestions unroll under it, grouped, with the letters you typed underlined. \"/\" jumps in, arrows and Enter drive.", "tags": [ "search", "autocomplete", "combobox", "form" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "custom-select", "title": "Select", "category": "forms", "description": "A real select, dressed up: the list unrolls from the field, a highlight slides between options and the value rolls to your choice. A pill for toolbars too.", "tags": [ "select", "listbox", "form", "keyboard" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "rating-component", "title": "Star Rating", "category": "forms", "description": "Real radio buttons drawn as stars: they light up one after the other under the pointer, the word rolls from Meh to Shipped it, and a static score fills in view.", "tags": [ "rating", "stars", "form", "score" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "switch-toggle", "title": "Switch", "category": "forms", "description": "A real checkbox redrawn as a switch: the ink fills the track behind the thumb, the thumb stretches while pressed and springs into place. Labels, toolbars too.", "tags": [ "switch", "toggle", "form", "settings" ], "updated": "2026-10-21", "js": false, "dependencies": [] }, { "slug": "text-field", "title": "Text Field", "category": "forms", "description": "A text field whose label folds up as you type. A button clears it, a check draws itself once it is valid, and the hint gives way to the error.", "tags": [ "input", "form", "validation", "label" ], "updated": "2026-10-17", "js": true, "dependencies": [] }, { "slug": "textarea", "title": "Textarea", "category": "forms", "description": "A textarea whose label folds up, whose height eases to fit the text, and whose ring fills as you near the limit, with the characters left in the last fifth.", "tags": [ "textarea", "form", "counter", "autosize" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "breadcrumbs", "title": "Breadcrumbs", "category": "navigation", "description": "A breadcrumb trail that folds its middle behind a \"…\" button when it would not fit on one line, and unfolds it crumb after crumb.", "tags": [ "breadcrumbs", "nav", "path", "links" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "command-palette", "title": "Command Palette", "category": "navigation", "description": "A ⌘K palette in a real dialog: results filter as you type, matched letters are underlined and a highlight slides between them.", "tags": [ "command", "search", "keyboard", "dialog" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "context-menu", "title": "Context Menu", "category": "navigation", "description": "A right-click menu that grows from the exact point you clicked, stays on screen and works from the keyboard with Shift + F10.", "tags": [ "menu", "right-click", "keyboard", "actions" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "dropdown-menu", "title": "Dropdown Menu", "category": "navigation", "description": "A menu that unrolls from its button, with a highlight that slides from item to item. Actions or choices, arrows and first letters.", "tags": [ "dropdown", "menu", "keyboard", "select" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "hover-nav", "title": "Hover Nav", "category": "navigation", "description": "A pill of links where the highlight slides under the pointer and settles back on the current page. The ink version turns the text white right at its edges.", "tags": [ "nav", "hover", "pill", "indicator" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "pagination", "title": "Pagination", "category": "navigation", "description": "Seven slots that never jump: the ink pill slides to the page and the numbers that change roll into place. Compact version included.", "tags": [ "pagination", "pages", "nav", "numbers" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "scroll-header", "title": "Scroll Header", "category": "navigation", "description": "A floating glass pill that clears the top of the page, frosts as you scroll, steps aside while you read and turns to dark glass over dark sections.", "tags": [ "header", "scroll", "sticky", "nav" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "sidebar-toggle-menu", "title": "Sidebar Menu", "category": "navigation", "description": "A side panel that slides in over the page, then big links rise one by one. A real dialog: focus kept inside, Escape to leave. No GSAP.", "tags": [ "menu", "sidebar", "dialog", "nav" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "menu-horizontal-stagger-reverse", "title": "Staggered Horizontal Menu", "category": "navigation", "description": "A button that lets its links out one by one, nearest first, and calls them back in reverse. Its label rolls to \"Close\". No GSAP.", "tags": [ "menu", "stagger", "nav", "toggle" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "stepper", "title": "Stepper", "category": "navigation", "description": "A flow in four steps: the line fills, a check draws itself on each finished step and the content slides in from where you are heading.", "tags": [ "steps", "wizard", "progress", "nav" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "table-of-contents", "title": "Table of Contents", "category": "navigation", "description": "A summary card built from your headings: an ink marker follows the section you read, a ring fills, the time left counts down. A bar on phones.", "tags": [ "toc", "scroll", "nav", "article" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "tabs-component", "title": "Tabs", "category": "navigation", "description": "Tabs with a pill (or a line) that slides to the chosen one, a panel that comes in from its side, and the full keyboard pattern.", "tags": [ "tabs", "nav", "indicator", "keyboard" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "trapdoor-menu", "title": "Trapdoor Menu", "category": "navigation", "description": "Press Menu and the page swings down on its hinge like a trapdoor, showing the menu underneath: links rise as the edge passes them, an image follows your pointer. Closing replays it backwards. No GSAP.", "tags": [ "menu", "fullscreen", "3d", "nav", "dialog" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "cookie-consent", "title": "Cookie Consent", "category": "overlays", "description": "An honest cookie card: Reject weighs as much as Accept, Choose unfolds the categories, the choice is kept and a link brings the card back.", "tags": [ "cookies", "consent", "gdpr", "banner" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "modal-component", "title": "Dialog", "category": "overlays", "description": "A real dialog that grows out of the button that opened it and goes back into it. The alert version asks you to type the name before it deletes anything.", "tags": [ "dialog", "modal", "alertdialog", "confirm" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "popover", "title": "Popover", "category": "overlays", "description": "A panel that grows out of its trigger, arrow pointing back at it, and flips when there is no room. On click, or on hover as a hover card that stays put.", "tags": [ "popover", "hover-card", "overlay", "share" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "product-tour", "title": "Product Tour", "category": "overlays", "description": "A guided tour: the page dims, a spotlight cuts out each element and glides to the next, reshaping on the way, with a card that follows. Keyboard too.", "tags": [ "tour", "onboarding", "spotlight", "walkthrough" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "drawer", "title": "Sheet", "category": "overlays", "description": "A panel that slides in from the right, and on phones rises from the bottom as a sheet you drag, with half and full stops and a flick to dismiss.", "tags": [ "sheet", "drawer", "dialog", "mobile" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "toast-notification", "title": "Toast", "category": "overlays", "description": "Notifications that stack like a deck and spread out on hover. Time runs out on a thin line, a swipe dismisses, and a loading toast turns into a success.", "tags": [ "toast", "notification", "stack", "swipe" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "tooltip-component", "title": "Tooltip", "category": "overlays", "description": "One bubble per group: it waits on the first hover, then glides from button to button, resizing to its words, with the keyboard shortcut inside.", "tags": [ "tooltip", "toolbar", "hint", "shortcut" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "alert", "title": "Alert", "category": "feedback", "description": "A message in the page: note, success, warning or error, told apart by the icon, not by color. The icon draws itself, a dismissed alert folds away and an error unfolds its log.", "tags": [ "alert", "callout", "message", "error" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "empty-state", "title": "Empty State", "category": "feedback", "description": "What a list shows when it is empty: a CSS drawing that answers when you come near, a line in a human voice and the next step. A second take for searches that find nothing.", "tags": [ "empty", "placeholder", "search", "zero state" ], "updated": "2026-10-16", "js": false, "dependencies": [] }, { "slug": "progress-bar", "title": "Progress", "category": "feedback", "description": "A bar or a ring driven by data-value: the percentage rolls like an odometer, a segment slides while nobody knows, and at 100 a tick draws itself.", "tags": [ "progress", "loading", "upload", "ring" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "skeleton-loader", "title": "Skeleton", "category": "feedback", "description": "Bones drawn from the content itself, one shine across them all. When it loads, a soft edge sweeps down and turns each bone into its line; late images keep theirs.", "tags": [ "skeleton", "loading", "placeholder", "card" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "loading-spinner", "title": "Spinner", "category": "feedback", "description": "A loading status sized on its text: a breathing ring, twelve bars, three dots or a terminal braille cell. Add .is-done and a tick draws itself while the words roll.", "tags": [ "spinner", "loading", "status", "button" ], "updated": "2026-10-16", "js": false, "dependencies": [] }, { "slug": "top-loading-bar", "title": "Top Loading Bar", "category": "feedback", "description": "The thin line at the top of the screen while a page loads: it creeps in shrinking steps, runs to the end and slips off to the right. Starts by itself on the site's links.", "tags": [ "loading", "progress", "navigation", "page" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "accordion-component", "title": "Accordion", "category": "data", "description": "Questions that open on their answer, on a native
: the panel opens at its real height, the answer rises, the plus turns into a minus. One open at a time if you like.", "tags": [ "accordion", "faq", "details", "disclosure" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "avatar", "title": "Avatar", "category": "data", "description": "Initials or a picture in four sizes, a status told by a shape (full, ring, bar, faded), and a group that spreads when you come near, the face you point at saying its name.", "tags": [ "avatar", "initials", "status", "group" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "badge", "title": "Badge", "category": "data", "description": "Small labels: soft, solid, live, mono and a count that rolls. Remove a tag and it shrinks away while its neighbours glide to their new place, across lines too.", "tags": [ "badge", "tag", "label", "chip" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "code-block", "title": "Code Block", "category": "data", "description": "Code to read and copy: file name, line numbers, highlighted lines and a monochrome syntax in weight and light. Copy rolls to Copied; a terminal copies its commands only.", "tags": [ "code", "syntax", "copy", "terminal" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "event-day-counter", "title": "Countdown", "category": "data", "description": "A live countdown to a date: every digit that changes falls out of its window as the next one drops in, and at zero the figures step aside for your message. Large or inline.", "tags": [ "countdown", "timer", "date", "launch" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "counter-animation", "title": "Counter", "category": "data", "description": "A figure that rolls into place like an odometer when it comes into view: digits on the right spin more and land last, a zero takes a full turn. Readable without the script.", "tags": [ "counter", "number", "odometer", "stats" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "filter-transitions", "title": "Filter Transitions", "category": "data", "description": "A filterable grid: the ink pill slides to the filter, leaving cards step back, the others glide to their new place and the new ones arrive in turn.", "tags": [ "filter", "grid", "flip", "pills" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "kbd", "title": "Kbd", "category": "data", "description": "Keyboard keys with a little depth, alone, in a combo or in a list of shortcuts. Type one for real and its keys sink as you press them; the whole combo down lights its line.", "tags": [ "kbd", "keyboard", "shortcut", "keys" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "separator", "title": "Separator", "category": "data", "description": "Lines that draw themselves from their middle when they come into view: a plain rule, one with a label or a section title, one around a CSS dot, and verticals between items.", "tags": [ "separator", "divider", "rule", "hr" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "collapsible", "title": "Show More", "category": "data", "description": "Long content kept short until asked: a text cut by a soft fade, or a list that says how many items are left. It opens at its real height and the button's words roll.", "tags": [ "show more", "read more", "collapsible", "truncate" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "stat-card", "title": "Stat Card", "category": "data", "description": "A key figure, its change and the curve behind it: the figure rolls, the curve draws itself and a guide follows your pointer with the value of the day. Trends told by arrows.", "tags": [ "stats", "kpi", "chart", "sparkline" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "table", "title": "Table", "category": "data", "description": "A data table that sorts when you click a column: rows glide to their new place, the sorted column gets a soft band, the header stays on top and the edges fade while it scrolls.", "tags": [ "table", "data", "sort", "grid" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "timeline-component", "title": "Timeline", "category": "data", "description": "Dated steps along a rail that fills as you scroll: each dot fills when the ink reaches it, each step rises into place the first time it is seen, the last one reached stays marked.", "tags": [ "timeline", "history", "steps", "scroll" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "hover-gradient-card", "title": "Border Trace Card", "category": "cards", "description": "On hover a single line draws the card border from the exact point where the pointer came in. One way, both ways, or just the corners.", "tags": [ "card", "hover", "border", "svg" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "card", "title": "Card", "category": "cards", "description": "An editorial card, clickable as a whole through one link: the image drifts closer, the border firms up and an arrow slides in.", "tags": [ "card", "hover", "image", "article" ], "updated": "2026-10-16", "js": false, "dependencies": [] }, { "slug": "expandable-card", "title": "Expandable Card", "category": "cards", "description": "A row of cards where one is always open: click another and it widens while the others step back. Stacked on small screens.", "tags": [ "card", "accordion", "expand", "click" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "pricing-plans", "title": "Pricing Plans", "category": "cards", "description": "Three plans in one block, the featured one inked and lifted out. Switch to yearly and only the digits that change roll to their new value.", "tags": [ "pricing", "card", "toggle", "numbers" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "sticky-cards", "title": "Sticky Cards", "category": "cards", "description": "Cards that stack as you scroll, each covered card stepping back and darkening. Plain position: sticky and a few lines of JS. No GSAP.", "tags": [ "scroll", "card", "sticky", "stack" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "before-after", "title": "Before / After", "category": "media", "description": "Two pictures in one frame and a handle between them: drag it, click and it glides, or use the arrow keys. It nudges once when first seen; the labels step aside.", "tags": [ "compare", "slider", "image", "dark mode" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "carousel", "title": "Carousel", "category": "media", "description": "A native scroll-snap carousel that works before the script loads. Then: page buttons, a rolling count, a progress bar or dots, and mouse drag with a throw. Never steals the wheel.", "tags": [ "carousel", "slider", "scroll-snap", "drag", "products", "testimonials" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "slider-horizontal-fullscreen", "title": "Fullscreen Slider", "category": "media", "description": "Full-bleed slides that change with a curtain while the title rises from a mask. Horizontal or vertical, buttons, arrow keys and swipe. No GSAP.", "tags": [ "slider", "carousel", "fullscreen", "image" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "image-gallery", "title": "Image Gallery", "category": "media", "description": "An editorial image grid: each image grows into a fullscreen viewer in one continuous motion, with curtain transitions between images and keyboard and swipe support.", "tags": [ "gallery", "lightbox", "image", "transition" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "lightbox", "title": "Lightbox", "category": "media", "description": "Wrap an article and every picture in it opens large: it grows from its own place to the screen, arrows or a swipe go to the next, and it returns to its place on Escape.", "tags": [ "lightbox", "image", "article", "zoom" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "zoom-lens", "title": "Zoom Lens", "category": "media", "description": "A closer look under the pointer: a round lens follows with a little lag and shows the detail from a sharper file, or the picture itself zooms towards the pointer.", "tags": [ "image", "zoom", "lens", "magnifier" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "text-highlight", "title": "Annotated Text", "category": "text", "description": "Hand-drawn marks that draw themselves on key words when the paragraph shows up: underline, strike, circle or marker.", "tags": [ "text", "annotation", "highlight", "svg" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "eye-glyph", "title": "Eye Glyph", "category": "text", "description": "Any letter with a hole becomes an eye: the pupil follows the pointer, lashes grow on top, and real lids close it when it blinks. Poke one and it winks.", "tags": [ "eye", "blink", "404", "cursor", "headline", "playful" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "scrolling-text-loop", "title": "Marquee", "category": "text", "description": "An endless ticker that never jumps, eases to a stop under the pointer and fades at both edges. Runs either way.", "tags": [ "text", "marquee", "loop", "ticker" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "animated-text-reveal", "title": "Scroll Text Reveal", "category": "text", "description": "Words light up one after the other as a paragraph scrolls by, and dim again on the way back. Fade, blur or rise. No GSAP.", "tags": [ "scroll", "text", "reveal", "words" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "text-shimmer", "title": "Shimmer Text", "category": "text", "description": "A band of light that sweeps across text, the way a busy interface says \"still working on it\". Looping, on hover, or following the pointer.", "tags": [ "text", "shimmer", "loading", "hover" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "text-split-scroll-reveal", "title": "Text Reveal", "category": "text", "description": "Text that writes itself in when it reaches the screen: lines rising from a mask, words coming into focus, or letters. Plays once.", "tags": [ "text", "reveal", "entrance", "split" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "typewriter-effect", "title": "Typewriter", "category": "text", "description": "Phrases typed with a human rhythm and an honest caret. Retypes only what changes, or selects it like an editor before typing over it.", "tags": [ "text", "typewriter", "typing", "caret" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "word-rotator", "title": "Word Rotator", "category": "text", "description": "One word of a sentence keeps changing: the next one's letters rise as the old ones leave, or the word flips over. The space follows the word, the sentence moves along.", "tags": [ "text", "rotate", "words", "headline" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "hover-list-preview", "title": "Hover List Preview", "category": "images", "description": "Point at a row and its picture shows in one frame that follows the pointer, wiping to the next picture as you move down the list. Panel mode, keyboard and touch thumbnails included.", "tags": [ "list", "hover", "image", "team", "portfolio", "services" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "image-scale", "title": "Image Hover", "category": "images", "description": "Four ways for an image to answer the pointer, inside its own frame: a slow zoom, coming into focus, rounding off, or drifting with the cursor.", "tags": [ "hover", "image", "zoom", "parallax" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "image-reveal", "title": "Image Reveal", "category": "images", "description": "A picture that unveils itself when it comes into view: a curtain opens from below, from the side or like an iris while the picture settles from a slight zoom.", "tags": [ "image", "reveal", "scroll", "clip-path" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "grain", "title": "Grain", "category": "backgrounds", "description": "Film grain from one inline SVG noise, jumping ten times a second like the next frame of a roll: under the words of a section, over its photo. The specks take your two colours. Nothing to download.", "tags": [ "background", "grain", "noise", "film", "texture", "hero", "editorial" ], "updated": "2026-10-20", "js": true, "dependencies": [] }, { "slug": "interactive-dots", "title": "Interactive Dots", "category": "backgrounds", "description": "A hero over a field of fine dots. The pointer pushes them aside like a hand in sand, they spring back, and a click sends a wave across. One canvas, asleep when nobody is looking.", "tags": [ "background", "canvas", "hero", "dots", "pointer", "interactive" ], "updated": "2026-10-20", "js": true, "dependencies": [] }, { "slug": "pattern-background", "title": "Pattern Background", "category": "backgrounds", "description": "A hero framed by its own pattern: the grid lines up on your content, four hairlines run along its edges with crop marks on the corners, the rest fades out. Grid, dots, crosses or diagonals. No images.", "tags": [ "background", "pattern", "grid", "dots", "frame", "hero" ], "updated": "2026-10-20", "js": true, "dependencies": [] }, { "slug": "back-to-top", "title": "Back to Top", "category": "scroll", "description": "A round button that shows up a screen down, its ring filling as you read. Its label unrolls on hover, the arrow takes off when you click.", "tags": [ "scroll", "button", "progress", "top" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "horizontal-scroll", "title": "Horizontal Scroll", "category": "scroll", "description": "A section that pins itself while its cards slide sideways as you scroll down. Pictures drift in their frames, the counter rolls. A swipe on touch.", "tags": [ "scroll", "horizontal", "sticky", "gallery" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "infinite-scroll", "title": "Infinite Scroll", "category": "scroll", "description": "Placeholders the size of a post shimmer in, then turn into the posts without a jump. Two loads on their own, then a button, so the footer stays reachable.", "tags": [ "scroll", "loading", "list", "skeleton" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "fade-in-scroll", "title": "Scroll Reveal", "category": "scroll", "description": "Blocks make their entrance as they scroll in: a fade, lines rising from a mask, or an image unveiled by clip-path. Blocks that arrive together take turns.", "tags": [ "scroll", "reveal", "mask", "clip-path" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "sticky-scroll-reveal", "title": "Sticky Scroll Reveal", "category": "scroll", "description": "A block that pins itself while big statements take turns as you scroll: each line leaves through its own mask while the next one rises.", "tags": [ "scroll", "sticky", "text", "mask" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "sticky-steps", "title": "Sticky Steps", "category": "scroll", "description": "A picture pinned on one side, steps scrolling on the other: each step draws its picture over the last like a curtain, and the counter rolls along.", "tags": [ "scroll", "sticky", "steps", "storytelling" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "hover-custom-cursor", "title": "Custom Cursor", "category": "cursor", "description": "Inside its zone the pointer becomes a dot with a soft lag, and a pill that says what a click will do over each item. No GSAP.", "tags": [ "cursor", "hover", "pointer", "image" ], "updated": "2026-10-16", "js": true, "dependencies": [] }, { "slug": "landing-reveal", "title": "Landing Reveal", "category": "transitions", "description": "A preloader that counts the files your hero really needs while its images rise onto a pile. At 100 the hero image comes up last and grows into place, then the title rises. Click or any key skips. No GSAP.", "tags": [ "preloader", "intro", "hero", "page load", "counter", "image stack" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "page-lift", "title": "Page Lift", "category": "transitions", "description": "Between two real pages, the one you leave recedes as the next rises over it on a rounded edge. The header stays, back plays it in reverse. Chrome, Edge, Safari; Firefox loads plainly for now. No GSAP.", "tags": [ "page transition", "view transitions", "multi-page", "case study", "portfolio", "swup" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "hero-expand", "title": "Hero Expand", "category": "hero", "description": "A big title with a small picture set between two words. On scroll the scene pins, the picture opens to full screen and pushes the words aside, then a caption and a button rise. Scroll back up: it rewinds.", "tags": [ "hero", "section", "landing", "scroll", "sticky", "pin", "image", "expand", "scrub" ], "updated": "2026-10-21", "js": true, "dependencies": [] }, { "slug": "hero-split", "title": "Hero Split", "category": "hero", "description": "A split hero, words on the left and a 4:5 picture on the right: the title lines rise out of their masks while the picture opens from the top edge down.", "tags": [ "hero", "section", "landing", "entrance", "split" ], "updated": "2026-10-20", "js": true, "dependencies": [] } ] }