https://kodza.dev/components/ New Kodza components, newest first. Plain HTML, CSS and JS. Zero dependencies. en Wed, 21 Oct 2026 00:00:00 GMT https://kodza.dev/components/eye-glyph/ https://kodza.dev/components/eye-glyph/ Wed, 21 Oct 2026 00:00:00 GMT Text effects 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. https://kodza.dev/components/hero-expand/ https://kodza.dev/components/hero-expand/ Wed, 21 Oct 2026 00:00:00 GMT Hero 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. https://kodza.dev/components/grain/ https://kodza.dev/components/grain/ Tue, 20 Oct 2026 00:00:00 GMT Backgrounds & textures 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. https://kodza.dev/components/hero-split/ https://kodza.dev/components/hero-split/ Tue, 20 Oct 2026 00:00:00 GMT Hero 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. https://kodza.dev/components/interactive-dots/ https://kodza.dev/components/interactive-dots/ Tue, 20 Oct 2026 00:00:00 GMT Backgrounds & textures 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. https://kodza.dev/components/page-lift/ https://kodza.dev/components/page-lift/ Tue, 20 Oct 2026 00:00:00 GMT Preloaders & transitions 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. https://kodza.dev/components/pattern-background/ https://kodza.dev/components/pattern-background/ Tue, 20 Oct 2026 00:00:00 GMT Backgrounds & textures 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. https://kodza.dev/components/share-button/ https://kodza.dev/components/share-button/ Tue, 20 Oct 2026 00:00:00 GMT Buttons 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. https://kodza.dev/components/split-button/ https://kodza.dev/components/split-button/ Tue, 20 Oct 2026 00:00:00 GMT Buttons 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. https://kodza.dev/components/press-button/ https://kodza.dev/components/press-button/ Mon, 19 Oct 2026 00:00:00 GMT Buttons 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. https://kodza.dev/components/hold-to-confirm/ https://kodza.dev/components/hold-to-confirm/ Mon, 19 Oct 2026 00:00:00 GMT Buttons 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. https://kodza.dev/components/carousel/ https://kodza.dev/components/carousel/ Sun, 18 Oct 2026 00:00:00 GMT Media 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. https://kodza.dev/components/landing-reveal/ https://kodza.dev/components/landing-reveal/ Sun, 18 Oct 2026 00:00:00 GMT Preloaders & transitions 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. https://kodza.dev/components/hover-list-preview/ https://kodza.dev/components/hover-list-preview/ Sat, 17 Oct 2026 00:00:00 GMT Image effects 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. https://kodza.dev/components/trapdoor-menu/ https://kodza.dev/components/trapdoor-menu/ Sat, 17 Oct 2026 00:00:00 GMT Navigation 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. https://kodza.dev/components/alert/ https://kodza.dev/components/alert/ Fri, 16 Oct 2026 00:00:00 GMT Feedback & loading 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. https://kodza.dev/components/arrow-link/ https://kodza.dev/components/arrow-link/ Fri, 16 Oct 2026 00:00:00 GMT Links 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. https://kodza.dev/components/back-to-top/ https://kodza.dev/components/back-to-top/ Fri, 16 Oct 2026 00:00:00 GMT Scroll 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. https://kodza.dev/components/before-after/ https://kodza.dev/components/before-after/ Fri, 16 Oct 2026 00:00:00 GMT Media 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. https://kodza.dev/components/code-block/ https://kodza.dev/components/code-block/ Fri, 16 Oct 2026 00:00:00 GMT Data display 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. https://kodza.dev/components/cookie-consent/ https://kodza.dev/components/cookie-consent/ Fri, 16 Oct 2026 00:00:00 GMT Overlays 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. https://kodza.dev/components/empty-state/ https://kodza.dev/components/empty-state/ Fri, 16 Oct 2026 00:00:00 GMT Feedback & loading 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. https://kodza.dev/components/external-link/ https://kodza.dev/components/external-link/ Fri, 16 Oct 2026 00:00:00 GMT Links 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. https://kodza.dev/components/horizontal-scroll/ https://kodza.dev/components/horizontal-scroll/ Fri, 16 Oct 2026 00:00:00 GMT Scroll 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. https://kodza.dev/components/hover-nav/ https://kodza.dev/components/hover-nav/ Fri, 16 Oct 2026 00:00:00 GMT Navigation 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. https://kodza.dev/components/image-reveal/ https://kodza.dev/components/image-reveal/ Fri, 16 Oct 2026 00:00:00 GMT Image effects 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. https://kodza.dev/components/kbd/ https://kodza.dev/components/kbd/ Fri, 16 Oct 2026 00:00:00 GMT Data display 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. https://kodza.dev/components/lightbox/ https://kodza.dev/components/lightbox/ Fri, 16 Oct 2026 00:00:00 GMT Media 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. https://kodza.dev/components/link-preview/ https://kodza.dev/components/link-preview/ Fri, 16 Oct 2026 00:00:00 GMT Links 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. https://kodza.dev/components/loading-button/ https://kodza.dev/components/loading-button/ Fri, 16 Oct 2026 00:00:00 GMT Buttons 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. https://kodza.dev/components/magnetic-button/ https://kodza.dev/components/magnetic-button/ Fri, 16 Oct 2026 00:00:00 GMT Buttons 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. https://kodza.dev/components/otp-input/ https://kodza.dev/components/otp-input/ Fri, 16 Oct 2026 00:00:00 GMT Forms 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. https://kodza.dev/components/password-field/ https://kodza.dev/components/password-field/ Fri, 16 Oct 2026 00:00:00 GMT Forms 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. https://kodza.dev/components/product-tour/ https://kodza.dev/components/product-tour/ Fri, 16 Oct 2026 00:00:00 GMT Overlays 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. https://kodza.dev/components/scroll-header/ https://kodza.dev/components/scroll-header/ Fri, 16 Oct 2026 00:00:00 GMT Navigation 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. https://kodza.dev/components/text-shimmer/ https://kodza.dev/components/text-shimmer/ Fri, 16 Oct 2026 00:00:00 GMT Text effects 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. https://kodza.dev/components/stat-card/ https://kodza.dev/components/stat-card/ Fri, 16 Oct 2026 00:00:00 GMT Data display 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. https://kodza.dev/components/sticky-steps/ https://kodza.dev/components/sticky-steps/ Fri, 16 Oct 2026 00:00:00 GMT Scroll 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. https://kodza.dev/components/table-of-contents/ https://kodza.dev/components/table-of-contents/ Fri, 16 Oct 2026 00:00:00 GMT Navigation 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. https://kodza.dev/components/text-field/ https://kodza.dev/components/text-field/ Fri, 16 Oct 2026 00:00:00 GMT Forms 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. https://kodza.dev/components/top-loading-bar/ https://kodza.dev/components/top-loading-bar/ Fri, 16 Oct 2026 00:00:00 GMT Feedback & loading 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. https://kodza.dev/components/word-rotator/ https://kodza.dev/components/word-rotator/ Fri, 16 Oct 2026 00:00:00 GMT Text effects 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. https://kodza.dev/components/zoom-lens/ https://kodza.dev/components/zoom-lens/ Fri, 16 Oct 2026 00:00:00 GMT Media 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. https://kodza.dev/components/avatar/ https://kodza.dev/components/avatar/ Mon, 12 Jan 2026 00:00:00 GMT Data display 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. https://kodza.dev/components/badge/ https://kodza.dev/components/badge/ Mon, 12 Jan 2026 00:00:00 GMT Data display 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. https://kodza.dev/components/breadcrumbs/ https://kodza.dev/components/breadcrumbs/ Mon, 12 Jan 2026 00:00:00 GMT Navigation A breadcrumb trail that folds its middle behind a "…" button when it would not fit on one line, and unfolds it crumb after crumb. https://kodza.dev/components/card/ https://kodza.dev/components/card/ Mon, 12 Jan 2026 00:00:00 GMT Cards An editorial card, clickable as a whole through one link: the image drifts closer, the border firms up and an arrow slides in. https://kodza.dev/components/color-picker/ https://kodza.dev/components/color-picker/ Mon, 12 Jan 2026 00:00:00 GMT Forms 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. https://kodza.dev/components/command-palette/ https://kodza.dev/components/command-palette/ Mon, 12 Jan 2026 00:00:00 GMT Navigation A ⌘K palette in a real dialog: results filter as you type, matched letters are underlined and a highlight slides between them. https://kodza.dev/components/context-menu/ https://kodza.dev/components/context-menu/ Mon, 12 Jan 2026 00:00:00 GMT Navigation A right-click menu that grows from the exact point you clicked, stays on screen and works from the keyboard with Shift + F10.