# Kodza

> A free library of premium UI components and effects in plain HTML, CSS and vanilla JavaScript: no framework, no build step, no dependencies. Safe to paste into any site, including WordPress and Shopify themes.

How the components work:

- Each component is three pieces: HTML, CSS, and (often) a small vanilla JS file. Copy them as they are.
- They are also served as files, byte for byte what the site copies: https://kodza.dev/registry/<slug>/kodza-<slug>.css, .js and .html. An assistant that can run commands downloads the CSS and the JS (`curl -fsSL -o kodza-<slug>.css …`) instead of retyping them.
- The CSS only targets `kodza-` classes: it never touches the rest of the page.
- The CSS ends with a generated theme guard (lines with `:not(#_)`): keep it. It stops a site's own CSS (WordPress themes, Bootstrap, resets) from restyling the component's buttons and fields.
- The CSS and the JS start with a one-line Kodza License comment: keep it with the files.
- Settings are CSS variables (`--kz-<component>-…`), set on the component root itself; variants are modifier classes (`kodza-x--y`) or `data-` attributes.
- Several instances can live on one page; one copy of the JS serves them all.
- Components take the page's font. The Kodza look is Geist and Geist Mono, from Google Fonts: https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap
- Dark mode: each component page gives the variable values for a dark background, ready to put under `@media (prefers-color-scheme: dark)` or a site's own dark selector.
- Lifecycle: `document.dispatchEvent(new CustomEvent('kodza:init', { detail: { root } }))` starts the components inside `root` (content loaded later), `'kodza:destroy'` stops them and puts their original markup back.
- Respects `prefers-reduced-motion`, works with the keyboard, accessible (WCAG AA checked).
- Each link below is the component in Markdown: description, API, dark mode, how to use it (HTML, Claude artifact, WordPress, Shopify, React) and the full code.

## Buttons

