368 components you can import

A glossy dark button with a pointer-following specular band, a slow liquid sheen on hover, a squashed pressed state and a loading spinner; dark and accent variants.

code.xr

A single-select switch on a tinted track with a thumb that slides to the chosen segment; a native radio group with arrow keys, Home and End, plus a plain variant that only bolds the choice.

Adapted from BoardUI (MIT)

Drag, flick and throw a card with momentum, edge bounce and optional snap grid; arrow keys nudge.

Anime.js

Smooth gradient area chart with axis ticks, a hover and keyboard crosshair with tooltip, and an optional stacked multi-series mode.

Bklit

A floating app sidebar that collapses to an icon rail (labels fade and shrink), with a filterable quick search (press /), counter badges, an account menu at the top and a team menu at the bottom.

Adapted from BoardUI (MIT)

Headline letters wobble like jelly as the pointer passes over them, each letter a spring; tap or Enter sends a wave.

Hover Interaction Collection

A grid of cells that ripple in from any origin with a distance-based stagger; click a cell to replay from there.

Anime.js

Draws SVG paths with a stroke-dashoffset animation when scrolled into view, with replay.

Anime.js

A grid of squares that swell, spin and shift between the brand colours as interference waves roll across it; the pointer swells them.

Original

A surface with a glowing edge that follows the pointer and leaks a soft halo; a slow light circles the border when idle, and focus lights it up.

Original

A full-section backdrop of flowing liquid light under a tinted glass panel; the pointer bends the light, a click sends a ripple, and glass placed inside it refracts it.

Tactile Glass UI

Traces a mark's outline and resolves into the filled mark; loops or runs once.

Kitchen

An inbox card with All, Mentions and System tabs and counts, grouped notifications with avatars or status icons, unread dots, action buttons that mark an item read, Mark all read, and an empty state.

Adapted from BoardUI (MIT)

Glossy black magnetic liquid puddles drifting about, with a lattice of sharp spikes that rises where a magnet (the pointer) is near.

Original

A pay button with a pair of eyes that follow the pointer, look at the label on keyboard focus, and close into a confirmed check state when pressed.

code.xr

A sign-in, sign-up and one-time-code card with validated fields (messages on the field), password reveal, remember me, provider buttons in stacked, inline or grid layout, and an optional split with artwork.

Adapted from BoardUI (MIT)

KPI cards in two looks: a compact plain row (icon tile, label, value, delta chip) and a footer variant with a tinted gradient icon tile, an info tooltip, a display-size value and a comparison band with a delta pill; they reflow from one to four columns with their container.

Adapted from BoardUI (MIT)

Vertical grouped or stacked bars with rounded tops, value labels on focus, and a horizontal option.

Bklit

A tab bar whose pill or underline indicator springs and stretches between tabs, previews on hover, and scrolls with edge fades when crowded.

code.xr

A text ticker that drifts slowly, speeds up and reverses direction on hover, pauses on focus, and is a static list with reduced motion.

Hover Interaction Collection

Morphs between circle, star and heart by interpolating normalised point lists, on click or auto-cycle.

Anime.js

A 3D-ish carousel of frosted-glass cards with a larger centre card, drag with momentum snap, arrows, arrow keys, dots and optional autoplay.

code.xr

Translucent glass shards at several depths drifting and turning over a soft sky gradient, with bevelled edges and pointer parallax.

Original

A gooey blob chases the pointer with droplets that stretch behind it and merge back; it swells over links and buttons, squashes on press and follows keyboard focus.

Original

A pill button of liquid glass: the rim catches light, caustics flow through it and a click sends a ripple.

Tactile Glass UI

A grid of linked nodes with a diagonal pulse of light sweeping across it; a static graded frame under reduced motion.

Original

The small status parts of a dashboard: tinted chips in ten colours and three sizes, counter badges, status dots with a halo, and keyboard hint pills.

Adapted from BoardUI (MIT)

A spiral galaxy of a couple of thousand stars with a glowing core, tilted in 3D and slowly rotating; the pointer tips the disc.

Original

A subscribe button that folds in on itself, becomes a paper plane that flies off, then settles into a Subscribed state with a reset.

code.xr

A one-time-code field with N visual boxes over one real input (SMS autofill friendly): auto-advance, backspace, arrows, paste, pop on fill, shake on error and a check seal on success.

code.xr

A customers table with sortable columns, price, product and region filters, search, row selection with select-all, per-row purchase status, inline rename, delete, a more menu, pagination and a Normal or Compact density switch.

Adapted from BoardUI (MIT)

Multi-series monotone line chart whose legend buttons toggle series, with a crosshair tooltip.

Bklit

A collapsible icon and label sidebar with a gliding active bar, tooltips in rail mode and a subtle brand glow that follows the pointer.

code.xr

A headline whose long shadow always falls away from the pointer; arrow keys turn it when focused and a tap steps it on touch.

Hover Interaction Collection

An element follows an SVG path with tangent rotation, a fading trail and a scrub slider.

Anime.js

A picture revealed through vertical blind slats that turn edge-on one after another on hover, focus or tap.

Hover Interaction Collection

Weightless specks that drift upward with a slow sway, streak with speed and are shoved aside and lifted by the pointer.

Original

Full-length guide lines, edge rulers, a reticle and a live x / y readout follow the pointer; keyboard focus moves them onto the focused element.

Original

A payment card in dark liquid glass that tilts toward the pointer while the glass refracts the tilted surface; accent colours come from the theme.

Tactile Glass UI

A list of steps that move from pending to active to done with a spinner and check, driven by props or autoplay.

Kokonut UI

A like toggle whose heart pops with a ripple and a ring of sparks, then keeps a slow heartbeat while liked.

Original

A shader tunnel of square light rings with broken segments racing toward a glowing vanishing point that the pointer steers.

Original

A mouth-shaped delete button that opens on hover or focus, swallows a file chip when activated and offers a timed undo.