- [3D Press Button](https://kodza.dev/components/press-button.md): 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.
- [Arrow Button](https://kodza.dev/components/button-arrow-slide.md): An arrow that draws itself in on hover, nudges the label aside, then carries on through the button when you leave.
- [Call Button](https://kodza.dev/components/call-button-expand.md): A round phone icon that opens into a full "Book a call" button, with a little ring. Stays open on touch screens. Pure CSS.
- [Copy to Clipboard](https://kodza.dev/components/copy-clipboard.md): 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".
- [Fill Button](https://kodza.dev/components/button-fill.md): 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.
- [Hold to Confirm](https://kodza.dev/components/hold-to-confirm.md): 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.
- [Loading Button](https://kodza.dev/components/loading-button.md): 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.
- [Magnetic Button](https://kodza.dev/components/magnetic-button.md): 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.
- [Morph Button](https://kodza.dev/components/button-svg-morph.md): A pill that tightens into a circle on hover while its label gives way to an arrow. The clickable area never moves. Pure CSS.
- [Roll Button](https://kodza.dev/components/button-slide.md): 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.
- [Share Button](https://kodza.dev/components/share-button.md): 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.
- [Split Button](https://kodza.dev/components/split-button.md): 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.

## Links

- [Arrow Link](https://kodza.dev/components/arrow-link.md): 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.
- [External Link](https://kodza.dev/components/external-link.md): 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.
- [Highlight Link](https://kodza.dev/components/hover-link-text-background-reveal.md): A highlighter stroke that sweeps behind the link text, or a solid block that flips the text to white exactly under its edge.
- [Link Preview](https://kodza.dev/components/link-preview.md): 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.
- [Scramble Link](https://kodza.dev/components/hover-link-text-shuffle.md): Hover a link and its word scrambles, then settles from left to right: symbols that decode, its own letters shuffling, or a split-flap.
- [Underline Link](https://kodza.dev/components/hover-link-text-underline.md): An underline that slides in from the left and leaves through the right, or the reverse. Follows the text across lines, like a pen.

## Forms

- [Checkbox](https://kodza.dev/components/checkbox-component.md): 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.
- [Color Picker](https://kodza.dev/components/color-picker.md): 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.
- [Date Picker](https://kodza.dev/components/date-picker.md): 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.
- [File Upload](https://kodza.dev/components/file-upload.md): 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.
- [Multi Select](https://kodza.dev/components/multi-select.md): 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.
- [OTP Input](https://kodza.dev/components/otp-input.md): 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.
- [Password](https://kodza.dev/components/password-field.md): 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.
- [Radio](https://kodza.dev/components/radio-component.md): 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.
- [Range Slider](https://kodza.dev/components/range-slider.md): 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.
- [Search Autocomplete](https://kodza.dev/components/search-input.md): A search field over a real datalist: suggestions unroll under it, grouped, with the letters you typed underlined. "/" jumps in, arrows and Enter drive.
- [Select](https://kodza.dev/components/custom-select.md): 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.
- [Star Rating](https://kodza.dev/components/rating-component.md): 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.
- [Switch](https://kodza.dev/components/switch-toggle.md): 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.
- [Text Field](https://kodza.dev/components/text-field.md): 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.
- [Textarea](https://kodza.dev/components/textarea.md): 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.

## Navigation

- [Breadcrumbs](https://kodza.dev/components/breadcrumbs.md): A breadcrumb trail that folds its middle behind a "…" button when it would not fit on one line, and unfolds it crumb after crumb.
- [Command Palette](https://kodza.dev/components/command-palette.md): A ⌘K palette in a real dialog: results filter as you type, matched letters are underlined and a highlight slides between them.
- [Context Menu](https://kodza.dev/components/context-menu.md): A right-click menu that grows from the exact point you clicked, stays on screen and works from the keyboard with Shift + F10.
- [Dropdown Menu](https://kodza.dev/components/dropdown-menu.md): A menu that unrolls from its button, with a highlight that slides from item to item. Actions or choices, arrows and first letters.
- [Hover Nav](https://kodza.dev/components/hover-nav.md): 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.
- [Pagination](https://kodza.dev/components/pagination.md): Seven slots that never jump: the ink pill slides to the page and the numbers that change roll into place. Compact version included.
- [Scroll Header](https://kodza.dev/components/scroll-header.md): 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.
- [Sidebar Menu](https://kodza.dev/components/sidebar-toggle-menu.md): 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.
- [Staggered Horizontal Menu](https://kodza.dev/components/menu-horizontal-stagger-reverse.md): 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.
- [Stepper](https://kodza.dev/components/stepper.md): 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.
- [Table of Contents](https://kodza.dev/components/table-of-contents.md): 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.
- [Tabs](https://kodza.dev/components/tabs-component.md): 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.
- [Trapdoor Menu](https://kodza.dev/components/trapdoor-menu.md): 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.

## Overlays

- [Cookie Consent](https://kodza.dev/components/cookie-consent.md): 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.
- [Dialog](https://kodza.dev/components/modal-component.md): 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.
- [Popover](https://kodza.dev/components/popover.md): 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.
- [Product Tour](https://kodza.dev/components/product-tour.md): 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.
- [Sheet](https://kodza.dev/components/drawer.md): 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.
- [Toast](https://kodza.dev/components/toast-notification.md): 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.
- [Tooltip](https://kodza.dev/components/tooltip-component.md): 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.

## Feedback & loading

- [Alert](https://kodza.dev/components/alert.md): 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.
- [Empty State](https://kodza.dev/components/empty-state.md): 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.
- [Progress](https://kodza.dev/components/progress-bar.md): 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.
- [Skeleton](https://kodza.dev/components/skeleton-loader.md): 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.
- [Spinner](https://kodza.dev/components/loading-spinner.md): 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.
- [Top Loading Bar](https://kodza.dev/components/top-loading-bar.md): 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.

## Data display

- [Accordion](https://kodza.dev/components/accordion-component.md): Questions that open on their answer, on a native <details>: the panel opens at its real height, the answer rises, the plus turns into a minus. One open at a time if you like.
- [Avatar](https://kodza.dev/components/avatar.md): 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.
- [Badge](https://kodza.dev/components/badge.md): 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.
- [Code Block](https://kodza.dev/components/code-block.md): 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.
- [Countdown](https://kodza.dev/components/event-day-counter.md): 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.
- [Counter](https://kodza.dev/components/counter-animation.md): 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.
- [Filter Transitions](https://kodza.dev/components/filter-transitions.md): 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.
- [Kbd](https://kodza.dev/components/kbd.md): 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.
- [Separator](https://kodza.dev/components/separator.md): 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.
- [Show More](https://kodza.dev/components/collapsible.md): 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.
- [Stat Card](https://kodza.dev/components/stat-card.md): 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.
- [Table](https://kodza.dev/components/table.md): 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.
- [Timeline](https://kodza.dev/components/timeline-component.md): 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.

## Cards

- [Border Trace Card](https://kodza.dev/components/hover-gradient-card.md): 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.
- [Card](https://kodza.dev/components/card.md): An editorial card, clickable as a whole through one link: the image drifts closer, the border firms up and an arrow slides in.
- [Expandable Card](https://kodza.dev/components/expandable-card.md): A row of cards where one is always open: click another and it widens while the others step back. Stacked on small screens.
- [Pricing Plans](https://kodza.dev/components/pricing-plans.md): 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.
- [Sticky Cards](https://kodza.dev/components/sticky-cards.md): Cards that stack as you scroll, each covered card stepping back and darkening. Plain position: sticky and a few lines of JS. No GSAP.

## Media

- [Before / After](https://kodza.dev/components/before-after.md): 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.
- [Carousel](https://kodza.dev/components/carousel.md): 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.
- [Fullscreen Slider](https://kodza.dev/components/slider-horizontal-fullscreen.md): 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.
- [Image Gallery](https://kodza.dev/components/image-gallery.md): 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.
- [Lightbox](https://kodza.dev/components/lightbox.md): 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.
- [Zoom Lens](https://kodza.dev/components/zoom-lens.md): 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.

## Text effects

- [Annotated Text](https://kodza.dev/components/text-highlight.md): Hand-drawn marks that draw themselves on key words when the paragraph shows up: underline, strike, circle or marker.
- [Eye Glyph](https://kodza.dev/components/eye-glyph.md): 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.
- [Marquee](https://kodza.dev/components/scrolling-text-loop.md): An endless ticker that never jumps, eases to a stop under the pointer and fades at both edges. Runs either way.
- [Scroll Text Reveal](https://kodza.dev/components/animated-text-reveal.md): 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.
- [Shimmer Text](https://kodza.dev/components/text-shimmer.md): 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.
- [Text Reveal](https://kodza.dev/components/text-split-scroll-reveal.md): Text that writes itself in when it reaches the screen: lines rising from a mask, words coming into focus, or letters. Plays once.
- [Typewriter](https://kodza.dev/components/typewriter-effect.md): Phrases typed with a human rhythm and an honest caret. Retypes only what changes, or selects it like an editor before typing over it.
- [Word Rotator](https://kodza.dev/components/word-rotator.md): 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.

## Image effects

- [Hover List Preview](https://kodza.dev/components/hover-list-preview.md): 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.
- [Image Hover](https://kodza.dev/components/image-scale.md): 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.
- [Image Reveal](https://kodza.dev/components/image-reveal.md): 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.

## Backgrounds & textures

- [Grain](https://kodza.dev/components/grain.md): 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.
- [Interactive Dots](https://kodza.dev/components/interactive-dots.md): 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.
- [Pattern Background](https://kodza.dev/components/pattern-background.md): 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.

## Scroll

- [Back to Top](https://kodza.dev/components/back-to-top.md): 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.
- [Horizontal Scroll](https://kodza.dev/components/horizontal-scroll.md): 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.
- [Infinite Scroll](https://kodza.dev/components/infinite-scroll.md): 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.
- [Scroll Reveal](https://kodza.dev/components/fade-in-scroll.md): 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.
- [Sticky Scroll Reveal](https://kodza.dev/components/sticky-scroll-reveal.md): 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.
- [Sticky Steps](https://kodza.dev/components/sticky-steps.md): 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.

## Cursor

- [Custom Cursor](https://kodza.dev/components/hover-custom-cursor.md): 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.

## Preloaders & transitions

- [Landing Reveal](https://kodza.dev/components/landing-reveal.md): 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.
- [Page Lift](https://kodza.dev/components/page-lift.md): 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.

## Hero

- [Hero Expand](https://kodza.dev/components/hero-expand.md): 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.
- [Hero Split](https://kodza.dev/components/hero-split.md): 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.

## Optional

- [Catalogue](https://kodza.dev/components/): every component, with a live demo
- [Registry](https://kodza.dev/registry/index.json): the same list as JSON, one file per component in /registry/<slug>.json