code.xr

A file picker and drop target that shows upload progress as a ball arcing into a hoop, with percentage, cancel, retry, error and success states.

code.xr

A card-payment form whose card face updates live, flips to the back on CVC focus, formats and Luhn-checks the number, and plays a fake processing then success sequence (no network).

code.xr

Streaming line that appends a point every second in a sliding window, with a pause button; it pauses off-screen and in hidden tabs.

Bklit

A glass pill indicator that stretches between items with a separate spring on each edge; the active label turns neon.

code.xr

Text whose changed characters scramble through random glyphs and settle left to right; screen readers get the real text.

Kitchen

A four-step sequence (title, bar, counter, icon) driven by scroll position inside a scroll container.

Anime.js

A horizontal accordion of pictures where the hovered, focused or tapped panel expands and the others shrink; arrow keys move between panels.

Hover Interaction Collection

A pixelated, posterised vortex shader: domain-warped spiral folds cut into four flat brand tones with inked contours.

Original

A lattice of dots that swell, warm up and bend away from the pointer, then cool down; taps send a ring through the grid.

Original

Wraps any element and gives it the glass finish: rim light, caustics and ripples drawn over its content, following its border-radius.

Tactile Glass UI

A cinematic secure-connection loader with a stepped segmented bar, telemetry ticks, scanline and grain; determinate progress with live status text.

Original

A compact status indicator that redraws per state (idle, loading, success, warning, error) and announces changes through a live region.

Original

A reflective liquid-metal sheet drawn by a shader: a flowing height field lit as a mirror so dark and light bands slide across it; the pointer dents it.

Original

A publish button whose cloud icon rolls up into a check while the label rolls slot-machine style from Publish to Published, with a progress fill.

code.xr

Circular upload ring that unrolls into a straight progress bar, then tosses a file chip to the right end and shows a done check; falls back to a plain progress bar for reduced motion.

code.xr

A messaging UI with grouped mine/theirs bubbles, timestamps, delivery ticks, typing indicator, smart auto-scroll with a New messages pill and an Enter-to-send input.

code.xr

Line around a zero baseline with green fill above and red below, split by a clip path, and signed values in the tooltip.

Bklit

Navigation links sharing one underline that glides and stretches to the hovered or focused link, then returns to the active one.

Hover Interaction Collection

Text with a string under it: hover, drag or press Enter on the string and it vibrates while the letters ripple along.

Kokonut UI

A mini timeline orchestrator with play, pause, restart and scrub controls; accepts custom steps.

Anime.js

A circular mask follows the pointer and uncovers a second layer under the first; arrow keys and taps move it too.

Hover Interaction Collection

A pit of shaded balls with gravity and circle collisions that fall, bounce and heap up; the pointer pushes them around.

Original

A translucent glowing ghost pointer drifts behind the real one, trailing fading afterimages and a wavering wisp; it wanders and taps by itself when idle.

Original

A word whose letter shapes are liquid glass, with rim light and flowing caustics that react to the pointer; click cycles through a list.

Tactile Glass UI

Animated dot-orb status indicators for Thinking, Uploading, Listening and Idle in 20px and 56px sizes with primary, signal, aurora and mono colour styles.

Original

A toast notification you flick away sideways; Escape, arrow keys and a close button dismiss it, and it auto-dismisses with a timer that pauses on hover and focus.

Original

Colour that flows like ink in water from curl-noise currents in the brand colours, swirled by the pointer.

Original

A share button that fans out five targets (link, mail, chat, download, more) in an arc with staggered springs; arrow keys, Escape and menu semantics.

code.xr

A search button that flips in 3D to reveal an input, flips back on blur or Escape, and filters a suggestions list with arrow-key selection.

code.xr

A row of image panels where one is open and the rest collapse to slim strips; click, hover or arrow keys switch, and it stacks vertically in narrow containers.

Original

Columns and a line in one chart, each on its own labelled y axis (revenue and conversion rate).

Bklit

A round button that fans out tinted pill bubbles with a springy stagger; aria-expanded, Escape closes and returns focus.

Original

A word rendered as living ASCII art: characters swell in a travelling wave, the pointer acts as a lens and clicks send ripples.

Original

A checkout success state where a slot prints a paper receipt line by line, ending in a torn edge.

Kitchen

A sticker corner peels back toward the pointer's nearest corner to reveal content underneath; a corner button toggles it.

Hover Interaction Collection

Soft diagonal ribbons of brand colour that fold and flow like bent paper; the pointer pushes a bulge through them.

Original

A glossy band sweeps across the wrapped content away from the edge the pointer entered by; focus and taps replay it, touch plays it on a timer.

Original

Display heading with one or more words in liquid glass, optional badge and subtitle, and a size that follows its container.

Tactile Glass UI

A tooltip that waits a beat on first hover but opens instantly when moving along a row of controls; opens on focus, closes with Escape and is hoverable.

Original

Glowing flowing metal drawn by a shader: a dark cooled crust broken by seams burning primary to signal to white; the pointer heats it.

Original

Button that fills with two layered waves of liquid from the bottom as the upload progresses, with a percent label and a done state.

code.xr

A QR code generator: paste a link and get a real, scannable code in leaf-coloured squares; tap it and it becomes an isometric 3D tree standing on a slab whose tiles are the code.

Original

A feed whose rows rise in one by one, slide in when added and fold away when dismissed, with arrow-key navigation and Delete to dismiss.

Original

Scatter or bubble chart with group colours and marker shapes, nice axis ticks and a nearest-point tooltip.

Bklit

A top bar with a menu button and call to action that expands downward into a row of link cards.

Original

Text set around a ring that turns slowly; hover can speed it up, slow it, reverse it or pause it, and a centre slot holds an icon or label.

Original

An SVG signature that draws itself on mount and replays on click or Enter.

Kitchen

An illustration of stacked layers that separate in 3D (exploded view) on hover, focus or tap, with a legend that highlights each layer.

Hover Interaction Collection

A glowing signal field seen through barrel-curved CRT glass with scanlines, phosphor mask, colour fringing, a rolling bar and vignette; the pointer tears the picture.

Original

Images drop along the pointer path at regular distances, pop in tilted, drift on and fade out; taps drop a burst, idle plays a ghost trail.

Original

An AI prompt box on a glass pane: auto-growing text area (Enter sends), add-context button, a mode pill that cycles Agent / Plan / Ask, and a send button.

Tactile Glass UI

Spring-in notifications with icons that draw to match the state (success, error, info, loading), pause on hover, stack and collapse.

Sileo

A tiny 3D viewer for shapes built in code (cube, gem, low-poly rock) with drag-to-orbit, wheel and keyboard orbit and zoom.

Original

Neon-glow send button whose glow intensifies on hover; on click the paper plane flies out and the button confirms with Sent and a glow pulse.

code.xr

A rolling-digit counter with plus/minus buttons that repeat while held; it is a keyboard-operable spinbutton (arrows, Page keys, Home/End).

Original

A fan of cards that bounces into place on scroll; hover or focus lifts one and nudges the others, click gives a hop and reports the choice.

Original

OHLC candles (hollow when up, filled when down) with wicks, optional volume bars and an O/H/L/C tooltip.

Bklit

A magnifying icon dock: icons swell on a spring near the pointer or focus, neighbours slide aside; roving-tabindex toolbar.

Original

A marquee that scrolls along an arched line; drag to scrub and flip direction, arrow keys and Space steer it.

Original

Three sliders (stiffness, damping, mass) drive a live spring on a ball and a plotted response curve, with presets and the settle time.

Motion

A draggable glass lens that magnifies and refracts the scene behind it, with an edge displacement map and a slight colour split.

Original

Hanging curtains of dark, slowly breathing folds lit from below by the signal colour and along their crests by the primary; stays deep in light and dark themes.

Original

Square pixels light up under the pointer and fade out in crisp steps, leaving a pixel-art trail; taps burst, idle paints by itself.

Original

An on/off switch: a glass track with a molded glass thumb that refracts what is under it.

Tactile Glass UI

Four layered dashboard instruments (tachometer, speedometer, boost gauge, EV power meter) whose needles ease to the values you pass.

Original

A faceted crystal sphere of flat voronoi facets with per-facet lighting and glints that turns slowly and leans toward the pointer.

Original

Soft embossed play/pause button that presses in, morphs its icon, shows a progress ring and a three-bar equalizer while playing (visual only).

code.xr

A text field with arched edges whose typed text is echoed along an arc above it; a real labelled input underneath.

Original

A stacked card deck where the front card drops away and returns to the back; buttons, dots, arrow keys and a pausable autoplay switch cards.

Original

Pie or donut chart whose segments pull out on hover or focus, with a centre label, legend and optional leader-line labels.

Bklit

Large stacked rows; a ribbon of scrolling text slides in from the edge the pointer crossed.

Original

Big text with a solid shaded extrusion whose direction follows the pointer; arrow keys steer it and touch screens get a slow sway.

Original

A scroll-progress bar, a parallax layer and a percentage readout that follow the scroll position of a scrollable stage.

Motion

A compact cassette with turning reels, play/pause, a seek bar and title/artist; visual only, no audio.

Kitchen

An animated wave field quantised with an 8x8 ordered Bayer dither into square pixels in brand tones; the pointer raises a bump.

Original

The pointer stirs a small live fluid: ink in the theme colours swirls, curls and fades; a press bursts outward; reduced motion shows a still frame.

Original

A segmented control: a glass capsule with a molded indicator that slides to the chosen tab; arrow keys, Home and End move between tabs.

Tactile Glass UI

Volumetric laser beams sweeping across a dark stage with pulses running down each beam and a soft haze; beams lean with the pointer.

Original

Download button with a ripple from the click point, an arrow that drops into a tray, a progress ring and a final check.

code.xr

A slider whose track is a string: dragging pulls it toward the pointer and it springs back with a wobble; full slider semantics.

Original

A grid of tinted link/button cards where a pointer or focus spotlight keeps colour while the rest of the grid greys out.

Original

Concentric progress rings, one per category, with a centre total that animate in once.

Bklit

A nav bar whose active marker is a liquid blob that stretches between links through an SVG goo filter and sprays droplets.

Original

Solid text followed by outlined echoes that ripple outwards (or trail away) and fade; hover or tap throws them further.

Original

A list where added items animate in, removed items animate out before unmounting and the others slide into place; changes are announced.

Motion

A picture shown as a rotated halftone dot screen that a soft circular wipe from the pointer (or the centre on scroll-in) turns into the full-colour image.

Original

A grid of dots that swell with a diagonal wave; the pointer pushes them aside on springs and tints them.

Original

A small flock of agents flies after the pointer, orbiting it at rest and stretching out when it moves; a press scatters them.

Original

A spatial audio deck in liquid glass with a procedural Web Audio synth (no files): play, previous / next, draggable timeline, live spectrum, repeat.

Tactile Glass UI

A pool of liquid chrome: a warped height field lit as a mirror reflecting a brand-tinted studio, with a thin-film sheen; the pointer dents it.

Original

A button that springs toward the pointer within a radius, with the label moving a little further; inactive on coarse pointers and reduced motion.

Hover Interaction Collection

A slider whose thumb and large preview morph through circle, square, diamond and star as the value changes.

Original

A card whose picture frays away like old paper under hover or focus, with a button to let it crumble fully and restore it; an SVG-filter effect.

Original

Spider chart with up to three series polygons, grid rings and focusable vertices with tooltips.

Bklit

Menu items orbit on a draggable sphere with inertia; the facing item is described below and arrows step through items.

Original

A sentence whose words drop under gravity, bounce and pile up on the bottom edge; trigger by click, hover, scroll or button, then Reset.

Original

A vertically reorderable list: drag by a handle while the others spring out of the way, or pick up with Space and move with the arrow keys.

Motion

Pictures travelling around an elliptical orbit with depth scaling and dimming at the back, pausing on hover; Space pauses and arrows step the ring.

Original

A bloodshot slit-pupil eye whose iris and lids follow the pointer, blinking now and then and glancing about on its own on touch.

Original

Four corner brackets spin around the pointer and snap onto links and buttons you hover or focus; touch cycles through targets and locks onto taps.

Original

A pill button of thick frosted glass: heavy backdrop blur, fine grain, a lit edge and a soft sheen that follows the pointer.

Tactile Glass UI

A picture seen through water: pointer movement, clicks and taps send rings across it that bend and split the light.

Original

Label letters roll up and are replaced by a duplicate with a per-letter stagger on hover or focus.

Hover Interaction Collection

A rotary selector: drag around the dial, scroll, click a dot or use the arrows; exposed as a radio group.

Original

A drawn folder that opens to fan out the papers inside; click, Enter or Space toggles, hover peeks, and paper content is real DOM.

Original

Conversion funnel of trapezoid stages with step percentages and drop-off between stages.

Bklit

A slim rail of tick lines that stretch toward the pointer, unfold labels on hover or focus and follow scroll position.

Original

Text cut into panels that fold like a 3D accordion: breathes on its own, previews on hover or focus, and click pins it folded.

Original

A reveal wrapper that slides, scales, rotates and un-blurs its content in when it scrolls into view, with per-child stagger, easing presets and a replay-friendly once/repeat switch.

Original

A picture swap done in tiles: each square squashes over to the next picture on its own beat, in random, diagonal, row or ripple order, with controls and optional autoplay.

Original

A glitching terminal screen: scrolling log lines, tearing bands with RGB split, corrupted characters, scanlines and a blinking prompt; the pointer scrambles the lines under it.

Original

A pill button whose arrow rotates 45 degrees while the label slides on hover or keyboard focus.

Hover Interaction Collection

A dark frosted payment card that tilts toward the pointer under a moving sheen; pure CSS, so it is light on the GPU.

Tactile Glass UI

A flowing mesh-gradient background drawn by a fragment shader (domain-warped noise) in the brand colours; the pointer gently bends it.

Original

A button whose fill circle grows from the point where the pointer entered and recedes toward where it left; keyboard focus fills from the centre.

Hover Interaction Collection

A file drop target that leans toward an incoming drag, lists the dropped file names, and falls back to a browse input.

Kitchen

A card covered by tiny squares that bloom outward from the pointer or focus point and shimmer, then fold away; drawn on canvas.

Original

Semicircle meter with low/ok/high colour bands, animated needle, target tick and a big readout.

Bklit

A rounded pill navigation bar with circle-fill hover that folds into a menu button with a contained dropdown when narrow.

Original

Canvas text whose scanlines tremble sideways for a furry static edge; the pointer or a touch raises the interference.

Original

An opacity-first reveal wrapper: fade in once, fade in and out as it enters and leaves, or scrub the opacity with scroll position so content dissolves at the edges of its scroll area.

Original

A hover, focus or tap transition that pixelates one picture into chunky blocks in a few stages and resolves it into another.

Original

Many thin gradient lines swaying across the width on slow waves with glowing beads drifting along them; lines bend away from the pointer.

Original

A list of rows where hovering shows a floating picture that trails the pointer; touch and keyboard open the picture inline.

Hover Interaction Collection

An AI prompt box on frosted glass with agent and mode chips and a send button; a real labelled textarea.

Tactile Glass UI

A calm water surface from a layered sine height field with fake lighting; pointer movement and clicks send rings across it.

Original

A button where the arrow exits one side as a second arrow enters from the other on hover or focus.

Hover Interaction Collection

A keyboard-navigable grouped listbox with metric bars; the selected item reveals a segmented configuration row.

Kitchen

A person card with banner, generated avatar, status dot, bio, stats and Follow / Message actions, plus a pointer-driven foil sheen; adapts to its container width.

Original

Calendar or matrix heatmap on a sequential brand-tint scale with legend, tooltip and arrow-key grid navigation.

Bklit

A slide-in panel with colour layers sweeping ahead and links rising in sequence; contained unless fullscreen is set.

Original

Text with a brand-coloured chromatic split and torn slices that jump in short bursts (loop) or on hover; pure CSS.

Original

A progressive edge blur built from stacked backdrop-filter layers with overlapping masks, on any combination of edges, with strength, depth, curve and tint.

Original

A paper sketchbook of invented SVG drawings with a drag-driven page curl, a magnifier lens, arrow-key page turns and prev/next buttons.

Original

Magnetic field lines traced between moving poles with pulses flowing along them; the pointer acts as a pole that bends the field.

Original

A row of pill toggles that squash and stretch like soft bodies on hover or focus, pushing neighbours aside; press to select.

Hover Interaction Collection

An on/off switch on a frosted track with a light glass thumb; a real button with role="switch".

Tactile Glass UI

A rotating sphere of about 2500 depth-sized, depth-faded points; drag to rotate with inertia, arrow keys rotate, Home resets.

Original

A pill button with a hand glyph that waves on hover, focus or tap while the label changes to a greeting.

Hover Interaction Collection

An invite or token field with a scrambling Regenerate button and a Copy button with confirmation.

Kitchen

A glass card on a glossy floor with a faded mirrored reflection and a highlight that follows the pointer (drifts on its own otherwise).

Original

Flow diagram with proportional link widths between node columns; hovering or focusing a node highlights its flows.

Bklit

A proximity-spring top navigation in three fits (centred glass dock, modern bar, pixel retro bar) chosen by a variant prop.

Original

A heading whose lines rise out of a clipping mask on scroll, filled with a drifting brand gradient and a pointer-following highlight.

Original

A seamless endless row or column of logos with edge fade, pause on hover, focus and button, and a plain scrollable row under reduced motion.

Original

A spiral ribbon of curved artwork panels orbiting in CSS 3D, built from narrow slices; drag or arrow keys turn it and a button pauses it.

Original

Pale fibres rising from the bottom edge like optical strands, swaying on slow waves, ending in soft glowing tips; the pointer blows them aside.

Original

A soft shape that chases the pointer on a spring, blurring and stretching with speed, sharpening at rest and drifting on its own when idle.

Original

A pill tab bar on frosted glass with a sliding highlight; arrow keys, Home and End.

Tactile Glass UI

An endless scrolling wireframe terrain in perspective with a horizon fade; mouse X steers the camera slightly.

Original

A physical-feeling button with a shaped face on a firm edge that presses down on pointer or Space/Enter and springs back.

Kitchen

A role=switch whose thumb moves and squishes with spring physics, plus a spring-driven checkbox variant.

Motion

A card whose border is lit by a radial gradient following the pointer; focus and touch get a steady glow.

Hover Interaction Collection

Tile-grid cartogram of the US states coloured by value, with legend, tooltips and keyboard grid navigation.

Bklit

A word built from thousands of canvas particles that gather into place, are pushed away by the pointer and spring back; click or Enter scatters them, touch gets a drifting ripple.

Original

A framed picture that grows to full bleed as you scroll while the headline splits apart, then the page content continues below.

Original

ASCII art shaded by an animated gradient: each character cell picks a glyph by density and is tinted from the primary to the signal colour; the pointer raises a rippling bloom.

Original

A container, button or link whose border is circled by glowing four-point stars with comet tails, speeding up on hover and focus.

Original

A dark frosted music deck with a synthesised demo track: play, next, volume and a progress slider; never autoplays.

Tactile Glass UI

A glowing shader orb with a swirling plasma surface and soft rim light; the pointer tilts its light.

Original

A button that fills while held (pointer or Space/Enter), confirms at 100%, then offers a timed Undo before finalising.

Kitchen

A multi-step flow with a progress rail, animated panels, validation, Back/Next and a finish state.

Original

A pile of pictures that fans out on hover, keyboard focus or tap, showing a label on each.

Hover Interaction Collection

A year of monthly revenue as a smooth area and line against last year's dashed line; hover or arrow keys swap the headline for that month with its year-earlier figure and delta, and the numbers count up.

Adapted from BoardUI (MIT)

Letters trade places through several random arrangements of the line, then settle back into reading order; plays on view, hover, tap or Enter.

Original

A field of CSS 3D cubes that flip as the pointer sweeps over them and tilt toward it, with a slow wave and self-flips for touch.

Original

A row of vertical blinds filled with a drifting brand gradient; slats swing on a travelling wave and the ones near the pointer turn to face it.

Original

A sticker with a corner that curls with a computed fold line, backing paper and shading: hover near the corner, drag to peel, keyboard arrows to adjust.

Original

Wrap any content in a frosted glass panel: blur, grain, lit edge and a sheen that follows the pointer.

Tactile Glass UI

A card that tilts in perspective toward the pointer with parallax depth layers, a moving specular glare and a shifting shadow; arrow keys tilt it and touch screens get an idle sway.

Original

A button whose width animates as its label moves through states (Save, Saving…, Saved) with an inline icon swap.

Kitchen

A one-time-code field of separate slots: characters roll into place, focus advances, Backspace steps back and pasted codes spread across the slots.

Original

Pictures whose caption slides or wipes in on hover or focus, and stays visible on touch screens.

Hover Interaction Collection

A year of monthly orders as paired bars, this year beside last, with the same headline, delta chip, legend and hover or arrow-key reading as the revenue card; bars grow in once.

Adapted from BoardUI (MIT)

A departure-board display where each character flips through its drum one flap at a time; cycles a word list or follows the text prop.

Original

A grid of spring-linked nodes that stretches toward the pointer, wobbles back, and can be plucked by press or tap.

Original

Layered filled waves blending the signal colour into the primary, rolling in from the bottom with bright crests; the pointer lifts a swell and slides the layers in parallax.

Original

A soft drifting colour field under fine grain, made of the brand colours; the stage for frosted panes.

Tactile Glass UI

A CSS 3D rotating prism of content faces with title and text; drag or swipe to rotate with snapping, plus buttons, arrow keys and a spoken current face.

Original

A menu button whose actions grow out of the trigger along a branching line; arrows, Home/End, type-ahead, Enter/Space and Escape all work.

Original

A round slider with a glowing comet head whose tail stretches as it moves; drag the ring or use the keyboard.

Original

A card with a rainbow foil sheen and glare that follow the pointer, plus a 3D tilt; safe in light mode, with arrow-key and idle-sweep fallbacks.

Hover Interaction Collection

Three concentric progress rings that fill on mount, with a legend of values and a Replay button.

Kokonut UI

Big outlined type whose gradient stroke draws itself along the glyph contours, then fills in; replays on hover, tap or Enter.

Original

Wraps any content in a crackling electric arc that runs around its rounded edge.

Original

A slow gradient of drifting brand-colour fields with film grain over it; pure CSS, so it costs almost nothing.

Original

A dotted 2D-canvas globe with a hand-made land mask and animated arcs with travelling pulses between cities; drag to spin with inertia, arrow keys rotate.

Original

A compact pill that places a call: ringing pulses, a live timer once connected, mute and hang-up buttons, then an ended summary.

Original

A cloud of toggle chips that slip out of the pointer's way and spring back, while staying plain accessible toggle buttons.

Original

A layered landscape whose layers shift by depth with the pointer; arrow keys nudge it and touch screens get a slow drift.

Hover Interaction Collection

A small isometric terrain of bars (like a contribution grid) that you drag sideways or arrow-key to rotate, with a tooltip on hover and focus.

Kokonut UI

A HUD-style readout with corner brackets, status lamp, scan bar and ruler around monospaced text that decodes out of noise and glitches briefly each pass.

Original

Electric arcs and sparks crackle around the outline of a mark; supply your own SVG path or SVG children (a neutral gem mark is the default).

Original

A line grid that bends away from the pointer and springs back; taps send ripples through it and a slow swell keeps it alive when idle.

Original

A CSS 3D phone mock-up that follows or is dragged by the pointer, with a screen slot, drawn default app UI, side buttons and a glass reflection; arrow keys rotate, Home resets.

Original

A send button whose paper plane takes off with a trail while work runs, then lands as a check; async-aware and announced to screen readers.

Original

A custom listbox select whose highlight glides between options; full keyboard support, type-ahead and form-field output.

Original

Small shapes orbit a badge on two rings and smoothly speed up on hover, focus or tap.

Hover Interaction Collection

A circle or tank gauge filled with two animated waves at the value; drag sideways to slosh the liquid.

Kokonut UI

Text that types itself, rests, deletes and moves to the next phrase, with a blinking caret you can style as bar, block or underscore.

Original

Gooey blobs drift on looping paths and fuse where they meet, with a lit rim; the pointer carries an extra blob.

Original

A tilted wall of tiles whose rows slide in alternating directions; a slow marquee runs by itself and the pointer shoves the rows sideways.

Original

A raw WebGL spinning torus with hand-built mesh and matrices, Blinn-Phong shading and a moving light in theme colours; drag to rotate, wheel or keys to zoom.

Original

A press-and-hold confirm button with a burning fuse; releasing early snuffs it out, with a press-twice fallback for reduced motion and assistive tech.

Original

A star rating that previews the score on hover or focus, lifting neighbouring stars and naming the rating before you commit.

Original

A plain, accessible slide carousel with previous/next buttons, pagination, arrow/Home/End keys, swipe or drag, optional autoplay that pauses on hover and focus, and one to four slides per view.

Original

A sentence with one rotating word slot that swaps words by slide, blur or roll while the slot glides to each word's width; pauses on hover, focus or a button.

Original

Soft tapered ribbons that trail the pointer on springs, or swim on looping paths when idle or on touch.

Original

A measuring grid with crosshair marks that a slanted scan line sweeps across, lighting cells that fade out behind it; the pointer lights nearby cells.

Original

Pointer-reactive laser beams in a WebGL shader with three layouts: a fan from the floor, a vanishing-point grid and a prism that splits one beam into a spectrum.

Original

A radio group whose chosen dot squashes and wobbles like jelly; native radios keep arrow keys, forms and screen readers working.

Original

A segmented control whose highlight stretches like a rubber band: the leading edge overshoots and the trailing edge follows.

Original

Cards on a wheel of which only the top arc shows; the chosen card sits at the top, larger and brighter.

Original

Letters squash, thicken and warm toward the primary colour under a press that follows the pointer and deepens while held.

Original

A headline whose letters float up into place with overshoot, tilt and stagger, scrubbed by scroll position.

Original

A star-warp of streaks flying out of a vanishing point; the pointer steers it and press-and-hold boosts to hyperspeed.

Original

A ray-marched metallic liquid blob of smoothly merging spheres with a reflective sky; the pointer drags a lobe around.

Original

A sheet of paper that crumples into a ball when discarded and smooths out again on restore.

Original

A number field whose label is a drag handle: scrub sideways to change the value with a ruler, or type, or use the arrow keys.

Original

A 3D cylinder of picture panels that turns slowly by itself; drag to spin with inertia and settle on a panel; pauses on hover and focus.

Original

A sentence where one word is sharp inside a bracketed focus frame that glides between words while the others blur.

Original

A passage that comes into focus word by word as you scroll: dim and blurred, then a brand-coloured reading head, then ink, with a progress rail.

Original

An oil-slick thin-film surface drawn by a fragment shader, pulled toward the brand colours, with a soft sheen; the pointer presses a dent into it.

Original

A curved-glass CRT shader (barrel curvature, scanlines, aperture mask, bloom, flicker) showing a terminal, a test pattern, static or an arcade title screen chosen by the screen prop.

Original

A paper shredder: the document feeds into the slot and drops out as loose strips; one button shreds, then restores.

Original

A tank gauge (vertical slider) whose liquid sloshes when the level changes; drag it, use the arrow keys or drive it from props.

Original

A deck of cards in 3D: the front card is sharp, the ones behind step back, shrink and soften; swipe, click a card behind or use the buttons and keys.

Original

Each letter blends from a light sans to a heavy italic serif by its distance to the pointer, without reflowing the line.

Original

Rows of big type that drift at a calm pace and surge, skew and reverse with scroll speed and direction.

Original

A field of monospace characters that keep flipping to new glyphs and blending between ink and brand colours, with occasional row tears.

Original

A dotted globe of nodes and arcs with FBM atmosphere glow; drag to spin with inertia, arrow keys rotate, pulses travel along the arcs.

Original

A slide-to-confirm track: drag the handle across to commit, release early and it springs back; Enter or Space works from the keyboard.

Original

A native checkbox whose box squashes, springs the tick in with an overshoot and sends out a ring; supports an indeterminate dash.

Original

Pictures on the inside of a dome: look around by dragging (with inertia), move tile to tile with the arrow keys, click a tile to bring it to the centre.

Original

Text on a rippling baseline with a fisheye lens that swells, spreads and tilts the letters around the pointer.

Original

Comet streaks of light fall in three depths, land on a glowing horizon and ripple out; the pointer leans the fall sideways.

Original

A procedural mossy forest glade with layered trunks, light shafts, a moss-capped root arch, swaying ferns and drifting pollen; the variant prop turns it into spring blossoms, autumn leaves or winter snow, and the pointer shifts the layers for parallax.

Original

A button you pull back like a slingshot and release: it stretches, springs back and flings a spark the other way; click, Enter and Space fire a short sling.

Original

A list row that slides left to reveal action buttons, a long swipe commits the last action; ArrowLeft/ArrowRight/Delete and tabbable buttons give keyboard equivalents.

Original

A tilted wall of tiles whose columns drift up and down endlessly at different speeds; stops on hover and focus, has a pause button, still under reduced motion.

Original

Concentric rings of letters whirl around a centre; the pointer pulls letters in and a click sends a shockwave through the rings.

Original

Branching lightning bolts strike by themselves, flicker and flash the sky; click or tap calls a strike at that point.

Original

A procedural night scene of a tiered pagoda and hall on a mountain under a moon, with layered ridges, drifting mist, rain, flickering lantern glow and ripples on wet ground (invented, generic forms).

Original

A pill toggle for voice input: the mic swells into a live level meter with a running timer, and start and stop are announced.

Original

A text field with a living underline that ripples while you type, settles flat when you pause and fills as the character budget is used.

Original

A row of picture panels where one is open and captioned and the others are slim strips, swapping with flex-grow; stacks vertically in narrow containers.

Original

A wordmark that blooms into related words on gooey liquid bridges; choosing a word makes it the new centre.

Original

Vertical beams of light rise from a glowing floor with a hot core, slow shimmer and drifting embers; the pillar nearest the pointer swells.

Original

A procedural 3-D terrain rendered by a column-marching heightfield renderer, with sunrise, noon, sunset or night skies and clear, rain, storm (lightning), snow or fog weather; the pointer pans and tilts the camera.

Original

A confirm button with a perforated stub: drag it off or press Space on it to confirm, then Reset.

Kokonut UI

A slide-to-confirm control where the moon rises into a sun; drag to the end or use the keyboard (arrows, End or Enter, Home or Escape).

Original

Posters fly out of the distance toward you through a 3D tunnel; the pointer steers, hovering freezes it, speed buttons and keys; holds still under reduced motion.

Original

Five Canvas2D studies of text set along paths: a draggable letter globe, a pointer-lifted cloth, ripples through rows, a bouncing spiral ball and a morphing path.

Original

Soft shafts of light fan down from a source above the top edge, swaying and breathing; the pointer slides the source sideways.

Original

A dusk landscape where invented tower forms (tiered pagoda-like, minaret-like, stupa-like, lighthouse-like and stacked spire) build up from their foot; show one with `variant` or all five as an ensemble, mirrored in water.

Original

A button whose bell icon swings with a damped ring and a badge count when clicked (visual only, no sound).

Kokonut UI

A text field with a slash-command menu (listbox), file drop and attach chips, submitting text, files and command together.

Kokonut UI

Pictures laid along a spiral that winds into the centre and flow outward and grow as they near you, forever; drag, buttons, keys, click to bring one forward.

Original

A heading over a 3D ring of generated print-style tiles (flat, grain, dither, halftone, glitch, noise); it turns by itself, by buttons, keys or drag.

Original

A stack of thin horizontal lines rippling like a ridge of waves in a primary-to-signal gradient; the pointer lifts a bump through them.

Original

A room with a bookshelf whose books stand on a rotating ring: pick one to bring it to the front, then open it and turn its pages with a 3-D flip; covers are generated and keyboard and touch work.

Original

A hanging cord with a handle: drag it down past a threshold and release (or press Enter/Space) to toggle; the cord stretches and swings back.

Kokonut UI

A rotary dial with detents you can drag, flick (it coasts and snaps with a small overshoot), or set with arrow keys and the wheel.

Kokonut UI

Tiles of different heights packed into responsive columns by shortest-column placement, with reveal-on-scroll, hover captions and optional selection.

Original

Four editorial heading treatments in one component: decode from noise, neon sign power-up, particle assembly and an equaliser backdrop.

Original

Concentric rings of dashed arcs, tick marks and orbiting sparks turning in alternating directions around a glowing core, with a pulse; the pointer shifts the depth.

Original

Six particle studies drawn as projected 3-D points in the host ink with accent tints: geodesic dome, horizon field, nested orbits, funnel vortex, data matrix and rising embers; the pointer turns the view.

Original

Five different live-drawn call-to-action buttons (plasma and holographic fragment shaders, ignition embers, a particle constellation, a tactile brushed plate) chosen with `variant`; hover, focus and press drive the animation.

Original

An iOS-style 3D wheel for choosing one value: drag or flick with inertia, mouse wheel, arrow keys and typeahead, snaps to a row.

Kokonut UI

Cards that pile up as you scroll: each sticks near the top while the next slides over it and the covered ones shrink and dim; includes a card navigator.

Original

A field of short lines that all rotate to point at the pointer and glow as they near it; a virtual magnet roams when idle or on touch.

Original

A warp tunnel of additive light streaks with keycap-like letter tiles flying past in perspective; the pointer steers the vanishing point.

Original

Ten distinct CSS-only rectangular call-to-action treatments (glass, gradient border, keycap, dotted border, technical outline, arrow pill, halftone bloom, inset arrow chip, hard-shadow stamp, fill sweep) via `variant`; renders a button or a link.

Original

A real switch (role=switch) in four takes: a metal knob in a recessed slot with an LED, a tilting rocker paddle, a flat pill and a flat segmented control.

Original

A row of frosted-glass icon tiles on tilted colour cards; hover or focus fans the card out and shows the label.

Original

Fine vertical slats that tilt and shade toward a light following the pointer, with a glint on the lit edge; a light sweeps across when idle or on touch.

Original

A hanging cloth simulated with Verlet physics and wind, woven from procedural threads (plain, twill or basket) and printed with text; the pointer dents and drags the weave.

Original

Circular icon controls (play/pause, plus, mail with a send animation) in three treatments: glass, dotted ring and tactile dome.

Original

A name badge hanging on a strap with verlet rope physics; drag the badge to swing it or push it with the arrow keys.

Original

A repeating pattern of dots, diamonds or crosses bent and resized by travelling waves; the pointer sends a ripple through it.

Original

A WebGL liquid-chrome button in pill and orb shapes: a bevelled reflective rim with edge dispersion, a flowing dark face, hover bloom and a click ripple, with a CSS chrome fallback.

Original

A bento grid of cards with a pointer spotlight that lights card borders as it passes and a gentle tilt on the hovered card.

Original

Square pixels blast outward in ragged rings with glowing debris behind the front, on a timer and on every click or tap.

Original

A diagnostics card with three Canvas 2D illustrations (stacked layer planes, a node cube, a rippling mesh) chosen with an accessible tab list.

Original

A pile of cards: drag, flick or click the top card to send it to the back; arrows and buttons do the same.

Original

Square pixel flakes fall in three depth layers over a dusk gradient and settle into a stair-stepped drift; the pointer pushes them aside.

Original

A rotating wireframe cube, three crossing cylinders or a latitude/longitude sphere drawn on a canvas with depth-faded lines; drag to spin, arrow keys nudge.

Original

A composable playing card (rank, suit, face-down) and a fanned hand you thumb through with hover or arrow keys and play with a click.

Kitchen

A classic plasma field of interfering sine waves on a primary-to-signal colour ramp; the pointer adds a rippling source (WebGL, CSS gradient fallback).

Original

A ticket silhouette with notched sides and a perforated divider; header, body and stub sections, with a subtle pointer parallax.

Kitchen

Eight glowing ribbons of plasma undulate across the width with bright cores and soft halos; the pointer height bends them (WebGL, CSS fallback).

Original

A scalloped postage-stamp frame around any content, with an optional postmark overlay.

Kitchen

A light beam enters a glass prism and leaves as a fan of colour bands from primary to signal; the pointer tilts the incoming beam.

Original

A compact scrollable list whose top and bottom edges fade only while more content lies in that direction.

Kitchen

Rays radiate from the centre with a colour fringe that widens with distance, a pulse ring and a shock ring on each click (WebGL, CSS fallback).

Original

A grid of cards where the clicked card expands into a detail panel with a FLIP shared-element animation; Esc closes and focus returns.

Motion

A radar scope with range rings, a tick bezel and a sweeping beam whose trail lights blips that ping and fade until the next pass.

Original

A card with hover lift, press-down scale (pointer or Space/Enter) and drag with momentum that coasts inside its boundary and settles on a spring.

Motion

A lattice of lines and nodes heaved by ripples that start by themselves, on clicks and taps, and (smaller) as the pointer moves.

Original

A card that turns over to reveal a second face on click, Enter or Space, with an instant swap under reduced motion.

Original

A scan line sweeps down a grid of data cells that flare and burn out behind it; the pointer locks a target bracket onto a cell.

Original

A gently bobbing folder that opens its flap and floats its files up into a fan you can pick from.

Original

A grid of circles, squares, triangles and diamonds that swell, turn and warm in colour near the pointer; an idle hand wanders when there is none.

Original

A frame holding a soft draft picture that snaps into focus as its corner marks tighten and a focus line sweeps through.

Original

Rows of triangles, circles, squares or diamonds riding travelling sine waves, turning with the slope and swelling near the pointer.

Original

A tactile stack of three illustrated fish cards with CSS 3D depth and pointer tilt; drag, tap, buttons or keys bring the next card forward.

Original

Soft shafts of light entering from the left and right edges in the brand colours, breathing and swaying; the left source follows the pointer height.

Original

An editorial profile-card carousel in two layouts, a flat filmstrip and a perspective wave, with invented illustrated characters; drag, wheel, arrows and keyboard, looping.

Original

Soft flowing satin: overlapping translucent ribbons with a sheen band that read as folds of cloth; the pointer gathers them.

Original

A certificate drawn in SVG with a woven guilloche border, rosette watermark and seal, lathe-line paper and set type; the lines draw in once and a sheen follows the pointer.

Original

Three wave bands cut into vertical slabs with thin gaps; slabs near the pointer lift.

Original

Flowing hairline threads that pinch together at two waists and fan out again; they bend away from the pointer.

Original

An animated contour map: a drifting height field traced into iso-lines with marching squares; the pointer raises a hill.

Original

A spider-web of spoke and ring threads on spring joints that the pointer plucks; they ring and settle, with an idle ghost pluck.

Original

A canvas dot grid whose dots are pushed away from the pointer and spring back; a gentle automatic wave on touch, static with reduced motion, paused offscreen.

Hover Interaction Collection

A tree that grows from a seed with SVG branches drawing recursively, leaves and lights blooming, a Season button (spring blossom, summer green, autumn gold with falling leaves, bare winter with snow and glowing lights), sparkles on pointer or tap, and a Regrow button.

Original

A holographic foil frame that shifts with scroll and pointer position around an opaque content surface.

Kitchen

A drifting noise veil quantised through an ordered 8x8 dither into crisp brand-coloured dots, densest on one edge and thinning around the pointer.

Original

A bundle of fine threads that braid and pinch as they flow across the box and part around the pointer.

Original

A cloth-like backdrop of soft folds that the pointer sweeps through or you grab and drag, then springs back; static folds on touch and reduced motion.

Kokonut UI

Particle networks in four styles: drifting linked nodes, a parallax star sky, a springy lattice and orbiting hubs; the pointer pulls or pushes the nodes.

Original

Five generative Canvas 2D scenes selected by variant: a pixel-grid horizon arch, pulses on a signal network, flowing ribbons, a halftone dot matrix and flow-field trails.

Original

Ambient particle fields: a rotating noise-shaped cloud, a resonant plate whose grains settle on nodal lines, and streams converging on a focal portal that follows the pointer.

Original

A luminous credential badge assembled from particles that spring home, scatter from the pointer and shed embers on curl-noise currents.

Original

Four generative fields in one component: rippling water, branching lightning, rising fire and beading condensation on glass.

Original