V
viberdy-dev
/
ui
/
components
Files
Code
Info
Anamorphic Heading
anamorphic-heading
A heading that only reads from the right angle: its letters stand at different depths, scaled so they line up from straight ahead, and the view swings round to square as it scrolls in.
Animated Checkbox
animated-checkbox
A checkbox whose checkmark draws itself in as a real SVG path animation.
Animated Dot Matrix
animated-dot-matrix
A grid of dots that pulses outward in concentric ripples, drawn on canvas.
Animated Mesh Waves
animated-mesh-waves
Layered translucent wave ribbons scrolling at different speeds for a fluid mesh feel.
Animated Stat Grid
animated-stat-grid
A row of stat counters that count up together the moment they scroll into view.
Animated Tabs Indicator
animated-tabs-indicator
A tab row where the active-state highlight slides between tabs instead of popping.
Announcement Badge Hero
announcement-badge-hero
A large pulsing announcement pill anchors the hero above one headline.
Aperture Iris Reveal
aperture-iris-reveal
A photo revealed by a real iris — straight metal blades that part and twist from the centre — while a corner readout clicks down the f-stops from ƒ/22 to ƒ/1.4.
Ascending Shatter Section
ascending-shatter-section
A basalt stone breaks apart as you scroll, and its pieces rise up the beam of one cold lamp, tumbling slowly and thinning into ash. Scroll back and every piece falls home and the stone closes. The pointer loosens the pieces near it; a click sends a ring through the stone.
ASCII Density Nav
ascii-density-nav
A nav whose active link is marked by a band of ASCII density: characters thicken through a ramp under the active link and flow to the next one on a spring, its peak in signal.
ASCII Flow Field
ascii-flow-field
A background of live ASCII: a drifting contour map set glyph by glyph in your mono face, matched to the shape of each cell, that bends round a hill the pointer raises, its upper contours in signal.
ASCII Halftone Canvas
ascii-halftone-canvas
Turns any canvas drawing into live ASCII art, sampled one pixel per glyph.
ASCII Resolve Heading
ascii-resolve-heading
A heading that resolves from ASCII into type: its own letterforms redrawn in shape-matched glyphs step from coarse to fine as it comes into view, then a lens under the pointer shows the glyphs again.
ASCII Wordmark Footer
ascii-wordmark-footer
A footer whose name is set in live ASCII: the wordmark drawn glyph by glyph in signal, printed in cell by cell as the footer rises, crossed by a slow light, and turned to paper under the pointer.
Assemble Reveal
assemble-reveal
A reveal where parts assemble in 3D: each item starts at its own offset and turn deep in perspective and flies home on a spring with a slight overshoot, one after another, as it comes into view.
Asterisk Submit Input
asterisk-submit-input
An email field as a pill, an asterisk that turns one step per keystroke and spins while sending, and a black Submit pill. A real form with validation and an honest status line.
Asterisk Type Headline
asterisk-type-headline
A headline typed out by an asterisk: the caret spins fast while it types, opens an inline pill when it reaches one, then parks in the slot you mark with * (by default just after the last word) and keeps turning slowly.
Async Action Button
async-action-button
A button that survives a real round trip — a minimum pending duration, a width that never twitches, aria-disabled instead of disabled.
Attention Site
attention-site
A whole website made of anomalies, one room per screen: koi in dry air, a shadow that runs to its lamp, a stone the scroll breaks upward, chrome that fuses, steel that pours, plans that lift off the floor and a footer crossed by shark shadows.
Audio Wave Visualizer
audio-wave-visualizer
A bouncing equalizer bar animation for audio/podcast/music UI.
Aura Booking Picker
aura-booking-picker
A booking picker in three quiet steps, treatment, day and time, where the chosen time blooms into a grained halo, and a request that needs your handler before it confirms anything.
Aura Dial
aura-dial
A 40px hexagon of the viewer's own six values (contrast, warmth, light, density, motion, focus) that opens into an instrument: pull a corner and every Ultra asset on the page retunes live.
Aurora Curtain Field
aurora-curtain-field
The kit's aurora on its own, in WebGL: three curtains with bright borders, fraying rays and folds over a field of stars, bowing toward the pointer, for any dark section.
Aurora Drift Text
aurora-drift-text
Display type filled with aurora light: three bands drift through the letters on slow loops, ray threads slide through them, and the brightest band leans toward the pointer when it comes near.
Aurora Flow Nav
aurora-flow-nav
A floating night-glass nav whose active mark is a band of aurora light that takes the colour of the sky above its link and flows to the next one leading edge first.
Aurora Glow Button
aurora-glow-button
A night-glass pill with a sliver of aurora under it, turning on a 60s clock that every button on the page shares, spreading on hover and sending a ring of light out on press.
Aurora Glow Input
aurora-glow-input
A waitlist field that lights like the sky: focus raises a two-hue bloom and lights the rim, every keystroke sends a rose ripple from the caret, and joining sweeps the whole palette once.
Aurora Gradient Field
aurora-gradient-field
Soft, hue-shifting color fields that drift behind a hero like ambient aurora light.
Aurora Horizon Hero
aurora-horizon-hero
A first screen at night under real aurora in WebGL: curtains fold, ray and drift over a sleeping city and bow toward the pointer, and the headline sits on frosted glass tinted by the live sky.
Aurora Ribbon Cursor
aurora-ribbon-cursor
The pointer paints a small aurora: a ribbon of light coloured from the indigo fringe to rose that fades like the sky, sending short rays up from every point so the trail reads as a curtain.
Aurora Rim Card
aurora-rim-card
A night-glass card with a slow aurora rim that turns once every 52 seconds, feathered into light, brightening near the pointer while the card tilts a hair toward it.
Aurora Rise Footer
aurora-rise-footer
A footer where the lights come out as the page ends: scroll raises the aurora from behind the city's roofline, widens it into violet and rose and lights more windows under a large lit wordmark.
Aurora Site
aurora-site
A complete launch site for an overnight AI finance agent in the Aurora register: a flowing aurora nav, a WebGL hero over a sleeping city, window features, pricing that lights the sky and a footer where the lights come out.
Aurora Volume Pricing
aurora-volume-pricing
Usage pricing where the sky answers the number: a log-scale slider rolls the price digit by digit while the aurora behind widens from a dim, cool display to the whole palette and the city lights up.
Aurora Window Features
aurora-window-features
Feature cards as windows onto one sky: a single WebGL canvas draws the aurora only inside each card's window, so a curtain carries on from one window to the next.
Auth Screens
auth-screens-template
Sign in, sign up and reset as one component — layout and mode switching only, with no submit logic.
Avatar Orbit Cluster
avatar-orbit-cluster
A team ring that redistributes at any size, lifting the hovered member out.
Axis Flow Nav
axis-flow-nav
A nav whose links are one flush line: the active link is loud, the rest condensed, and choosing another makes the width flow to it letter by letter while the nav never changes size.
Axis Pass Pricing
axis-pass-pricing
Passes as tickets named in their own registers, quiet to loud: choose a pass, the count or the student rate and every figure that changes rebuilds digit by digit through the accent.
Axis Press Button
axis-press-button
A button whose label is the control: letters under the pointer swell heavier and wider while the rest condense, so the button never changes size, and a press clenches every letter and springs it back.
Axis Scrub Heading
axis-scrub-heading
A heading written by the scroll: as it rises through the view a wave runs through its letters from hairline to a loud accent peak to its set weight, and scrolling back unwrites it.
Axis Session Card
axis-session-card
A programme card whose title is set by what the session is: a workshop quiet and narrow, a talk set, a keynote loud and wide, so a grid reads as a legend; hover pushes it further into its own kind.
Axis Supply — Streetwear Store
axis-supply-store-site
A storefront drawn as an engineering document, with an inverted checkerboard lookbook.
Badge Ping Counter
badge-ping-counter
An icon badge counter that bounces and pings once on every increment.
Bayer Dissolve
bayer-dissolve
An ordered-dither transition: a new state prints in over the old one in 8x8 Bayer order while the screen refines from coarse cells to fine, or prints in from the ground on first view.
Bayer Fill Button
bayer-fill-button
A button whose fill prints in cell by cell through the 8x8 Bayer order on hover and focus, with its label inverting exactly where each cell lands; press it and the screen halves to a finer grid.
Bead Button
bead-button
A single bead of water on dark hydrophobic glass is the button. It magnifies the etched plate behind it and shows it upside down, the way real water does, while the label stays upright and crisp. The pointer's approach leans it, a press flattens it and pinches off a satellite droplet that re-merges, and it never runs away.
Beam Connector
beam-connector
A hairline beam between any two elements, routed with rounded right-angle elbows, that carries a pulse of light once per cycle and lands with a flash at the far end.
Beam Lattice Hero
beam-lattice-hero
A first screen on a lattice of hairline traces where pulses of light run in from the edges and converge on the call to action, the traces light up under the pointer, and the headline is revealed by a scanning light.
Beam Sweep Backdrop
beam-sweep-backdrop
Slow conic light beams rotating behind content, CSS-only and compositor-friendly.
Bearing Flow Field
bearing-flow-field
An ordered crystal of polished steel balls that pours and pools like water across a concrete floor, lit by one low raking lamp. The terraces and ragged edges of the pile are kept on purpose. Drag the pointer through it and it digs a trench that slumps back in; click and a handful of sixty drops.
Bell Breath Loader
bell-breath-loader
A progress loader drawn as one translucent jellyfish. Progress is light: it rises through the bell from the rim, lights the ring of organs and lets the tentacles grow. With no value it breathes on a five second cycle, and at 100 it exhales, lifts 24 px and fades.
Bento Command Nav
bento-command-nav
Site navigation as one row of bento tiles sharing 1px hairlines, with a pointer light that shows through them and menus that open as panels of tiles.
Bento Footer Grid
bento-footer-grid
A bento footer whose tiles are live: a 90-day uptime strip you can read day by day, a back-to-top ring that fills as you scroll, a newsletter that widens across its row as its neighbours reflow, and a wordmark that rises into its crop.
Bento Launch Template
bento-launch-template
A complete launch page from the Bento Box kit: keynote figures, product captures, proof, pricing and a footer set as tiles, broken once by a full-bleed race between two builds.
Bento Preview Hero
bento-preview-hero
Copy beside an asymmetric bento grid of small feature-glimpse tiles.
Bento Pricing Tiles
bento-pricing-tiles
Pricing set as a bento grid: the recommended plan is the one 2x2 tile with the biggest price and the only accent, surrounded by plans, reassurances and a sales tile.
Black Border Form
black-border-form
Neo-brutalist form fields in 3px ink: focus presses a field into its shadow, and errors are stamped on as tilted black tags. The browser's own validation, a posting form and a received stamp.
Blog Post Page
blog-post-template
A long-form article page with real reading progress and a ToC that tracks scroll.
Booking Slot Picker
booking-slot-picker
Pick a day, pick a time, confirm — with honest availability, a real keyboard grid, and a WhatsApp or email request mode for shops with no booking system.
Bounce Light Field
bounce-light-field
A dark room seen from above, lit by a lamp you carry. Every slab throws a real traced shadow, sharp at its base and softening with distance, and light that lands on a slab bounces back in the accent colour. Real-time 2D global illumination by radiance cascades; a press leaves an ember of light behind.
Breath Pacer Ring
breath-pacer-ring
A breathing guide in soft light: a grained halo swells as you breathe in and settles as you breathe out, a thin ring traces each phase and the seconds count down; it starts only when asked.
Breathing Halo Hero
breathing-halo-hero
A first screen in a near-black jade room lit by two soft, grained halos in WebGL: the lead one breathes on a slow cycle and leans toward the pointer with a 900ms settle, and the serif headline warms where the light sits behind it.
Broken Grid Site
broken-grid-site
The whole Broken Grid kit as one studio site on one rule: a drawn-lattice hero, an inverting headline, work and clients that reflow and hand the break on, practices across three layouts, engagements that re-order, and a run-off footer.
Brutal Mega Menu
brutal-mega-menu
A neo-brutalist bar whose menu is a full-screen index that cuts in and out in one frame: huge section rows between 3px rules, a hard inverted selection, links and a feature card beside it.
Capture Loop Card
capture-loop-card
A bento tile whose picture is a tightly cropped loop of your product, still until someone hovers or presses play, with a hairline that tracks the loop.
3D Card Carousel
card-carousel-3d
Cards mounted on a rotating 3D ring — the active one faces forward, others recede.
Card Shuffle Deck
card-shuffle-deck
A reorderable neo-brutalist deck where cards lift onto their shadows, travel in straight lines and land exactly. Drag, shuffle or move with the keyboard; ranks stamp as cards land.
Caustic Light Pool
caustic-light-pool
Water caustics computed from the real focusing condition, so the bright filaments land where the physics puts them.
Changelog Page
changelog-page-template
A changelog with working tag filters and releases that expand in place.
Chapter Progress Nav
chapter-progress-nav
A sticky section nav whose items fill like progress bars as you read — and still reaches the short last section that fixed-line navs never activate.
Chladni Sand Field
chladni-sand-field
Fine sand on a black vibrating plate. The pointer tunes the plate, so the grains shiver loose and crawl into a new symmetric nodal-line figure; a press strikes it and a shock spreads while the figure re-forms. Real standing-wave maths on the GPU, with knobs for complexity, settle, strike and the calm zone behind your copy.
Chromatic Split Hover
chromatic-split-hover
RGB channels of a headline separate toward the pointer and recombine to white.
Chrome Pill Button
chrome-pill-button
A pill of polished chrome that reflects a lit room: its horizon, softbox glint and bezel light turn toward the pointer, and a press squashes it and drops a ring into the surface.
Chrome Pour Reveal
chrome-pour-reveal
A reveal that casts its content in liquid chrome: molten metal pours down over the space with drips racing ahead and merging into the sheet, then cools away from the top behind a hot seam of light.
Chrome Rim Input
chrome-rim-input
An email field in a pill with a chrome rim: each keystroke sends two ripples of light racing round the rim from the caret, a light laps it while sending, and success pours the pill into a round chrome drop with a check.
Chrome Vinyl Preorder
chrome-vinyl-preorder
A vinyl pre-order you can play with: flick the canvas record and it spins with inertia under a sheen that stays with the light, the chrome tonearm swings on when it spins fast, and the pressings sit beside it as a radio group.
Circuit Feature Map
circuit-feature-map
Features as nodes on a hairline circuit around a core chip: traces draw in on scroll, pulses run out of the core to each node, and hovering a node lights its trace, its pin and the core.
Class Timetable Section
class-timetable-section
A week of classes set like a departure board — placed by real start time and length, one accent stripe behind today, filters that dim rather than delete, and a day rail on phones.
Colourway Product Card
colourway-product-card
One photograph, every colourway: the shot is greyscaled and multiplied into the chosen colour, so a small label with six colours and one product photo gets six product photos.
Command Palette
command-palette
A Cmd+K style searchable command menu with a filtered live list.
Concern Finder Section
concern-finder-section
A three-question treatment finder: pick a concern, sensitivity and downtime, and the treatments that fit rise into the light, each as bright as its fit, gliding to new ranks as answers change.
Concrete Wall Texture
concrete-wall-texture
A seamless procedural concrete surface drawn once to canvas and blended over anything.
Confetti Burst Button
confetti-button
A button that scatters a quick burst of confetti particles on click.
Contrary Shadow Section
contrary-shadow-section
Mounted letters on a lit plaster wall under a swinging lamp: every word's shadow runs from the light, except one, whose shadow runs toward it.
Contrast Safe Swatch
contrast-safe-swatch
Picks a readable foreground from real relative luminance, and reports all three WCAG thresholds instead of one badge.
Copy Code Snippet
copy-code-snippet
A dark code block with a one-click copy button that confirms itself.
CRT Scanline Overlay
crt-scanline-overlay
Scanlines, aperture grille, rolling refresh and vignette over any content.
Crosshair Cursor Readout
cursor-crosshair-readout
A drafting-tool crosshair with live X/Y coordinates that trails the pointer.
Cursor Label Follower
cursor-label-follower
A contextual chip that trails the pointer and names whatever it is over.
Cursor Lens Magnifier
cursor-lens-magnifier
A glass lens that follows the pointer and magnifies the live DOM beneath it.
Cursor Mask Reveal
cursor-mask-reveal
The pointer cuts a soft hole through one layer to expose a different one beneath.
Snapping Cursor
cursor-snap-target
A cursor dot that latches onto interactive elements and takes their exact shape.
Curtain Footer Section
curtain-footer-section
The page ends, lifts, and the footer is already there underneath: a sticky footer revealed by the last section sliding over it, with the wordmark cropped by the bottom edge. No JavaScript in the reveal.
Curved Rail Nav
curved-rail-nav
A nav whose links ride a shallow cylinder in real perspective: the active link stands forward and underlit in copper, and choosing another turns the rail toward it on a spring.
Dark Precision Site
dark-precision-site
A complete launch site for a developer platform in the Linear/Vercel register: a nav that morphs into a command palette, a hero on a routing lattice of light, a trace console, beams that deliver, a circuit of features, pricing lit by a usage slider, a WebGL light-cone call to action and a horizon-lit footer.
Dashboard Shell
dashboard-shell-template
A dashboard shell with a collapsible rail and real routing between views.
Sortable Data Table
data-table-sortable
A searchable table with three-state column sorting and a real loading skeleton.
Date Range Picker
date-range-picker
A click-twice range calendar with a live hover preview and quick presets.
Dawn Scrub Hero
dawn-scrub-hero
A first screen that is night until you scroll it into morning: the hero pins and the scroll is the dawn, bound with no easing, as a live-rendered room goes from dark to paper white and the lamp from ember to daylight.
Dawn Timeline Section
dawn-timeline-section
The sunrise laid out on a timeline and scrubbed by the scroll: the section pins, 05:30 to 07:00 runs with the scroll, the lamp rendered live rises along its curve, and the time, colour, output and phase follow.
Density Ledger
density-ledger
A list you zoom like a map: pinch, ctrl+scroll, a ruler or [ and ] move rows continuously from 64px to 22px, columns arrive at thresholds, and the row under your pointer stays put.
Deploy Log Input
deploy-log-input
An email field that answers with a streaming log: on submit, short lines stream under it with spinners turning into checks while a beam of light runs along its top edge, and the last line waits for your handler.
Depth Card Carousel
depth-card-carousel
A carousel whose side cards recede in scale, blur and rotation from one offset value.
Detent Dial Input
detent-dial-input
A number set by turning a CSS-3D dial: drag round it and it steps through detents, springing onto each while its copper marker ticks; a real slider with full keyboard control that submits in a form.
Diffused Glow Site
diffused-glow-site
A complete site for a modern skin clinic and day spa: a concern-organised nav, a jade room lit by breathing WebGL halos, a treatment finder, treatment cards with light wells, lit-room memberships, a breathing ritual, a booking picker and a footer at dusk.
Displacement Smear Type
displacement-smear-type
A headline that smears along the pointer's direction of travel with a real accumulation blur.
Dither & ASCII Site
dither-ascii-site
The whole Dither & ASCII kit as one site for an image pipeline: a density nav, a live dithered hero with a transform loupe, an ASCII field, a transform comparison, printing cards, a drop-to-dither form, noise-fill pricing and an ASCII wordmark footer.
Dither Develop Card
dither-develop-card
A card whose image prints in cell by cell the first time it is seen, ordered-dithered with CSS alone, with a soft light that follows the pointer through the dither.
Dither Drop Input
dither-drop-input
Drop an image and see it dithered right there, with CSS alone: choose the cell size and the ink, set the exposure, and the request URL for that output builds as you go; submitting copies it.
Documentation Page
docs-page-template
A docs shell where the sidebar routes, search filters the tree and the ToC tracks the article.
Drag Inertia Carousel
drag-inertia-carousel
A rail you can throw — it projects the momentum and settles on the nearest slide.
Draggable Bottom Sheet Modal
draggable-bottom-sheet
A modal sheet you can drag down to dismiss, with a distance + velocity threshold.
Draggable Sortable List
draggable-sortable-list
A drag-handle-driven list that reorders with a smooth layout swap.
Dry Caustic Room
dry-caustic-room
A high-key white gallery room, seen into one corner. Rippling water light plays down both walls and across the glossy floor, with soft prismatic fringes, and there is no water anywhere. Touch the pointer to the unseen surface and slow rings spread; the caustics bend around them.
Duotone Plate Hero
duotone-plate-hero
A real two-colour separation via SVG filters — with the sRGB interpolation flag that everyone leaves out.
Dusk Set Footer
dusk-set-footer
A footer that sets like the sun: as it scrolls in, a grained halo sinks toward a hairline horizon, warming from gold through rose to ember, behind a giant italic serif wordmark.
Edge Invert Headline
edge-invert-headline
A caps headline that inverts exactly at the edges of the plates under it; drag a plate and the inversion follows 1:1, then snaps to a lattice cell, and on column 3, 6 or 9 the plate breaks by the rule.
Edge Sliver Poster Hero
edge-sliver-poster-hero
A saturated poster hero whose photographic sliver opens on hover, with live ticket tiers and a countdown.
Elastic Overscroll List
elastic-overscroll-list
Rubber-band overscroll with the real asymptotic curve, engaged only at the boundary.
Elastic Underline Nav
elastic-underline-nav
A nav underline that stretches with the distance it travels and settles back to width.
Ember Rest Footer
ember-rest-footer
A footer where the day ends: as it rises into view the room above the links, rendered live, loses its daylight, the lamp dims to an ember, and the whole footer goes from paper to night under a closing line.
Entry Edge Fill Button
entry-edge-fill-button
A fill that wipes in from the edge your pointer crossed and leaves by the one you exit — the label inverts letter by letter as the edge passes through it.
Expandable Search Bar
expandable-search-bar
A search icon that smoothly expands into a full text input on click.
Exploded View Section
exploded-view-section
The product taken apart live in WebGL2: its parts separate on a spring and each carries a callout pinned to it by a leader line re-projected from the 3D scene every frame, so labels stay on their part as it turns.
Extruded Spec Card
extruded-spec-card
A card holding a small machined dial built in CSS 3D: the card tilts toward the pointer and the dial turns to follow it one detent at a time, its copper marker lit, over a data-plate of specs.
Extruded Type Tilt
extruded-type-tilt
Display type with a solid extrusion that swings around as the pointer moves.
Fee Squeeze Pricing
fee-squeeze-pricing
Pricing as what you'd pay each month: drag your sales on a slider with a squashy thumb, and every plan's fee springs to its new height as a soft column that stretches thin in flight and squashes as it lands; the cheapest turns bubblegum.
Ferrofluid Spike Field
ferrofluid-spike-field
A black magnetic liquid seen across its surface, with a magnet under it that follows the pointer. The liquid heaves into a mound and erupts into a hexagonal bed of needle spikes that lean toward the magnet and sink back in its wake; a press surges it and sends a ring of spikes across the pool.
File Tree Explorer
file-tree-explorer
A recursive, collapsible file tree with real roving-tabindex arrow-key navigation.
File Upload Dropzone
file-upload-dropzone
A real drag-and-drop file zone with a live dragover state and file chips.
Filmstrip Silhouette Hero
filmstrip-silhouette-hero
A saturated field with a multiply-blended silhouette and a thumbnail strip that drives it.
Final Call Section
final-call-section
The closing spread of a trade site: an oversized two-tier ask cropped by the edge, a two-field enquiry line with one filled button, and a ledger of the four things customers ring to check.
Find Us Map Section
find-us-map-section
A street map printed in the shop's colour, the address set large, a live "Open until 18:00" readout in the shop's own time, the week's hours, nearby stations and one-tap directions — no API key.
Finish Tier Pricing
finish-tier-pricing
Pricing where each tier is a material shown on the product itself: the dial stands on a mirror floor in the chosen finish, changes material when you pick another tier, hops and clicks its ring round.
Fit Light Pricing
fit-light-pricing
Pricing driven by a usage slider on a log scale: every price rolls to its new digits as you drag, and a light moves to the plan that costs least at that volume, its arc growing as usage nears the next plan.
3D Flip Card
flip-card
A card that flips on a real Y-axis rotation to reveal a back face.
FLIP Grid Reorder
flip-grid-reorder
A filterable grid whose tiles travel to their new positions instead of snapping.
Flip Reveal Tiles
flip-reveal-tiles
A tile grid that flips on a diagonal wavefront to resolve into one image.
Floating Label Input
floating-label-input
A text input whose label floats from placeholder position into a caption on focus.
Flow Field Drift
flow-field-drift
Particles carried through a divergence-free curl-noise field, so the frame never drains into a few basins.
Flush Lineup Poster
flush-lineup-poster
A line-up set as a type poster: every name flush across the measure at one cap height, pointing clenches a name into the accent, choosing opens it, and day filters collapse the rest to hairlines.
Flush Pressure Hero
flush-pressure-hero
A first screen set as a type poster: the name in flush lines at one cap height, and the pointer presses weight, width and contrast into the letters near it while the rest condense so every line stays flush.
Flush Wordmark Footer
flush-wordmark-footer
A footer that ends the page in the face: a band of the glyph wave field carries a closing line, and the name stands flush across the width, rising from hairlines to full weight as the footer comes into view.
Form Error Summary
form-error-summary
The error pattern that actually works with a screen reader: focus the summary, link to the fields, punish late.
Fractal Noise Drift
fractal-noise-drift
GPU fractal noise drifting through a gradient light field, with no JS loop.
Fuzzy Match Input
fuzzy-match-input
Subsequence search that scores by run length and word starts, and highlights the hits.
Gift Voucher Composer
gift-voucher-composer
Pick an amount, write a line, and the voucher is on the table as you type — a perforated bond-paper ticket with the amount cropped by its own edge and a serial that never changes under you.
Glare Tilt Card
glare-tilt-card
A card that tilts toward the pointer with a true angular specular sweep.
Glass App Template
glass-app-template
A complete liquid-glass product page for a calendar app, where every glass surface shares one tint that adapts to the section under the nav as you scroll.
Glass Bento Wall
glass-bento-wall
A feature grid cut from one sheet of liquid glass: each tile is as thick as it is big, and one pointer light moves across every rim.
Glass Etch Text
glass-etch-text
Real, selectable heading text rendered as glass: a lit bevel, a graduated rim and a hairline colour fringe, raised or etched in.
Glass Focus Field
glass-focus-field
A liquid-glass input whose rim notices the pointer before focus, thickens outward from where you click, ripples from the caret with every keystroke and clouds its frost on an error.
Glass Morph Popover
glass-morph-popover
A popover that grows out of its button as a drop of liquid glass, stretches toward its place and settles flat, then drains back the same way.
Glass Pricing Tiers
glass-pricing-tiers
A pricing section where each plan is a thicker pane of glass than the last, and the plan you choose puts a lens over its price.
Glass Refraction Panel
glass-refraction-panel
A card of liquid glass: it bends its backdrop at the rim, with a graduated edge and a light that follows the pointer.
Glass Tint Footer
glass-tint-footer
A liquid-glass footer slab that rises over the section above as you scroll in, its meniscus edge sloshing on fast scrolls, with a pointer light, a droplet gliding between links and frost re-tinted to that section.
Glitch Text Hover
glitch-text-hover
An RGB-split, jittery glitch effect on text when you hover it.
Glyph Axis Stagger
glyph-axis-stagger
The kit's rebuild as a primitive: split any text into letters and spring each one between two settings of the face, a fixed delay apart, in the order you choose, on view, on hover or on command.
Glyph Wave Field
glyph-wave-field
A field of letters on canvas that behaves like water: drag the pointer and a wake of weight follows, tap and rings travel out, crests swelling to 900 in the accent and troughs thinning to hairlines.
Animated Gradient Border Beam
gradient-border-beam
A light beam that continuously travels around a card's border.
Grain Overlay
grain-overlay
A subtle animated film-grain texture layered over any section via canvas.
Gummy Pile Footer
gummy-pile-footer
A dark footer whose huge wordmark is a pile of gummy letters with weight: grab one and throw it, and it tumbles, bounces off the walls and the other letters, squashes where it lands and settles into a pile.
Gummy Type Input
gummy-type-input
An email field whose letters drop in and land: each typed letter falls from a little above, stretched as it falls and squashed as it lands, while the real input underneath keeps the caret, selection and autofill.
Hairline Morph Nav
hairline-morph-nav
A nav whose single hairline stretches toward the next link and settles under it: its leading edge runs ahead on a quick spring while its trailing edge follows on a slower one, and the active label steps up a weight without shifting.
Hairline Tile Button
hairline-tile-button
A button that behaves like a live bento grid: on hover it re-tiles into compartments along lit hairline seams, compresses toward your press, and its keycaps are a real keyboard shortcut.
Halftone Depth Field
halftone-depth-field
A rotated print screen that swells into a pool of light under the pointer, with the gamma actually done right.
Halo Concern Nav
halo-concern-nav
A floating nav in warm day glass whose Treatments menu opens by skin concern: a soft halo glides behind the concern you point at or arrow to, and its treatments resolve out of a blur beside it.
Halo Mesh Field
halo-mesh-field
A quiet WebGL field for the body of a page: two grained pools of colour drift across warm bone like light through tinted glass, and a warm lamp gathers under the pointer where you rest.
Halo Treatment Card
halo-treatment-card
A treatment card with a light well: a grained halo in the treatment's own colour rests low, then rises and blooms toward the pointer on hover or focus while the card lifts on a feathered shadow.
Hanging Label Input
hanging-label-input
A contact form whose numbered labels hang one gutter off the lattice and step into line in 160ms when you use the field; the third row breaks by the rule, and it only claims to send when it has a handler.
Hanging Quote Section
hanging-quote-section
A pull quote with the opening mark optically aligned — measured from the real glyph, not a guessed em value.
Headline Switch Hero
headline-switch-hero
The second line of the headline is the navigation: KITCHENS / BATHROOMS / LOFTS at headline size, and choosing one swaps the treated photo plate, the copy and the price.
Hide On Scroll Navbar
hide-on-scroll-navbar
A navbar that slides away on scroll-down and reappears on scroll-up.
Hold To Commit Button
hold-to-commit-button
A destructive action that requires sustained pressure, with a ring that fills on an ease-in curve.
Holo Cascade Hero
holo-cascade-hero
A scroll-driven hero in three acts: five iridescent glass cards fly in and land as a neat pile, scrolling opens the pile into a flip-book fan that leans back in real 3D, and scrolling on flies the camera into the fan while the headline lifts away. Every picture on the cards is ray-marched glass, painted in code.
Holo Foil Field
holo-foil-field
A full-bleed sheet of holographic chrome in WebGL: long draped folds reflect the kit's studio, every seam the horizon draws splits into a spectrum, and a thin film tints only the lit metal; tilting it with the pointer sweeps the colour.
Holo Gloss Site
holo-gloss-site
The complete Holo Gloss landing, told by the scroll: cards that open from a pile into a fan and are flown into, a dark room where the app slides through its cards, a bento whose tiles trade height, a word that pulls out of its own letter into the plans, a sign-up and a real footer. Branded viberdy; every word is a prop.
Holo Pill Nav
holo-pill-nav
A quiet header: the mark and wordmark left, one outlined glass pill right that fills from below on hover while an asterisk turns in beside the label. A tone prop flips it for dark sections.
Holo Plan Cards
holo-plan-cards
Three glass plan cards with holo faces, dealt out of a pile into a row as the section scrolls into view, the featured one ringed in cobalt and lifted. Each card is a real offer: price, cadence, four lines and one link.
Holo Ribbon Capture
holo-ribbon-capture
An email sign-up where two capsules of holo glass slide in from opposite edges, two cards drop from above and hang there swaying, and the form sits under the long ribbon with an asterisk that turns as you type, a Submit pill that darkens once there is something to send, and a line saying what the address is for.
Holo Site Footer
holo-site-footer
The close of a landing: a last call set big with a holo pill between its words and two buttons, then a footer with the mark, a one-line promise, three columns of real links and the copyright with a way back up.
Holo Ticket Card
holo-ticket-card
A tour date as a notched, perforated ticket whose stub carries the date in chrome numerals on a strip of holographic foil; it tilts toward the pointer while the foil's colour slides and a glare follows.
Horizon Light Footer
horizon-light-footer
A footer whose giant wordmark is lit from below by a horizon that is also a signal: a latency trace lit where the pointer is, with a request pulse that runs it every few seconds and lights the letters as it passes.
Hours Poster Section
hours-poster-section
Opening hours set as a poster — days hanging off the edge, closed rows struck through, today banded in the one accent — with an open/closed line on the shop's clock.
Expanding Panel Row
hover-expand-panels
A row of panels where the hovered one grows and its neighbours compress.
Link Peek Preview
hover-link-peek
An index list that floats a velocity-tilted preview card beside the pointer.
Hover Reveal Text Gallery
hover-reveal-text-gallery
A list of text rows, each hiding a photograph that wipes open under the cursor and follows it.
Slice Shear Hover
hover-slice-shear
Display type cut into horizontal bands that fan apart under the pointer.
Stroke Draw Button
hover-stroke-draw-button
A button whose outline draws itself around the shape on hover, at any size.
Image Comparison Slider
image-comparison-slider
A draggable before/after divider that reveals one image over another.
Index Overlay Menu
index-overlay-menu
A full-screen menu set like a printed index — numbered entries in heavy type, and a treated photo plate that wipes in the direction you travel.
Index Step Nav
index-step-nav
A numbered nav whose third item hangs one gutter below the bar on a contrasting plate by the rule, the bar's hairline dipping under it, and a tag that steps to the current item, or the one you point at, in four ticks.
Infinite Drag Canvas
infinite-drag-canvas
An endlessly pannable board that recycles a fixed set of tiles via modulo wrapping.
Infinite List Sentinel
infinite-list-sentinel
Sentinel-based pagination with the stall fixed — the bug where a short page leaves the sentinel on screen and loading stops.
Ink Aura Field
ink-aura-field
Dark water holding two inks: the pointer paints a pale ink through it as it passes, and a press drops cobalt that lands, blooms outward in a ring and curls into the first. A real GPU fluid with knobs for how far the ink travels, how much it ripples and how long it lingers.
Ink Bleed Reveal
ink-bleed-reveal
A photograph that arrives the way ink wicks into paper — an organic front spreading from a point, with a wet tide-line of ink running just ahead of it.
Ink Fluid Field
ink-fluid-field
A real Navier–Stokes fluid simulation on the GPU: your pointer drags luminous ink through dark water, and slow currents keep it alive when nobody is touching it.
Inline Editable Grid
inline-editable-grid
A keyboard-driven spreadsheet grid with roving-cell navigation and Excel-style Enter/Tab commits.
Intent Safe Menu
intent-safe-menu
A mega-menu that reads where the pointer is heading, so cutting the corner never steals the submenu.
Iridescent Foil Sweep
iridescent-foil-sweep
Hot-foil type that shifts colour under the pointer — Newton's series rather than a rainbow, translated rather than rotated.
Jelly Letter Hero
jelly-letter-hero
A first screen whose oversized headline is made of soft bodies: move through the letters and they dent, press one and it squashes with its area kept, drag it and it stretches after you, let go and it wobbles home.
Kanban Drag Columns
kanban-drag-columns
A mini kanban board where cards drag both within and across columns.
Keycap Button
keycap-button
A button machined like a keycap: a press drops the cap 6px as its skirt collapses, release springs it back past rest, a specular follows the pointer and a copper status light glows while it's held.
Keylight Field
keylight-field
A live studio sweep lit by one soft key light, and the light is the theme control: drag it for warmth and exposure, and every Ultra asset on the page retunes while text stays legible.
Keynote Bento Hero
keynote-bento-hero
A launch hero set like a keynote recap slide: one huge figure in a 2x2 tile, and a bento grid that assembles around it as the numbers count up.
Kinetic Stat Board
kinetic-stat-board
Metrics, deltas and sparklines that all count in together from one shared loop.
Kinetic Type Site
kinetic-type-site
The whole Kinetic Type kit as one festival site: a flush nav, a pressure poster hero, a glyph wave field, a scrolled manifesto, the programme, a flush line-up, rebuilding passes, a name badge and a rising footer.
Knockout Type Plate
knockout-type-plate
A headline that inverts the photograph beneath it, with a scrim that keeps it legible.
Lathe Story Scroll
lathe-story-scroll
A five-chapter scroll story that turns a single drawn line into a three-dimensional object: revolved, glazed, exploded into named parts and reassembled, with no three.js.
LED Room Chrome Field
led-room-chrome-field
A dozen drops of liquid metal hang in front of the page, and the page is a window. In the LED room, a white box lit by one strip of coloured light, moving the pointer shifts the walls like a real recess and two drops neck, fuse and part. Switch the material between pale iridescent chrome and dark mercury, and the backdrop between the room, a smooth colour gradient and a seamless dusk horizon. One hue control tints the strip, the room and the horizon.
Lenticular Print Shift
lenticular-print-shift
Two photographs interleaved in hard-edged strips that wipe between each other as the pointer crosses the plate.
Letterpress Light Type
letterpress-light-type
Type debossed into paper and lit by a real lighting model — the lamp follows your pointer, so every wall of every letter catches and loses the light.
Levitating Field Input
levitating-field-input
A real text input whose typed words hang above the field and cast a soft shadow on its lit shelf; focus lifts them higher and submitting lands them.
Levitating Link Nav
levitating-link-nav
A dark glass nav bar whose link labels hang in the air above a lit shelf, each over its own soft shadow; the link you point at, and the one for the section in view, lands.
Levitating Plan Cards
levitating-plan-cards
Three plan slabs that lift off a lit floor as the section arrives, each over its own soft shadow; the featured one rises highest and the pointer raises any slab higher.
Levitating School Hero
levitating-school-hero
A school of butterfly koi hangs in the dry air of a concrete room, inside one shaft of light. The water they belong to is held in the ceiling. The light draws caustics on the floor, and every fish casts its shadow through the beam. Rest the pointer and they come to look; click and they scatter.
Light Lift Card
light-lift-card
A card that lifts toward the pointer with shadows that behave like light: a two-degree tilt, an ambient shadow that widens and drifts away from the side that rose, a contact line that thins, and a plate of light at a colour temperature.
Line Mask Reveal
line-mask-reveal
Reveals text one line at a time, each sliding up from behind its own clipping mask.
Liquid Blob Cursor Follow
liquid-blob-cursor
A soft blurred blob that trails the cursor with spring-smoothed lag.
Liquid Chrome Site
liquid-chrome-site
A complete album and tour drop for a recording artist in molten chrome: a mercury nav, a WebGL chrome title on a mirror floor, a pour-to-play tracklist, a holographic foil statement, tour tickets cast in chrome, a spinnable vinyl pre-order, a rippling pre-save field and a pool footer.
Liquid Glass Button
liquid-glass-button
A pill of liquid glass that bends what is behind it: real refraction at the rim, a rim and sheen lit by your pointer, and a gel-like press.
Liquid Glass Switch
liquid-glass-switch
A toggle whose knob swells into a clear glass lens while you hold or drag it, magnifying the track beneath, then springs home solid.
Liquid Glass Tab Bar
liquid-glass-tab-bar
A floating glass tab bar whose selection is a droplet: press and drag and it swells, stretches as it travels, magnifies the tabs beneath and lands on the nearest one.
Liquid Lens Hero
liquid-lens-hero
A slab of liquid glass you drag across a vivid scene: the headline bends under its rim, colours split at the edge, and it wobbles like gel. Two WebGL passes, no libraries.
Liquid Metal Field
liquid-metal-field
Gooey metaball blobs that fuse and split as they drift, with a specular sheen.
Liquid Wallpaper Field
liquid-wallpaper-field
A slow WebGL wallpaper of folded silk layers on a seamless 60-second loop: vivid, calm, and sharp-edged enough for glass to bend.
Lit Dot Matrix Field
lit-dot-matrix-field
A WebGL dot matrix under one volumetric light cone that leans toward the pointer: dots inside the light rise in brightness and size and take on the accent.
Lit Rooms Membership
lit-rooms-membership
Memberships as three rooms along a corridor, each with its own grained lamp: point at one and its light rises while the others dim, and the billing switch resolves every price out of a blur.
Live Hours Nav
live-hours-nav
A small-business header that says whether the shop is open right now — computed in the shop's timezone, with overnight hours and split shifts handled.
Living Bento Grid
living-bento-grid
A dark bento feature grid that is a live system: tiles update on their own, catch a pointer light, reorder by drag or keyboard, and grow into a detail panel.
Logo Proof Hero
logo-proof-hero
A generous wordmark wall leads the hero, with a modest headline above it.
Lone Medusa Section
lone-medusa-section
One large jellyfish, centred low in a black void, lit only from inside. The bell is dark transparent glass with gonads, canals and frilled oral arms burning through it. Touch a tentacle and light runs up it to the bell; click and it jets upward and sinks back.
Magnetic Button
magnetic-button
A button whose label leans toward the cursor with a springy pull.
Magnetic Nav Dock
magnetic-nav-dock
A macOS-style dock where icons magnify based on real distance from the cursor.
Magnetic Tile Grid
magnetic-tile-grid
A tile field that leans toward the pointer and brightens with proximity.
Marbled Endpaper
marbled-endpaper
Paper marbling computed live on a canvas: two inks on unbleached paper, combed slowly into veins, with the pointer as the stylus and one accent drop the reader places by clicking.
Marker Highlight Text
marker-highlight-text
A felt-tip highlighter stroke with a ragged edge that draws itself behind a phrase when it scrolls into view.
3D Cylinder Marquee
marquee-cylinder-3d
Words on a rotating cylinder, with the radius derived from the face count.
Marquee Ticker
marquee-ticker
An infinite scrolling strip of words or logos that pauses when you hover it.
Masked Scroll Highlight
masked-scroll-highlight
Copy that resolves word by word as you scroll, mapped by real reading position rather than word index.
Masonry Image Hover Grid
masonry-image-hover-grid
A CSS-columns masonry gallery with a scale + caption reveal on hover.
Median Cut Palette Plate
median-cut-palette-plate
Pulls a genuinely distinct palette out of a photograph by median cut — splitting on channel spread, not on population, sorted by relative luminance.
Medusa Swarm Field
medusa-swarm-field
A bloom of tiny moon jellyfish in a near-black void, with no water in the picture: 600 by default, up to 2000 on the count prop, each one small and far like a bloom seen from a distance. The glass is colourless; the only colour is in the organs glowing inside. The swarm has read your page: it drifts around the content, keeps clear of it, and softly lights the words nearest to it. Move the pointer and a current runs through the bloom; click and a ring of it crosses the swarm.
Mercury Pour Nav
mercury-pour-nav
A floating nav whose current-link indicator is a capsule of mercury on two springs: it stretches thin as it pours to the next link, snaps back round, reaches toward the link you hover, and turns the labels it covers dark.
Metric Proof Tiles
metric-proof-tiles
A proof section set as bento tiles: 1x1 figures that count up once as they arrive, one accent tile that breaks the row, a quote, and a live figure that ticks slowly.
Mirror Pool Footer
mirror-pool-footer
A footer whose giant chrome wordmark stands on the waterline of a dark pool that mirrors it: a real wave simulation rings under the pointer and takes a drop every ten seconds, bending the reflection as it ripples.
Modern Minimal Site
modern-minimal-site
The whole Modern Minimal kit as one launch page for a wake light, one day long: night into morning in a scroll-scrubbed hero, the day through the middle, dusk in the footer, every value bound to the scroll with no easing.
Moiré Interference Field
moire-interference-field
Two stripe layers a fraction of a degree apart, generating a shifting fringe field under the cursor.
Molten Chrome Hero
molten-chrome-hero
A first screen whose title is molten chrome in WebGL: the lit room it reflects turns with the pointer, the metal swells toward it, fast moves and clicks send ripples through the letters, and it stands on a mirror floor.
Morning Light Field
morning-light-field
A background of morning light through a window, on paper: six panes of warm light fall across the wall with leaves moving slowly in them, rendered live, and the pointer turns the sun a little.
Morph Bento Grid
morph-bento-grid
A three-column bento of glass, frost and phone tiles that opens up with the scroll: the tiles assemble as it slides in, then the outer columns trade height in two diagonal beats. Each picture is pinned to its column's edge at full size, so a tile opening reveals more of it rather than stretching it, and the labels ride the moving edge. Numbers count up, phones scroll their screens, the app's carousel slides, foil sweeps through the pills and the frost over the 3D tile clears.
Morphing Command Nav
morphing-command-nav
A floating nav pill that grows into a command palette in place: the same surface morphs from pill to panel, results are grouped with a light that slides between them, and it shrinks back on Escape or a pick.
Morphing Hamburger Icon
morphing-hamburger-icon
A three-line menu icon that morphs smoothly into an X.
Morphing Island Notch
morphing-island-notch
A status pill that resizes itself fluidly around whatever content it holds.
Morphing Shape Loop
morphing-shape-loop
A decorative blob whose SVG outline continuously morphs between shapes.
Multi-Select Combobox
multi-select-combobox
A chip-and-search combobox with full keyboard control and a selection cap.
Multi-Step Form Flow
multi-step-form-flow
A validated wizard with per-step gating, an editable review step, and a real success state.
Name Badge Input
name-badge-input
A name field that sets your name on a pass as you type: each new letter lands loud in the accent and springs into place, a deleted one collapses to a hairline, and the name stays flush across the badge.
Nanobot Swarm Field
nanobot-swarm-field
Tens of thousands of tiny metallic micro-robots on black. They drift in calm murmurations, pack into a turning disc around your cursor with their status lights switching on, and a press calls them to assemble your text as a hexagonal lattice, hold it, and scatter. Each bot is an oriented capsule that glints when its heading catches the light.
Native Sheet Dialog
native-sheet-dialog
A sheet on the native dialog element — no hand-rolled focus trap, and the three things the platform leaves you fixed.
Neo-Brutal SaaS Template
neo-brutal-saas-template
A complete neo-brutalist landing page for a software product: a throwable card-pile hero, stamped feature table, customer quotes, punched changelog ledger, sticker pricing, FAQ and a hazard-tape footer.
Neon Tube Sign
neon-tube-sign
A neon sign that lights the wall behind it — glass tubes with a hot core, one tired letter that stutters, an ignition flicker, and a real on/off switch.
Nested Command Menu
nested-command-menu
A Cmd+K menu with real submenu drilling, a breadcrumb trail, and scoped per-level search.
Neural Pathway Field
neural-pathway-field
A still, grown piece of nervous tissue where thought runs as light. Neurons with tapered dendritic trees and long axons fire when enough signal arrives, sending bright pulses down the branches; your cursor stimulates the cells it passes, and a press sends a chain-reaction wave across the tissue.
Noise Fill Pricing
noise-fill-pricing
Pricing where volume fills a plane of dots in blue-noise order: drag the images a month and the dots light evenly with no clumps, the newly lit ones flashing signal, while the plan that covers it lights up.
Noise Gradient Canvas
noise-gradient-canvas
A slow-drifting colored noise wash rendered at low resolution and upscaled smooth.
404 Page
not-found-template
A centered 404 with a huge numeral, a human message, a home CTA, and a subtle grid backdrop.
Notification Center
notification-center-panel
A read/unread notification list with filtering, bulk actions, and a real empty state.
Peeking Toast Stack
notification-stack-peek
Toasts collapsed into a depth-scaled deck that fans out on hover.
Odometer Counter
odometer-counter
A stat number that rolls up from zero to its target the moment it's in view.
Offset Shadow Card
offset-shadow-card
A neo-brutalist card on a hard shadow: it lifts 2px on hover and lands on the shadow when pressed. A flat drawn motif or a photo, a punched price tag, a sticker badge, 3px ink throughout.
Offset Target Button
offset-target-button
A button whose label plate hangs off its hairline target along the grid's axis, reaches further and lights its bracket on hover or focus, and seats into the target in 120ms when you press it.
Onboarding Checklist
onboarding-checklist
An expandable setup checklist with a real derived progress bar and a completion state.
Optimistic Inline Commit
optimistic-inline-commit
An instant-feedback control with the parts everyone skips: request sequencing and a rollback that restores the right value.
Orb Depth Field
orb-depth-field
Floating orbs whose size, blur, opacity and speed all derive from one depth value.
Orbit Light Button
orbit-light-button
A dark pill whose border carries one light: it laps the outline slowly, glides to the nearest point of the border under the pointer and lights the surface from there, and a press sends a ring outward.
Orbit Product Hero
orbit-product-hero
A first screen with the product in it, raymarched live in WebGL2: drag the dial round, move across the hero to click its ring through detents, and switch its finish between titanium, ceramic and polymer.
Orbital Action Menu
orbital-action-menu
A radial menu that fans actions along an arc, evenly spaced at any count.
Ordered Dither Plate
ordered-dither-plate
A gradient quantised to a few tones by an 8x8 Bayer matrix — offset then quantised, dithered in linear light, one cell per device pixel.
OTP Code Input
otp-code-input
A one-time-code field whose cells survive SMS autofill, paste and Android backspace.
Overshoot Lattice Hero
overshoot-lattice-hero
A first screen on a drawn lattice whose caps headline breaks it by rule, and a plate you drag to any free cell: drop it on column 3, 6 or 9 and it overshoots, wears the bracket, and the hairlines bend to make room.
Page Loading Bar
page-loading-bar
An nprogress-style top-of-page bar that eases toward completion, never stalling.
Page Transition Wrapper
page-transition-wrapper
Wraps route content so it animates out and the next page animates in instead of swapping instantly.
Particle Assemble Text
particle-assemble-text
Particles sampled from the glyphs themselves, assembling into a word and scattering on hover.
Particle Galaxy Field
particle-galaxy-field
A full-bleed WebGL2 galaxy of up to ten million stars: a hollow ring of lit globes, braided threads and slow-breathing embers that you turn by dragging, while a sweep of the pointer flings stars out of the disk and a spring pulls each one back to its orbit.
Path Follow Scroll
path-follow-scroll
A marker that rides an SVG curve on scroll, banking through the bends.
Patina Dock
patina-dock
A command dock that wears in where it is used: habits animate less, brighten where you press, show their shortcut and move to the front on commit, and a readout says what changed.
Pedestal Footer
pedestal-footer
A footer where the product comes to rest: as it scrolls into view the dial floats down onto a mirror floor, its parts closing up as it lands, over a large wordmark lit from the object's key light.
Pendulum Menu
pendulum-menu
Menu items that hang from a rail and swing on real pendulum physics, nudging their neighbours.
Perspective Grid Floor
perspective-grid-floor
A tilted, endlessly scrolling grid floor that recedes toward the horizon.
Phone Room Section
phone-room-section
A rendered dark room slides up over the page and the app's phone rises into it; held on screen, the words come in one by one and the phone's card carousel and row of people slide along with the scroll. Two grey fork sculptures are the scroll cue: light runs down them, they bob, and a click moves the page on.
Physarum Vein Field
physarum-vein-field
A living transport network on black. Hundreds of thousands of slime-mould agents grow a luminous web of veins; your cursor is food, so the web reaches toward it, and a press plants a glowing node the network connects to with thick trunk veins before slowly letting go.
Pixel Dissolve Reveal
pixel-dissolve-reveal
A block-grid dissolve driven by a seeded shuffle, so it clears perfectly evenly.
Pointer Lit Card
pointer-lit-card
A card lit from the pointer: a bright arc of light on the hairline border, a softer wash across the surface, a two-degree tilt toward the pointer and a little counter-parallax on the content.
Pointer Parallax Scene
pointer-parallax-scene
A depth system where layers separate under the pointer from one shared motion source.
Pointer Warp Dot Field
pointer-warp-dot-field
A canvas dot grid that bulges and brightens away from the cursor.
Portfolio Page
portfolio-page-template
A personal portfolio with working discipline filters and a pointer-responsive work grid.
Pour Fill Heading
pour-fill-heading
A heading that starts as an empty mould and fills with liquid chrome as it scrolls into view, its surface a meniscus with a hot line of light that sloshes with scroll speed and settles.
Pour Tracklist Section
pour-tracklist-section
An album tracklist where each row is its own progress bar: liquid chrome pours across the row as the preview plays, the labels under the metal turn dark, and you scrub by dragging the row.
Pressure Signature Pad
pressure-signature-pad
A signature pad with real variable-width ink — pen pressure where it exists, velocity everywhere else, coalesced samples and midpoint quadratics.
Pricing Page
pricing-page-template
A pricing page that computes: seat slider, annual toggle and an expandable comparison matrix.
Pricing Toggle Switch
pricing-toggle-switch
A monthly/yearly billing switch with the price sliding to its new value.
Priority Plus Nav
priority-plus-nav
A nav that measures itself and collapses what does not fit into a More menu — ghost-row measurement, no breakpoints, no flicker loop.
Prism Beam Hero
prism-beam-hero
A raymarched glass prism on black: a white beam comes in from wherever your pointer is, a spectrum fans out the other side, and the prism turns once a minute. One shader, no libraries.
Product Shot Hero
product-shot-hero
A dominant framed app-window screenshot mock with the headline as a caption above it.
Program Curve Pricing
program-curve-pricing
Pricing beside the product's sunrise programs: pick gentle, standard or brisk and its curve morphs on a spring while the lamp, rendered live in a dark room, plays that sunrise in six seconds, next to the plans.
Progress Arc Gauge
progress-arc-gauge
An SVG arc gauge with a needle and a readout that counts to its value.
Circular Progress Ring
progress-ring
An SVG progress ring whose fill and centered percentage count up together on scroll into view.
Puffer Quilt Field
puffer-quilt-field
A background of diamond-quilted puffer you can press: a pillow sinks under your finger while the four around it puff up with the stuffing it lost, then everything springs back, rendered live in WebGL2.
Punch Card Field
punch-card-field
A background of 80-column punch cards whose holes spell real text in Hollerith code. Holes are punched in column by column on arrival; point at a column to decode it.
Pushed Shadow Button
pushed-shadow-button
A neo-brutalist button on a hard 5px shadow: hover lifts it 2px, a press lands it exactly on its shadow. 3px ink everywhere, 100ms linear, no blur.
Draggable Range Slider
range-slider
A custom-styled slider with a drag handle and a value tooltip while dragging.
Reaction Diffusion Plate
reaction-diffusion-plate
A live Gray-Scott solver as a background plate — coral, mitosis and maze are the same two equations at different feed and kill rates.
Reeded Glass Field
reeded-glass-field
A pane of fluted glass standing in front of a hidden light. The pointer drags the light behind it, and every rib refracts its own sliver, so the light reads as a comb of luminous shards that slide from rib to rib. A press sends a ripple of curvature through the glass.
Reflow States Section
reflow-states-section
A pinned section that re-lays four modules into three layouts at scroll checkpoints, all at once in 380ms, and since each layout orders them differently the rule's break passes to the new third, overlapping its left-hand neighbour.
Resizable Split Pane
resizable-split-pane
A split view with pointer capture, pixel minimums resolved against real width, and a separator you can actually tab to.
Ringed Planet Field
ringed-planet-field
A full-bleed WebGL2 gas giant hanging in black, wearing a ring system of up to ten million particles: a crisp terminator, an accent rim on the lit limb, the rings' shadow across the planet and the planet's shadow across the rings. Drag to orbit, sweep to fling ring particles out of the plane, tap the planet to send a ripple through the rings.
Ripple Click Effect
ripple-click-effect
A Material-style ripple that expands from the exact click point.
Ripple Roll Button
ripple-roll-button
A label that rolls letter by letter to a second copy, rippling outward from wherever your pointer came in — and settling back toward where it left.
Rotating Seal Badge
rotating-seal-badge
A round seal — the phrase fitted exactly around the circle with drawn dot separators — that turns once every 24 seconds, eases to a stop on hover, and is the link.
Rotating Word Swap Headline
rotating-word-swap
A headline where one word auto-cycles with a vertical odometer-style swap.
Rule Handoff Flip
rule-handoff-flip
The kit's rule for any list: items become plates on the lattice and every third breaks; filter, sort or add and everything moves from where it was in 380ms while the break passes to whichever item is now third.
Run-off Wordmark Footer
run-off-wordmark-footer
The closing anchor: the full lattice again, link columns under the rule (the third breaks onto a paper plate with the bracket), and the studio's name fitted to run two gutters past the right edge, whatever the name.
SaaS Landing Page
saas-landing-template
A full marketing landing page: nav, hero, logo band, feature grid, and footer.
Scramble Text
scramble-text
Text that decodes from random characters into its real word on hover.
Scroll Card Deal
scroll-card-deal
A pile of cards that fans out symmetrically as its section crosses the viewport.
Scroll Depth Layers
scroll-depth-layers
A parallax scene where every layer derives from one shared scroll source.
Scroll-Linked Image Mask Reveal
scroll-linked-image-mask-reveal
An image whose circular clip-path mask grows and shrinks in lockstep with scroll.
Scroll Velocity Skew
scroll-velocity-skew
Skews its content based on how fast the page is being scrolled, relaxing back to flat at rest.
Scrub Mask Reveal
scrub-mask-reveal
A plate that opens exactly with the scroll: its rounded frame widens from a fifth in on each side to full while the picture inside eases the other way so it seems to stay still, bound with no easing, with a hairline that fills.
Scrub Number Field
scrub-number-field
A numeric input whose label you drag to scrub, with pointer lock and precision modifiers.
Scrub Timeline Player
scrub-timeline-player
A media scrubber with buffered range, hover timestamp and pointer-capture dragging.
Seam Reveal Hero
seam-reveal-hero
A before-and-after hero with no handle: the seam is wherever your pointer is, eased like a curtain, and the colour arrives with the work.
Searchable FAQ Accordion
searchable-faq-accordion
A filterable FAQ list where each answer expands independently.
Seeded Identity Mark
seeded-identity-mark
Turns any string into a symmetric geometric logo that is byte-identical on every render, forever.
Segmented Control
segmented-control
An iOS-style pill switch whose highlight slides between options.
Segmented Morph Toggle
segmented-morph-toggle
A segmented control where only the selected option expands to its label.
Selection Annotate Toolbar
selection-annotate-toolbar
A toolbar that follows a text selection and highlights ranges without touching the DOM.
Service Price Ledger
service-price-ledger
A price list set like a printed menu — baseline dot leaders, tabular prices, a Book link per row — beside a photo plate that follows hover, focus, or on phones the row mid-screen.
Seventeen — Creative Studio
seventeen-studio-site
A print-spread studio site where photographs crop into a giant numeral and sit inline inside the sentence.
Shadow Shoal Footer
shadow-shoal-footer
A footer that is a concrete floor lit edge to edge by water light from a ceiling you cannot see, with rounded top corners. Sharks pass through it, in every direction, and there are no sharks, only their shadows. They swim like real animals: they can only move along their heading. A resting pointer is noticed and avoided or inspected, a click makes them bolt away smoothly, and hovering a link slows the nearest one. Switch to butterfly koi if you prefer.
Share Button Expand
share-button-expand
A share icon that expands into a row of social options with a copy-link state.
Shortcut Recorder Field
shortcut-recorder-field
Records a keyboard chord by physical key position, and refuses the ones the browser owns.
Signal Field
signal-field
A machined dot grid lit by slow waves of light, with a pointer lens and click ripples.
Six Values Scroll
six-values-scroll
A pinned section that plays one specimen card through each of the six values in turn, with a lit ledger saying what each one changes.
Skeleton Shimmer Loader
skeleton-shimmer
Loading-state placeholder blocks with a light sweep animating across them.
Slab Stack Hero
slab-stack-hero
A neo-brutalist first screen: a slab headline beside a pile of hard-shadow cards you can grab and throw. Thrown cards fly off and cut to the bottom; the rest step up. Nothing eases.
Slit Light Heading
slit-light-heading
A heading lit by a narrow slit of light that crosses it as it scrolls into view: letters under the slit burn white, letters it has passed stay lit, letters ahead wait in the dark.
Soft Form Field
soft-form-field
A background of soft forms raymarched live in WebGL2: rounded cubes, capsules and rings in ceramic, titanium and polymer drift, melt into one another where they meet and part around the pointer.
Soft Glow Button
soft-glow-button
A pill with a grained light inside it that follows the pointer with a slow settle, a diffused bloom that rises behind it, and a press that exhales a soft ring of light.
Sparkline Scrub Cell
sparkline-scrub-cell
An inline micro-chart you sweep to read exact values, with monotone interpolation that never invents a peak.
Spatial 3D Site
spatial-3d-site
The whole Spatial 3D kit as one hardware launch: a curved rail nav, the product live in the hero, a field of soft forms, the product taken apart, profile cards, pricing by material, a dial input and a pedestal footer.
Spec Ledger Section
spec-ledger-section
A dense spec table with real header association, a focusable scroll region, and a sticky head that keeps its rule.
Spec Numeral Tile
spec-numeral-tile
A big bold numeral in a spec-sheet voice whose digits roll into place like an odometer, set in a hairline bento tile.
Specular Text Sweep
specular-text-sweep
A light band travelling inside the glyphs, clipped to the text so only ink lights up.
Split Flap Board
split-flap-board
A real Solari departure board — four layers and a hinge, with reels that land apart because they travel different distances.
Split Screen Hero
split-screen-hero
A copy-left, product-right split with a floating stacked dashboard card.
Spotlight Follow Background
spotlight-follow-background
A full-bleed radial glow that tracks the cursor with zero re-renders.
Spotlight Card Grid
spotlight-grid
A card grid with a soft red spotlight that follows the cursor across it.
Spotlight List Focus
spotlight-list-focus
A list that dims and blurs every row except the one under the pointer.
Squash Press Button
squash-press-button
A pill that squashes under your finger and pops back: it sinks onto its base where you press, deeper the longer you hold, keeps its area as it squashes, and springs back with one overshoot while its tinted shadows collapse and return.
Squish Flip
squish-flip
A list whose items squash and stretch as they move: reorder, filter or add and each item travels to its new place stretched along its path by its speed, squashes as it lands, and settles; new items pop in.
Squish Letter Heading
squish-letter-heading
A heading whose letters squash under the pointer and push their neighbours up: each letter keeps its area as it squashes, springs back with one overshoot, and the line ripples behind the pointer before settling to crisp type.
Stacked Type Hero
stacked-type-hero
Oversized, tightly-stacked headline words that reveal in on mount — big type as sculpture.
Stagger Reveal Group
stagger-reveal-group
A wrapper that reveals its children one after another as the group scrolls into view.
Stamped Feature Grid
stamped-feature-grid
Features in an exposed table with A1 coordinates. As each row scrolls in, its cells are stamped on left to right: a black slab wipes across in hard steps, then the cell prints.
Interactive Star Rating
star-rating-interactive
A 5-star rating control with hover preview and a springy fill pop.
Star System Section
star-system-section
A WebGL2 page section where everything orbits one core: a glass core with a light breathing inside it, and each of your items a planet on its own orbit of braided star dust, with real, keyboard-reachable labels that light the planet, its lane and a detail card.
Starfield Parallax
starfield-parallax
A three-depth-layer field of drifting, twinkling stars with true parallax speed.
Sticker Peel Steps
sticker-peel-steps
How it works as three stickers you peel: pull from a corner and each one curls back around a real fold with its paper liner showing, a shadow growing under the flap; past halfway it comes off and reveals the picture underneath.
Sticker Pricing Section
sticker-pricing-section
Neo-brutalist pricing where each price is a label stuck on its card at a tilt. A monthly or yearly switch changes every price in one frame; the featured plan sits higher on a deeper shadow.
Sticky Index Section
sticky-index-section
An editorial index with sticky year headers, and a switch that demonstrates the overflow ancestor that breaks them.
Sticky Scroll Stack
sticky-scroll-stack
Cards that pin and stack on top of each other as you scroll past.
Sundial Shadow Heading
sundial-shadow-heading
A heading whose letters cast soft shadows that swing like a sundial as the page scrolls: the sun crosses with the scroll, the long shadows turn from right to left, and a faint warm band of light slides across the ink.
Swatch Fan Deck
swatch-fan-deck
A fan deck of paint chips that spreads in your hand on hover or focus — a real radio group, with arrow keys and the colour's name, not its hex.
Swipe Card Stack
swipe-card-stack
A draggable deck of cards you flick away to cycle through, Tinder-style.
Tactile Maximalism Site
tactile-maximalism-site
The whole Tactile Maximalism kit as one launch page for a creator-commerce platform: a jelly headline, peelable stickers, soft pricing columns, a quilted waitlist and a footer of gummy letters you can throw.
Taffy Pill Nav
taffy-pill-nav
A floating pill nav whose bubblegum marker stretches like taffy to the link you choose: long and thin in flight, short and fat as it lands, with the labels turning paper exactly where it covers them.
Terminal Demo Hero
terminal-demo-hero
A staged terminal window as the hero's centerpiece, typed command and streaming output.
Testimonial Carousel
testimonial-carousel
An auto-advancing quote carousel with directional slide transitions.
Text Mask Media Reveal
text-mask-media-reveal
Type used as a mask so imagery moves inside the letterforms.
Theme Toggle Sun Moon Morph
theme-toggle-sun-moon-morph
A track+thumb switch whose icon morphs between a sun and a crescent moon.
Third Plate Pricing
third-plate-pricing
Engagements as plates on the lattice: an intro with a Project / Retainer toggle, then three plans; flip the toggle and the plans re-order in 380ms, the prices change, and the rule's break passes to the new third.
Thumb Action Dock
thumb-action-dock
A phone bottom bar with Call, Directions and Book — that appears once the hero's CTA has gone, and steps aside for the footer, a focused field and the keyboard.
Ticker Tape Background
ticker-tape-background
Oversized, near-invisible ticker rows scrolling behind the fold as ambient texture.
Tile Expand Panel
tile-expand-panel
A primitive that grows any bento tile into a full panel: the panel opens from the tile's own rectangle while its cover, title and figure fly across to their new places.
Tilt Card
tilt-card
A 3D card that tilts toward the cursor with spring physics.
Toast Notification Stack
toast-stack
A queue of toast notifications that stack, reflow, and auto-dismiss independently.
Topographic Contour Drift
topographic-contour-drift
A survey map of terrain that never existed, traced live with marching squares and drifting underfoot.
Transform Compare Section
transform-compare-section
One source through every transform, split by a wipe you drag: a raymarched still life on the left, and on the right true Atkinson or Floyd–Steinberg diffusion, blue noise, Bayer, halftone or shape-matched ASCII.
Transform Loupe Hero
transform-loupe-hero
A first screen whose picture is computed live: a plane of spheres under a low sun, printed in blue-noise dither, with a loupe under the pointer that shows it as shape-matched ASCII, a halftone screen, Bayer or the source.
Tuning Prism Hero
tuning-prism-hero
A first screen whose glass prism is the reader's own six values: it turns to face them as they scroll, splits the light into a spectrum, and its values draw out as chips they can pull to retune the page.
Type Specimen Hero
type-specimen-hero
A magazine-cover hero where the photograph inverts through the letterforms, pinned to its own stacking context.
Typewriter Text
typewriter-text
Text that types itself out character by character, then cycles to the next phrase.
Ultra Pill Nav
ultra-pill-nav
A floating glass pill nav that tightens as the page scrolls, with the Aura Dial in it: press U and every Ultra part of the page retunes.
Ultra Plan Cards
ultra-plan-cards
Three glass plan cards dealt in by the scroll, with a real monthly and yearly switch; the featured one wears a slowly turning ring of the six values' colours.
Ultra Site
ultra-site
The whole Ultra page, told by the scroll: a glass prism of the reader's own values, a specimen played value by value, a light you set, tools that learn, plans and a footer, all retuned by one shared dial.
Ultra Site Footer
ultra-site-footer
A footer whose huge closing line gets bolder as the reader turns contrast up, with their own six values drawn as a hexagon they can reset.
Undo Commit Toast
undo-commit-toast
An undo window that defers the action instead of reversing it, and pauses when you tab toward the button.
Usage Pricing Calculator
usage-pricing-calculator
A live estimator with real marginal-tier overage pricing and an annual discount toggle.
Variable Blur Scrim
variable-blur-scrim
A scrim whose blur ramps instead of switching on — stacked backdrop-filter layers at doubling radii with overlapping masks.
Veil Resolve Heading
veil-resolve-heading
A serif heading that arrives out of soft light: each word condenses from a blur into focus with an 80ms stagger while a glow blooms behind the words and fades as they sharpen.
Velocity Marquee Rail
velocity-marquee-rail
A marquee that accelerates with scroll speed and flips direction when you scroll back.
Venetian Blind Slideshow
venetian-blind-slideshow
A hero slideshow whose photographs change like venetian blinds turning — slats flip in a staggered cascade, with the dark frame showing through as they go edge-on.
Verlet Cloth Banner
verlet-cloth-banner
A banner hanging from its fixings as real Verlet cloth — previous-position integration, relaxation passes and a fixed timestep behind an accumulator.
Vertical Timeline Reveal
vertical-timeline-reveal
A scroll-triggered vertical timeline whose dots and cards reveal in sequence.
Video Backdrop Hero
video-backdrop-hero
A cinematic full-bleed motion backdrop, built entirely from CSS and Framer Motion.
View Timeline Reveal
view-timeline-reveal
Scroll reveals on a real CSS view timeline — off the main thread, and visible by default where it is not supported.
Waitlist Capture Hero
waitlist-capture-hero
A waitlist hero that actually captures: validation, pending, success and queue position.
Waitlist Page
waitlist-page-template
A single-purpose pre-launch page: headline, email capture form, and a joined-count signal.
Wake Time Wheel
wake-time-wheel
Set the alarm on a pair of wheels: hours and minutes are snap-scrolling columns with momentum whose rows turn away in perspective around a lens, each a keyboard spinbutton, with the time the sunrise starts beneath.
Warning Tape Footer
warning-tape-footer
A neo-brutalist footer under a strip of hazard tape you can grab and throw on its slow 48-second crawl, a sign-up that stamps the tape, and a giant wordmark whose letters press down onto their own ink plates.
Wave Ribbon Band
wave-ribbon-band
Layered SVG line-work flowing from two incommensurable sine waves.
Weight Press Button
weight-press-button
A button whose press you can see in its type: hover and the label thickens as the button lifts; press and it goes bold under your finger while the button sinks and its shadow collapses to the contact line, then springs back.
Weight Slam Text
weight-slam-text
Display type whose weight slams instead of easing: letters jump 400 → 650 → 900 in two hard steps, left to right like a row of stamps, and let go in three.
Weight Wave Text
weight-wave-text
Per-character variable font weight that swells around the pointer and drifts when idle.
Whiplash Letters
whiplash-letters
A headline whose letters follow the cursor as a spring chain — crisp at the head, loose at the tail.
Widget Reorder Input
widget-reorder-input
A "customise your dashboard" panel: drag or keyboard reorder, show and hide switches, a live miniature of the result, and save, cancel and reset.
Window Light Drift
window-light-drift
Afternoon sun through a window, crossing a plaster wall over ninety seconds — and your pointer casts a shadow in it.
Wobble Drop Card
wobble-drop-card
A release card that leans toward the pointer on a soft spring while the sticker on its corner follows through, swinging the other way and jiggling to a stop; press it and the card squashes onto its base and pops back.
Word Mask Section
word-mask-section
Opens on a rendered concrete set with the app on two phones; on scroll the camera pulls out of the inside of the letter "i" and the whole set turns out to be inside a giant word, which then slides across the screen into the next section.
Word Wheel Cylinder
word-wheel-cylinder
A rotating word wheel built on a real cylinder — derived radius, accumulated rotation, no backwards spin on the wrap.
Yielding Hairline Field
yielding-hairline-field
A background that is the lattice itself: twelve-column hairlines with crosses where they meet, bending one gutter around every module the rule breaks and leaning away from the pointer, drawn on a canvas that sleeps when still.
Z-Swap Plate Card
z-swap-plate-card
A work card on the lattice: every third in a run breaks by the rule, two gutters out with the bracket, and hovering the card it overlaps lifts that card above it, the bracket going with the lift, in 240ms.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Anamorphic Heading
anamorphic-heading
A heading that only reads from the right angle: its letters stand at different depths, scaled so they line up from straight ahead, and the view swings round to square as it scrolls in.
Animated Checkbox
animated-checkbox
A checkbox whose checkmark draws itself in as a real SVG path animation.
Animated Dot Matrix
animated-dot-matrix
A grid of dots that pulses outward in concentric ripples, drawn on canvas.
Animated Mesh Waves
animated-mesh-waves
Layered translucent wave ribbons scrolling at different speeds for a fluid mesh feel.
Animated Stat Grid
animated-stat-grid
A row of stat counters that count up together the moment they scroll into view.
Animated Tabs Indicator
animated-tabs-indicator
A tab row where the active-state highlight slides between tabs instead of popping.
Announcement Badge Hero
announcement-badge-hero
A large pulsing announcement pill anchors the hero above one headline.
Aperture Iris Reveal
aperture-iris-reveal
A photo revealed by a real iris — straight metal blades that part and twist from the centre — while a corner readout clicks down the f-stops from ƒ/22 to ƒ/1.4.
Ascending Shatter Section
ascending-shatter-section
A basalt stone breaks apart as you scroll, and its pieces rise up the beam of one cold lamp, tumbling slowly and thinning into ash. Scroll back and every piece falls home and the stone closes. The pointer loosens the pieces near it; a click sends a ring through the stone.
ASCII Density Nav
ascii-density-nav
A nav whose active link is marked by a band of ASCII density: characters thicken through a ramp under the active link and flow to the next one on a spring, its peak in signal.
ASCII Flow Field
ascii-flow-field
A background of live ASCII: a drifting contour map set glyph by glyph in your mono face, matched to the shape of each cell, that bends round a hill the pointer raises, its upper contours in signal.
ASCII Halftone Canvas
ascii-halftone-canvas
Turns any canvas drawing into live ASCII art, sampled one pixel per glyph.
ASCII Resolve Heading
ascii-resolve-heading
A heading that resolves from ASCII into type: its own letterforms redrawn in shape-matched glyphs step from coarse to fine as it comes into view, then a lens under the pointer shows the glyphs again.
ASCII Wordmark Footer
ascii-wordmark-footer
A footer whose name is set in live ASCII: the wordmark drawn glyph by glyph in signal, printed in cell by cell as the footer rises, crossed by a slow light, and turned to paper under the pointer.
Assemble Reveal
assemble-reveal
A reveal where parts assemble in 3D: each item starts at its own offset and turn deep in perspective and flies home on a spring with a slight overshoot, one after another, as it comes into view.
Asterisk Submit Input
asterisk-submit-input
An email field as a pill, an asterisk that turns one step per keystroke and spins while sending, and a black Submit pill. A real form with validation and an honest status line.
Asterisk Type Headline
asterisk-type-headline
A headline typed out by an asterisk: the caret spins fast while it types, opens an inline pill when it reaches one, then parks in the slot you mark with * (by default just after the last word) and keeps turning slowly.
Async Action Button
async-action-button
A button that survives a real round trip — a minimum pending duration, a width that never twitches, aria-disabled instead of disabled.
Attention Site
attention-site
A whole website made of anomalies, one room per screen: koi in dry air, a shadow that runs to its lamp, a stone the scroll breaks upward, chrome that fuses, steel that pours, plans that lift off the floor and a footer crossed by shark shadows.
Audio Wave Visualizer
audio-wave-visualizer
A bouncing equalizer bar animation for audio/podcast/music UI.
Aura Booking Picker
aura-booking-picker
A booking picker in three quiet steps, treatment, day and time, where the chosen time blooms into a grained halo, and a request that needs your handler before it confirms anything.
Aura Dial
aura-dial
A 40px hexagon of the viewer's own six values (contrast, warmth, light, density, motion, focus) that opens into an instrument: pull a corner and every Ultra asset on the page retunes live.
Aurora Curtain Field
aurora-curtain-field
The kit's aurora on its own, in WebGL: three curtains with bright borders, fraying rays and folds over a field of stars, bowing toward the pointer, for any dark section.
Aurora Drift Text
aurora-drift-text
Display type filled with aurora light: three bands drift through the letters on slow loops, ray threads slide through them, and the brightest band leans toward the pointer when it comes near.
Aurora Flow Nav
aurora-flow-nav
A floating night-glass nav whose active mark is a band of aurora light that takes the colour of the sky above its link and flows to the next one leading edge first.
Aurora Glow Button
aurora-glow-button
A night-glass pill with a sliver of aurora under it, turning on a 60s clock that every button on the page shares, spreading on hover and sending a ring of light out on press.
Aurora Glow Input
aurora-glow-input
A waitlist field that lights like the sky: focus raises a two-hue bloom and lights the rim, every keystroke sends a rose ripple from the caret, and joining sweeps the whole palette once.
Aurora Gradient Field
aurora-gradient-field
Soft, hue-shifting color fields that drift behind a hero like ambient aurora light.
Aurora Horizon Hero
aurora-horizon-hero
A first screen at night under real aurora in WebGL: curtains fold, ray and drift over a sleeping city and bow toward the pointer, and the headline sits on frosted glass tinted by the live sky.
Aurora Ribbon Cursor
aurora-ribbon-cursor
The pointer paints a small aurora: a ribbon of light coloured from the indigo fringe to rose that fades like the sky, sending short rays up from every point so the trail reads as a curtain.
Aurora Rim Card
aurora-rim-card
A night-glass card with a slow aurora rim that turns once every 52 seconds, feathered into light, brightening near the pointer while the card tilts a hair toward it.
Aurora Rise Footer
aurora-rise-footer
A footer where the lights come out as the page ends: scroll raises the aurora from behind the city's roofline, widens it into violet and rose and lights more windows under a large lit wordmark.
Aurora Site
aurora-site
A complete launch site for an overnight AI finance agent in the Aurora register: a flowing aurora nav, a WebGL hero over a sleeping city, window features, pricing that lights the sky and a footer where the lights come out.
Aurora Volume Pricing
aurora-volume-pricing
Usage pricing where the sky answers the number: a log-scale slider rolls the price digit by digit while the aurora behind widens from a dim, cool display to the whole palette and the city lights up.
Aurora Window Features
aurora-window-features
Feature cards as windows onto one sky: a single WebGL canvas draws the aurora only inside each card's window, so a curtain carries on from one window to the next.
Auth Screens
auth-screens-template
Sign in, sign up and reset as one component — layout and mode switching only, with no submit logic.
Avatar Orbit Cluster
avatar-orbit-cluster
A team ring that redistributes at any size, lifting the hovered member out.
Axis Flow Nav
axis-flow-nav
A nav whose links are one flush line: the active link is loud, the rest condensed, and choosing another makes the width flow to it letter by letter while the nav never changes size.
Axis Pass Pricing
axis-pass-pricing
Passes as tickets named in their own registers, quiet to loud: choose a pass, the count or the student rate and every figure that changes rebuilds digit by digit through the accent.
Axis Press Button
axis-press-button
A button whose label is the control: letters under the pointer swell heavier and wider while the rest condense, so the button never changes size, and a press clenches every letter and springs it back.
Axis Scrub Heading
axis-scrub-heading
A heading written by the scroll: as it rises through the view a wave runs through its letters from hairline to a loud accent peak to its set weight, and scrolling back unwrites it.
Axis Session Card
axis-session-card
A programme card whose title is set by what the session is: a workshop quiet and narrow, a talk set, a keynote loud and wide, so a grid reads as a legend; hover pushes it further into its own kind.
Axis Supply — Streetwear Store
axis-supply-store-site
A storefront drawn as an engineering document, with an inverted checkerboard lookbook.
Badge Ping Counter
badge-ping-counter
An icon badge counter that bounces and pings once on every increment.
Bayer Dissolve
bayer-dissolve
An ordered-dither transition: a new state prints in over the old one in 8x8 Bayer order while the screen refines from coarse cells to fine, or prints in from the ground on first view.
Bayer Fill Button
bayer-fill-button
A button whose fill prints in cell by cell through the 8x8 Bayer order on hover and focus, with its label inverting exactly where each cell lands; press it and the screen halves to a finer grid.
Bead Button
bead-button
A single bead of water on dark hydrophobic glass is the button. It magnifies the etched plate behind it and shows it upside down, the way real water does, while the label stays upright and crisp. The pointer's approach leans it, a press flattens it and pinches off a satellite droplet that re-merges, and it never runs away.
Beam Connector
beam-connector
A hairline beam between any two elements, routed with rounded right-angle elbows, that carries a pulse of light once per cycle and lands with a flash at the far end.
Beam Lattice Hero
beam-lattice-hero
A first screen on a lattice of hairline traces where pulses of light run in from the edges and converge on the call to action, the traces light up under the pointer, and the headline is revealed by a scanning light.
Beam Sweep Backdrop
beam-sweep-backdrop
Slow conic light beams rotating behind content, CSS-only and compositor-friendly.
Bearing Flow Field
bearing-flow-field
An ordered crystal of polished steel balls that pours and pools like water across a concrete floor, lit by one low raking lamp. The terraces and ragged edges of the pile are kept on purpose. Drag the pointer through it and it digs a trench that slumps back in; click and a handful of sixty drops.
Bell Breath Loader
bell-breath-loader
A progress loader drawn as one translucent jellyfish. Progress is light: it rises through the bell from the rim, lights the ring of organs and lets the tentacles grow. With no value it breathes on a five second cycle, and at 100 it exhales, lifts 24 px and fades.
Bento Command Nav
bento-command-nav
Site navigation as one row of bento tiles sharing 1px hairlines, with a pointer light that shows through them and menus that open as panels of tiles.
Bento Footer Grid
bento-footer-grid
A bento footer whose tiles are live: a 90-day uptime strip you can read day by day, a back-to-top ring that fills as you scroll, a newsletter that widens across its row as its neighbours reflow, and a wordmark that rises into its crop.
Bento Launch Template
bento-launch-template
A complete launch page from the Bento Box kit: keynote figures, product captures, proof, pricing and a footer set as tiles, broken once by a full-bleed race between two builds.
Bento Preview Hero
bento-preview-hero
Copy beside an asymmetric bento grid of small feature-glimpse tiles.
Bento Pricing Tiles
bento-pricing-tiles
Pricing set as a bento grid: the recommended plan is the one 2x2 tile with the biggest price and the only accent, surrounded by plans, reassurances and a sales tile.
Black Border Form
black-border-form
Neo-brutalist form fields in 3px ink: focus presses a field into its shadow, and errors are stamped on as tilted black tags. The browser's own validation, a posting form and a received stamp.
Blog Post Page
blog-post-template
A long-form article page with real reading progress and a ToC that tracks scroll.
Booking Slot Picker
booking-slot-picker
Pick a day, pick a time, confirm — with honest availability, a real keyboard grid, and a WhatsApp or email request mode for shops with no booking system.
Bounce Light Field
bounce-light-field
A dark room seen from above, lit by a lamp you carry. Every slab throws a real traced shadow, sharp at its base and softening with distance, and light that lands on a slab bounces back in the accent colour. Real-time 2D global illumination by radiance cascades; a press leaves an ember of light behind.
Breath Pacer Ring
breath-pacer-ring
A breathing guide in soft light: a grained halo swells as you breathe in and settles as you breathe out, a thin ring traces each phase and the seconds count down; it starts only when asked.
Breathing Halo Hero
breathing-halo-hero
A first screen in a near-black jade room lit by two soft, grained halos in WebGL: the lead one breathes on a slow cycle and leans toward the pointer with a 900ms settle, and the serif headline warms where the light sits behind it.
Broken Grid Site
broken-grid-site
The whole Broken Grid kit as one studio site on one rule: a drawn-lattice hero, an inverting headline, work and clients that reflow and hand the break on, practices across three layouts, engagements that re-order, and a run-off footer.
Brutal Mega Menu
brutal-mega-menu
A neo-brutalist bar whose menu is a full-screen index that cuts in and out in one frame: huge section rows between 3px rules, a hard inverted selection, links and a feature card beside it.
Capture Loop Card
capture-loop-card
A bento tile whose picture is a tightly cropped loop of your product, still until someone hovers or presses play, with a hairline that tracks the loop.
3D Card Carousel
card-carousel-3d
Cards mounted on a rotating 3D ring — the active one faces forward, others recede.
Card Shuffle Deck
card-shuffle-deck
A reorderable neo-brutalist deck where cards lift onto their shadows, travel in straight lines and land exactly. Drag, shuffle or move with the keyboard; ranks stamp as cards land.
Caustic Light Pool
caustic-light-pool
Water caustics computed from the real focusing condition, so the bright filaments land where the physics puts them.
Changelog Page
changelog-page-template
A changelog with working tag filters and releases that expand in place.
Chapter Progress Nav
chapter-progress-nav
A sticky section nav whose items fill like progress bars as you read — and still reaches the short last section that fixed-line navs never activate.
Chladni Sand Field
chladni-sand-field
Fine sand on a black vibrating plate. The pointer tunes the plate, so the grains shiver loose and crawl into a new symmetric nodal-line figure; a press strikes it and a shock spreads while the figure re-forms. Real standing-wave maths on the GPU, with knobs for complexity, settle, strike and the calm zone behind your copy.
Chromatic Split Hover
chromatic-split-hover
RGB channels of a headline separate toward the pointer and recombine to white.
Chrome Pill Button
chrome-pill-button
A pill of polished chrome that reflects a lit room: its horizon, softbox glint and bezel light turn toward the pointer, and a press squashes it and drops a ring into the surface.
Chrome Pour Reveal
chrome-pour-reveal
A reveal that casts its content in liquid chrome: molten metal pours down over the space with drips racing ahead and merging into the sheet, then cools away from the top behind a hot seam of light.
Chrome Rim Input
chrome-rim-input
An email field in a pill with a chrome rim: each keystroke sends two ripples of light racing round the rim from the caret, a light laps it while sending, and success pours the pill into a round chrome drop with a check.
Chrome Vinyl Preorder
chrome-vinyl-preorder
A vinyl pre-order you can play with: flick the canvas record and it spins with inertia under a sheen that stays with the light, the chrome tonearm swings on when it spins fast, and the pressings sit beside it as a radio group.
Circuit Feature Map
circuit-feature-map
Features as nodes on a hairline circuit around a core chip: traces draw in on scroll, pulses run out of the core to each node, and hovering a node lights its trace, its pin and the core.
Class Timetable Section
class-timetable-section
A week of classes set like a departure board — placed by real start time and length, one accent stripe behind today, filters that dim rather than delete, and a day rail on phones.
Colourway Product Card
colourway-product-card
One photograph, every colourway: the shot is greyscaled and multiplied into the chosen colour, so a small label with six colours and one product photo gets six product photos.
Command Palette
command-palette
A Cmd+K style searchable command menu with a filtered live list.
Concern Finder Section
concern-finder-section
A three-question treatment finder: pick a concern, sensitivity and downtime, and the treatments that fit rise into the light, each as bright as its fit, gliding to new ranks as answers change.
Concrete Wall Texture
concrete-wall-texture
A seamless procedural concrete surface drawn once to canvas and blended over anything.
Confetti Burst Button
confetti-button
A button that scatters a quick burst of confetti particles on click.
Contrary Shadow Section
contrary-shadow-section
Mounted letters on a lit plaster wall under a swinging lamp: every word's shadow runs from the light, except one, whose shadow runs toward it.
Contrast Safe Swatch
contrast-safe-swatch
Picks a readable foreground from real relative luminance, and reports all three WCAG thresholds instead of one badge.
Copy Code Snippet
copy-code-snippet
A dark code block with a one-click copy button that confirms itself.
CRT Scanline Overlay
crt-scanline-overlay
Scanlines, aperture grille, rolling refresh and vignette over any content.
Crosshair Cursor Readout
cursor-crosshair-readout
A drafting-tool crosshair with live X/Y coordinates that trails the pointer.
Cursor Label Follower
cursor-label-follower
A contextual chip that trails the pointer and names whatever it is over.
Cursor Lens Magnifier
cursor-lens-magnifier
A glass lens that follows the pointer and magnifies the live DOM beneath it.
Cursor Mask Reveal
cursor-mask-reveal
The pointer cuts a soft hole through one layer to expose a different one beneath.
Snapping Cursor
cursor-snap-target
A cursor dot that latches onto interactive elements and takes their exact shape.
Curtain Footer Section
curtain-footer-section
The page ends, lifts, and the footer is already there underneath: a sticky footer revealed by the last section sliding over it, with the wordmark cropped by the bottom edge. No JavaScript in the reveal.
Curved Rail Nav
curved-rail-nav
A nav whose links ride a shallow cylinder in real perspective: the active link stands forward and underlit in copper, and choosing another turns the rail toward it on a spring.
Dark Precision Site
dark-precision-site
A complete launch site for a developer platform in the Linear/Vercel register: a nav that morphs into a command palette, a hero on a routing lattice of light, a trace console, beams that deliver, a circuit of features, pricing lit by a usage slider, a WebGL light-cone call to action and a horizon-lit footer.
Dashboard Shell
dashboard-shell-template
A dashboard shell with a collapsible rail and real routing between views.
Sortable Data Table
data-table-sortable
A searchable table with three-state column sorting and a real loading skeleton.
Date Range Picker
date-range-picker
A click-twice range calendar with a live hover preview and quick presets.
Dawn Scrub Hero
dawn-scrub-hero
A first screen that is night until you scroll it into morning: the hero pins and the scroll is the dawn, bound with no easing, as a live-rendered room goes from dark to paper white and the lamp from ember to daylight.
Dawn Timeline Section
dawn-timeline-section
The sunrise laid out on a timeline and scrubbed by the scroll: the section pins, 05:30 to 07:00 runs with the scroll, the lamp rendered live rises along its curve, and the time, colour, output and phase follow.
Density Ledger
density-ledger
A list you zoom like a map: pinch, ctrl+scroll, a ruler or [ and ] move rows continuously from 64px to 22px, columns arrive at thresholds, and the row under your pointer stays put.
Deploy Log Input
deploy-log-input
An email field that answers with a streaming log: on submit, short lines stream under it with spinners turning into checks while a beam of light runs along its top edge, and the last line waits for your handler.
Depth Card Carousel
depth-card-carousel
A carousel whose side cards recede in scale, blur and rotation from one offset value.
Detent Dial Input
detent-dial-input
A number set by turning a CSS-3D dial: drag round it and it steps through detents, springing onto each while its copper marker ticks; a real slider with full keyboard control that submits in a form.
Diffused Glow Site
diffused-glow-site
A complete site for a modern skin clinic and day spa: a concern-organised nav, a jade room lit by breathing WebGL halos, a treatment finder, treatment cards with light wells, lit-room memberships, a breathing ritual, a booking picker and a footer at dusk.
Displacement Smear Type
displacement-smear-type
A headline that smears along the pointer's direction of travel with a real accumulation blur.
Dither & ASCII Site
dither-ascii-site
The whole Dither & ASCII kit as one site for an image pipeline: a density nav, a live dithered hero with a transform loupe, an ASCII field, a transform comparison, printing cards, a drop-to-dither form, noise-fill pricing and an ASCII wordmark footer.
Dither Develop Card
dither-develop-card
A card whose image prints in cell by cell the first time it is seen, ordered-dithered with CSS alone, with a soft light that follows the pointer through the dither.
Dither Drop Input
dither-drop-input
Drop an image and see it dithered right there, with CSS alone: choose the cell size and the ink, set the exposure, and the request URL for that output builds as you go; submitting copies it.
Documentation Page
docs-page-template
A docs shell where the sidebar routes, search filters the tree and the ToC tracks the article.
Drag Inertia Carousel
drag-inertia-carousel
A rail you can throw — it projects the momentum and settles on the nearest slide.
Draggable Bottom Sheet Modal
draggable-bottom-sheet
A modal sheet you can drag down to dismiss, with a distance + velocity threshold.
Draggable Sortable List
draggable-sortable-list
A drag-handle-driven list that reorders with a smooth layout swap.
Dry Caustic Room
dry-caustic-room
A high-key white gallery room, seen into one corner. Rippling water light plays down both walls and across the glossy floor, with soft prismatic fringes, and there is no water anywhere. Touch the pointer to the unseen surface and slow rings spread; the caustics bend around them.
Duotone Plate Hero
duotone-plate-hero
A real two-colour separation via SVG filters — with the sRGB interpolation flag that everyone leaves out.
Dusk Set Footer
dusk-set-footer
A footer that sets like the sun: as it scrolls in, a grained halo sinks toward a hairline horizon, warming from gold through rose to ember, behind a giant italic serif wordmark.
Edge Invert Headline
edge-invert-headline
A caps headline that inverts exactly at the edges of the plates under it; drag a plate and the inversion follows 1:1, then snaps to a lattice cell, and on column 3, 6 or 9 the plate breaks by the rule.
Edge Sliver Poster Hero
edge-sliver-poster-hero
A saturated poster hero whose photographic sliver opens on hover, with live ticket tiers and a countdown.
Elastic Overscroll List
elastic-overscroll-list
Rubber-band overscroll with the real asymptotic curve, engaged only at the boundary.
Elastic Underline Nav
elastic-underline-nav
A nav underline that stretches with the distance it travels and settles back to width.
Ember Rest Footer
ember-rest-footer
A footer where the day ends: as it rises into view the room above the links, rendered live, loses its daylight, the lamp dims to an ember, and the whole footer goes from paper to night under a closing line.
Entry Edge Fill Button
entry-edge-fill-button
A fill that wipes in from the edge your pointer crossed and leaves by the one you exit — the label inverts letter by letter as the edge passes through it.
Expandable Search Bar
expandable-search-bar
A search icon that smoothly expands into a full text input on click.
Exploded View Section
exploded-view-section
The product taken apart live in WebGL2: its parts separate on a spring and each carries a callout pinned to it by a leader line re-projected from the 3D scene every frame, so labels stay on their part as it turns.
Extruded Spec Card
extruded-spec-card
A card holding a small machined dial built in CSS 3D: the card tilts toward the pointer and the dial turns to follow it one detent at a time, its copper marker lit, over a data-plate of specs.
Extruded Type Tilt
extruded-type-tilt
Display type with a solid extrusion that swings around as the pointer moves.
Fee Squeeze Pricing
fee-squeeze-pricing
Pricing as what you'd pay each month: drag your sales on a slider with a squashy thumb, and every plan's fee springs to its new height as a soft column that stretches thin in flight and squashes as it lands; the cheapest turns bubblegum.
Ferrofluid Spike Field
ferrofluid-spike-field
A black magnetic liquid seen across its surface, with a magnet under it that follows the pointer. The liquid heaves into a mound and erupts into a hexagonal bed of needle spikes that lean toward the magnet and sink back in its wake; a press surges it and sends a ring of spikes across the pool.
File Tree Explorer
file-tree-explorer
A recursive, collapsible file tree with real roving-tabindex arrow-key navigation.
File Upload Dropzone
file-upload-dropzone
A real drag-and-drop file zone with a live dragover state and file chips.
Filmstrip Silhouette Hero
filmstrip-silhouette-hero
A saturated field with a multiply-blended silhouette and a thumbnail strip that drives it.
Final Call Section
final-call-section
The closing spread of a trade site: an oversized two-tier ask cropped by the edge, a two-field enquiry line with one filled button, and a ledger of the four things customers ring to check.
Find Us Map Section
find-us-map-section
A street map printed in the shop's colour, the address set large, a live "Open until 18:00" readout in the shop's own time, the week's hours, nearby stations and one-tap directions — no API key.
Finish Tier Pricing
finish-tier-pricing
Pricing where each tier is a material shown on the product itself: the dial stands on a mirror floor in the chosen finish, changes material when you pick another tier, hops and clicks its ring round.
Fit Light Pricing
fit-light-pricing
Pricing driven by a usage slider on a log scale: every price rolls to its new digits as you drag, and a light moves to the plan that costs least at that volume, its arc growing as usage nears the next plan.
3D Flip Card
flip-card
A card that flips on a real Y-axis rotation to reveal a back face.
FLIP Grid Reorder
flip-grid-reorder
A filterable grid whose tiles travel to their new positions instead of snapping.
Flip Reveal Tiles
flip-reveal-tiles
A tile grid that flips on a diagonal wavefront to resolve into one image.
Floating Label Input
floating-label-input
A text input whose label floats from placeholder position into a caption on focus.
Flow Field Drift
flow-field-drift
Particles carried through a divergence-free curl-noise field, so the frame never drains into a few basins.
Flush Lineup Poster
flush-lineup-poster
A line-up set as a type poster: every name flush across the measure at one cap height, pointing clenches a name into the accent, choosing opens it, and day filters collapse the rest to hairlines.
Flush Pressure Hero
flush-pressure-hero
A first screen set as a type poster: the name in flush lines at one cap height, and the pointer presses weight, width and contrast into the letters near it while the rest condense so every line stays flush.
Flush Wordmark Footer
flush-wordmark-footer
A footer that ends the page in the face: a band of the glyph wave field carries a closing line, and the name stands flush across the width, rising from hairlines to full weight as the footer comes into view.
Form Error Summary
form-error-summary
The error pattern that actually works with a screen reader: focus the summary, link to the fields, punish late.
Fractal Noise Drift
fractal-noise-drift
GPU fractal noise drifting through a gradient light field, with no JS loop.
Fuzzy Match Input
fuzzy-match-input
Subsequence search that scores by run length and word starts, and highlights the hits.
Gift Voucher Composer
gift-voucher-composer
Pick an amount, write a line, and the voucher is on the table as you type — a perforated bond-paper ticket with the amount cropped by its own edge and a serial that never changes under you.
Glare Tilt Card
glare-tilt-card
A card that tilts toward the pointer with a true angular specular sweep.
Glass App Template
glass-app-template
A complete liquid-glass product page for a calendar app, where every glass surface shares one tint that adapts to the section under the nav as you scroll.
Glass Bento Wall
glass-bento-wall
A feature grid cut from one sheet of liquid glass: each tile is as thick as it is big, and one pointer light moves across every rim.
Glass Etch Text
glass-etch-text
Real, selectable heading text rendered as glass: a lit bevel, a graduated rim and a hairline colour fringe, raised or etched in.
Glass Focus Field
glass-focus-field
A liquid-glass input whose rim notices the pointer before focus, thickens outward from where you click, ripples from the caret with every keystroke and clouds its frost on an error.
Glass Morph Popover
glass-morph-popover
A popover that grows out of its button as a drop of liquid glass, stretches toward its place and settles flat, then drains back the same way.
Glass Pricing Tiers
glass-pricing-tiers
A pricing section where each plan is a thicker pane of glass than the last, and the plan you choose puts a lens over its price.
Glass Refraction Panel
glass-refraction-panel
A card of liquid glass: it bends its backdrop at the rim, with a graduated edge and a light that follows the pointer.
Glass Tint Footer
glass-tint-footer
A liquid-glass footer slab that rises over the section above as you scroll in, its meniscus edge sloshing on fast scrolls, with a pointer light, a droplet gliding between links and frost re-tinted to that section.
Glitch Text Hover
glitch-text-hover
An RGB-split, jittery glitch effect on text when you hover it.
Glyph Axis Stagger
glyph-axis-stagger
The kit's rebuild as a primitive: split any text into letters and spring each one between two settings of the face, a fixed delay apart, in the order you choose, on view, on hover or on command.
Glyph Wave Field
glyph-wave-field
A field of letters on canvas that behaves like water: drag the pointer and a wake of weight follows, tap and rings travel out, crests swelling to 900 in the accent and troughs thinning to hairlines.
Animated Gradient Border Beam
gradient-border-beam
A light beam that continuously travels around a card's border.
Grain Overlay
grain-overlay
A subtle animated film-grain texture layered over any section via canvas.
Gummy Pile Footer
gummy-pile-footer
A dark footer whose huge wordmark is a pile of gummy letters with weight: grab one and throw it, and it tumbles, bounces off the walls and the other letters, squashes where it lands and settles into a pile.
Gummy Type Input
gummy-type-input
An email field whose letters drop in and land: each typed letter falls from a little above, stretched as it falls and squashed as it lands, while the real input underneath keeps the caret, selection and autofill.
Hairline Morph Nav
hairline-morph-nav
A nav whose single hairline stretches toward the next link and settles under it: its leading edge runs ahead on a quick spring while its trailing edge follows on a slower one, and the active label steps up a weight without shifting.
Hairline Tile Button
hairline-tile-button
A button that behaves like a live bento grid: on hover it re-tiles into compartments along lit hairline seams, compresses toward your press, and its keycaps are a real keyboard shortcut.
Halftone Depth Field
halftone-depth-field
A rotated print screen that swells into a pool of light under the pointer, with the gamma actually done right.
Halo Concern Nav
halo-concern-nav
A floating nav in warm day glass whose Treatments menu opens by skin concern: a soft halo glides behind the concern you point at or arrow to, and its treatments resolve out of a blur beside it.
Halo Mesh Field
halo-mesh-field
A quiet WebGL field for the body of a page: two grained pools of colour drift across warm bone like light through tinted glass, and a warm lamp gathers under the pointer where you rest.
Halo Treatment Card
halo-treatment-card
A treatment card with a light well: a grained halo in the treatment's own colour rests low, then rises and blooms toward the pointer on hover or focus while the card lifts on a feathered shadow.
Hanging Label Input
hanging-label-input
A contact form whose numbered labels hang one gutter off the lattice and step into line in 160ms when you use the field; the third row breaks by the rule, and it only claims to send when it has a handler.
Hanging Quote Section
hanging-quote-section
A pull quote with the opening mark optically aligned — measured from the real glyph, not a guessed em value.
Headline Switch Hero
headline-switch-hero
The second line of the headline is the navigation: KITCHENS / BATHROOMS / LOFTS at headline size, and choosing one swaps the treated photo plate, the copy and the price.
Hide On Scroll Navbar
hide-on-scroll-navbar
A navbar that slides away on scroll-down and reappears on scroll-up.
Hold To Commit Button
hold-to-commit-button
A destructive action that requires sustained pressure, with a ring that fills on an ease-in curve.
Holo Cascade Hero
holo-cascade-hero
A scroll-driven hero in three acts: five iridescent glass cards fly in and land as a neat pile, scrolling opens the pile into a flip-book fan that leans back in real 3D, and scrolling on flies the camera into the fan while the headline lifts away. Every picture on the cards is ray-marched glass, painted in code.
Holo Foil Field
holo-foil-field
A full-bleed sheet of holographic chrome in WebGL: long draped folds reflect the kit's studio, every seam the horizon draws splits into a spectrum, and a thin film tints only the lit metal; tilting it with the pointer sweeps the colour.
Holo Gloss Site
holo-gloss-site
The complete Holo Gloss landing, told by the scroll: cards that open from a pile into a fan and are flown into, a dark room where the app slides through its cards, a bento whose tiles trade height, a word that pulls out of its own letter into the plans, a sign-up and a real footer. Branded viberdy; every word is a prop.
Holo Pill Nav
holo-pill-nav
A quiet header: the mark and wordmark left, one outlined glass pill right that fills from below on hover while an asterisk turns in beside the label. A tone prop flips it for dark sections.
Holo Plan Cards
holo-plan-cards
Three glass plan cards with holo faces, dealt out of a pile into a row as the section scrolls into view, the featured one ringed in cobalt and lifted. Each card is a real offer: price, cadence, four lines and one link.
Holo Ribbon Capture
holo-ribbon-capture
An email sign-up where two capsules of holo glass slide in from opposite edges, two cards drop from above and hang there swaying, and the form sits under the long ribbon with an asterisk that turns as you type, a Submit pill that darkens once there is something to send, and a line saying what the address is for.
Holo Site Footer
holo-site-footer
The close of a landing: a last call set big with a holo pill between its words and two buttons, then a footer with the mark, a one-line promise, three columns of real links and the copyright with a way back up.
Holo Ticket Card
holo-ticket-card
A tour date as a notched, perforated ticket whose stub carries the date in chrome numerals on a strip of holographic foil; it tilts toward the pointer while the foil's colour slides and a glare follows.
Horizon Light Footer
horizon-light-footer
A footer whose giant wordmark is lit from below by a horizon that is also a signal: a latency trace lit where the pointer is, with a request pulse that runs it every few seconds and lights the letters as it passes.
Hours Poster Section
hours-poster-section
Opening hours set as a poster — days hanging off the edge, closed rows struck through, today banded in the one accent — with an open/closed line on the shop's clock.
Expanding Panel Row
hover-expand-panels
A row of panels where the hovered one grows and its neighbours compress.
Link Peek Preview
hover-link-peek
An index list that floats a velocity-tilted preview card beside the pointer.
Hover Reveal Text Gallery
hover-reveal-text-gallery
A list of text rows, each hiding a photograph that wipes open under the cursor and follows it.
Slice Shear Hover
hover-slice-shear
Display type cut into horizontal bands that fan apart under the pointer.
Stroke Draw Button
hover-stroke-draw-button
A button whose outline draws itself around the shape on hover, at any size.
Image Comparison Slider
image-comparison-slider
A draggable before/after divider that reveals one image over another.
Index Overlay Menu
index-overlay-menu
A full-screen menu set like a printed index — numbered entries in heavy type, and a treated photo plate that wipes in the direction you travel.
Index Step Nav
index-step-nav
A numbered nav whose third item hangs one gutter below the bar on a contrasting plate by the rule, the bar's hairline dipping under it, and a tag that steps to the current item, or the one you point at, in four ticks.
Infinite Drag Canvas
infinite-drag-canvas
An endlessly pannable board that recycles a fixed set of tiles via modulo wrapping.
Infinite List Sentinel
infinite-list-sentinel
Sentinel-based pagination with the stall fixed — the bug where a short page leaves the sentinel on screen and loading stops.
Ink Aura Field
ink-aura-field
Dark water holding two inks: the pointer paints a pale ink through it as it passes, and a press drops cobalt that lands, blooms outward in a ring and curls into the first. A real GPU fluid with knobs for how far the ink travels, how much it ripples and how long it lingers.
Ink Bleed Reveal
ink-bleed-reveal
A photograph that arrives the way ink wicks into paper — an organic front spreading from a point, with a wet tide-line of ink running just ahead of it.
Ink Fluid Field
ink-fluid-field
A real Navier–Stokes fluid simulation on the GPU: your pointer drags luminous ink through dark water, and slow currents keep it alive when nobody is touching it.
Inline Editable Grid
inline-editable-grid
A keyboard-driven spreadsheet grid with roving-cell navigation and Excel-style Enter/Tab commits.
Intent Safe Menu
intent-safe-menu
A mega-menu that reads where the pointer is heading, so cutting the corner never steals the submenu.
Iridescent Foil Sweep
iridescent-foil-sweep
Hot-foil type that shifts colour under the pointer — Newton's series rather than a rainbow, translated rather than rotated.
Jelly Letter Hero
jelly-letter-hero
A first screen whose oversized headline is made of soft bodies: move through the letters and they dent, press one and it squashes with its area kept, drag it and it stretches after you, let go and it wobbles home.
Kanban Drag Columns
kanban-drag-columns
A mini kanban board where cards drag both within and across columns.
Keycap Button
keycap-button
A button machined like a keycap: a press drops the cap 6px as its skirt collapses, release springs it back past rest, a specular follows the pointer and a copper status light glows while it's held.
Keylight Field
keylight-field
A live studio sweep lit by one soft key light, and the light is the theme control: drag it for warmth and exposure, and every Ultra asset on the page retunes while text stays legible.
Keynote Bento Hero
keynote-bento-hero
A launch hero set like a keynote recap slide: one huge figure in a 2x2 tile, and a bento grid that assembles around it as the numbers count up.
Kinetic Stat Board
kinetic-stat-board
Metrics, deltas and sparklines that all count in together from one shared loop.
Kinetic Type Site
kinetic-type-site
The whole Kinetic Type kit as one festival site: a flush nav, a pressure poster hero, a glyph wave field, a scrolled manifesto, the programme, a flush line-up, rebuilding passes, a name badge and a rising footer.
Knockout Type Plate
knockout-type-plate
A headline that inverts the photograph beneath it, with a scrim that keeps it legible.
Lathe Story Scroll
lathe-story-scroll
A five-chapter scroll story that turns a single drawn line into a three-dimensional object: revolved, glazed, exploded into named parts and reassembled, with no three.js.
LED Room Chrome Field
led-room-chrome-field
A dozen drops of liquid metal hang in front of the page, and the page is a window. In the LED room, a white box lit by one strip of coloured light, moving the pointer shifts the walls like a real recess and two drops neck, fuse and part. Switch the material between pale iridescent chrome and dark mercury, and the backdrop between the room, a smooth colour gradient and a seamless dusk horizon. One hue control tints the strip, the room and the horizon.
Lenticular Print Shift
lenticular-print-shift
Two photographs interleaved in hard-edged strips that wipe between each other as the pointer crosses the plate.
Letterpress Light Type
letterpress-light-type
Type debossed into paper and lit by a real lighting model — the lamp follows your pointer, so every wall of every letter catches and loses the light.
Levitating Field Input
levitating-field-input
A real text input whose typed words hang above the field and cast a soft shadow on its lit shelf; focus lifts them higher and submitting lands them.
Levitating Link Nav
levitating-link-nav
A dark glass nav bar whose link labels hang in the air above a lit shelf, each over its own soft shadow; the link you point at, and the one for the section in view, lands.
Levitating Plan Cards
levitating-plan-cards
Three plan slabs that lift off a lit floor as the section arrives, each over its own soft shadow; the featured one rises highest and the pointer raises any slab higher.
Levitating School Hero
levitating-school-hero
A school of butterfly koi hangs in the dry air of a concrete room, inside one shaft of light. The water they belong to is held in the ceiling. The light draws caustics on the floor, and every fish casts its shadow through the beam. Rest the pointer and they come to look; click and they scatter.
Light Lift Card
light-lift-card
A card that lifts toward the pointer with shadows that behave like light: a two-degree tilt, an ambient shadow that widens and drifts away from the side that rose, a contact line that thins, and a plate of light at a colour temperature.
Line Mask Reveal
line-mask-reveal
Reveals text one line at a time, each sliding up from behind its own clipping mask.
Liquid Blob Cursor Follow
liquid-blob-cursor
A soft blurred blob that trails the cursor with spring-smoothed lag.
Liquid Chrome Site
liquid-chrome-site
A complete album and tour drop for a recording artist in molten chrome: a mercury nav, a WebGL chrome title on a mirror floor, a pour-to-play tracklist, a holographic foil statement, tour tickets cast in chrome, a spinnable vinyl pre-order, a rippling pre-save field and a pool footer.
Liquid Glass Button
liquid-glass-button
A pill of liquid glass that bends what is behind it: real refraction at the rim, a rim and sheen lit by your pointer, and a gel-like press.
Liquid Glass Switch
liquid-glass-switch
A toggle whose knob swells into a clear glass lens while you hold or drag it, magnifying the track beneath, then springs home solid.
Liquid Glass Tab Bar
liquid-glass-tab-bar
A floating glass tab bar whose selection is a droplet: press and drag and it swells, stretches as it travels, magnifies the tabs beneath and lands on the nearest one.
Liquid Lens Hero
liquid-lens-hero
A slab of liquid glass you drag across a vivid scene: the headline bends under its rim, colours split at the edge, and it wobbles like gel. Two WebGL passes, no libraries.
Liquid Metal Field
liquid-metal-field
Gooey metaball blobs that fuse and split as they drift, with a specular sheen.
Liquid Wallpaper Field
liquid-wallpaper-field
A slow WebGL wallpaper of folded silk layers on a seamless 60-second loop: vivid, calm, and sharp-edged enough for glass to bend.
Lit Dot Matrix Field
lit-dot-matrix-field
A WebGL dot matrix under one volumetric light cone that leans toward the pointer: dots inside the light rise in brightness and size and take on the accent.
Lit Rooms Membership
lit-rooms-membership
Memberships as three rooms along a corridor, each with its own grained lamp: point at one and its light rises while the others dim, and the billing switch resolves every price out of a blur.
Live Hours Nav
live-hours-nav
A small-business header that says whether the shop is open right now — computed in the shop's timezone, with overnight hours and split shifts handled.
Living Bento Grid
living-bento-grid
A dark bento feature grid that is a live system: tiles update on their own, catch a pointer light, reorder by drag or keyboard, and grow into a detail panel.
Logo Proof Hero
logo-proof-hero
A generous wordmark wall leads the hero, with a modest headline above it.
Lone Medusa Section
lone-medusa-section
One large jellyfish, centred low in a black void, lit only from inside. The bell is dark transparent glass with gonads, canals and frilled oral arms burning through it. Touch a tentacle and light runs up it to the bell; click and it jets upward and sinks back.
Magnetic Button
magnetic-button
A button whose label leans toward the cursor with a springy pull.
Magnetic Nav Dock
magnetic-nav-dock
A macOS-style dock where icons magnify based on real distance from the cursor.
Magnetic Tile Grid
magnetic-tile-grid
A tile field that leans toward the pointer and brightens with proximity.
Marbled Endpaper
marbled-endpaper
Paper marbling computed live on a canvas: two inks on unbleached paper, combed slowly into veins, with the pointer as the stylus and one accent drop the reader places by clicking.
Marker Highlight Text
marker-highlight-text
A felt-tip highlighter stroke with a ragged edge that draws itself behind a phrase when it scrolls into view.
3D Cylinder Marquee
marquee-cylinder-3d
Words on a rotating cylinder, with the radius derived from the face count.
Marquee Ticker
marquee-ticker
An infinite scrolling strip of words or logos that pauses when you hover it.
Masked Scroll Highlight
masked-scroll-highlight
Copy that resolves word by word as you scroll, mapped by real reading position rather than word index.
Masonry Image Hover Grid
masonry-image-hover-grid
A CSS-columns masonry gallery with a scale + caption reveal on hover.
Median Cut Palette Plate
median-cut-palette-plate
Pulls a genuinely distinct palette out of a photograph by median cut — splitting on channel spread, not on population, sorted by relative luminance.
Medusa Swarm Field
medusa-swarm-field
A bloom of tiny moon jellyfish in a near-black void, with no water in the picture: 600 by default, up to 2000 on the count prop, each one small and far like a bloom seen from a distance. The glass is colourless; the only colour is in the organs glowing inside. The swarm has read your page: it drifts around the content, keeps clear of it, and softly lights the words nearest to it. Move the pointer and a current runs through the bloom; click and a ring of it crosses the swarm.
Mercury Pour Nav
mercury-pour-nav
A floating nav whose current-link indicator is a capsule of mercury on two springs: it stretches thin as it pours to the next link, snaps back round, reaches toward the link you hover, and turns the labels it covers dark.
Metric Proof Tiles
metric-proof-tiles
A proof section set as bento tiles: 1x1 figures that count up once as they arrive, one accent tile that breaks the row, a quote, and a live figure that ticks slowly.
Mirror Pool Footer
mirror-pool-footer
A footer whose giant chrome wordmark stands on the waterline of a dark pool that mirrors it: a real wave simulation rings under the pointer and takes a drop every ten seconds, bending the reflection as it ripples.
Modern Minimal Site
modern-minimal-site
The whole Modern Minimal kit as one launch page for a wake light, one day long: night into morning in a scroll-scrubbed hero, the day through the middle, dusk in the footer, every value bound to the scroll with no easing.
Moiré Interference Field
moire-interference-field
Two stripe layers a fraction of a degree apart, generating a shifting fringe field under the cursor.
Molten Chrome Hero
molten-chrome-hero
A first screen whose title is molten chrome in WebGL: the lit room it reflects turns with the pointer, the metal swells toward it, fast moves and clicks send ripples through the letters, and it stands on a mirror floor.
Morning Light Field
morning-light-field
A background of morning light through a window, on paper: six panes of warm light fall across the wall with leaves moving slowly in them, rendered live, and the pointer turns the sun a little.
Morph Bento Grid
morph-bento-grid
A three-column bento of glass, frost and phone tiles that opens up with the scroll: the tiles assemble as it slides in, then the outer columns trade height in two diagonal beats. Each picture is pinned to its column's edge at full size, so a tile opening reveals more of it rather than stretching it, and the labels ride the moving edge. Numbers count up, phones scroll their screens, the app's carousel slides, foil sweeps through the pills and the frost over the 3D tile clears.
Morphing Command Nav
morphing-command-nav
A floating nav pill that grows into a command palette in place: the same surface morphs from pill to panel, results are grouped with a light that slides between them, and it shrinks back on Escape or a pick.
Morphing Hamburger Icon
morphing-hamburger-icon
A three-line menu icon that morphs smoothly into an X.
Morphing Island Notch
morphing-island-notch
A status pill that resizes itself fluidly around whatever content it holds.
Morphing Shape Loop
morphing-shape-loop
A decorative blob whose SVG outline continuously morphs between shapes.
Multi-Select Combobox
multi-select-combobox
A chip-and-search combobox with full keyboard control and a selection cap.
Multi-Step Form Flow
multi-step-form-flow
A validated wizard with per-step gating, an editable review step, and a real success state.
Name Badge Input
name-badge-input
A name field that sets your name on a pass as you type: each new letter lands loud in the accent and springs into place, a deleted one collapses to a hairline, and the name stays flush across the badge.
Nanobot Swarm Field
nanobot-swarm-field
Tens of thousands of tiny metallic micro-robots on black. They drift in calm murmurations, pack into a turning disc around your cursor with their status lights switching on, and a press calls them to assemble your text as a hexagonal lattice, hold it, and scatter. Each bot is an oriented capsule that glints when its heading catches the light.
Native Sheet Dialog
native-sheet-dialog
A sheet on the native dialog element — no hand-rolled focus trap, and the three things the platform leaves you fixed.
Neo-Brutal SaaS Template
neo-brutal-saas-template
A complete neo-brutalist landing page for a software product: a throwable card-pile hero, stamped feature table, customer quotes, punched changelog ledger, sticker pricing, FAQ and a hazard-tape footer.
Neon Tube Sign
neon-tube-sign
A neon sign that lights the wall behind it — glass tubes with a hot core, one tired letter that stutters, an ignition flicker, and a real on/off switch.
Nested Command Menu
nested-command-menu
A Cmd+K menu with real submenu drilling, a breadcrumb trail, and scoped per-level search.
Neural Pathway Field
neural-pathway-field
A still, grown piece of nervous tissue where thought runs as light. Neurons with tapered dendritic trees and long axons fire when enough signal arrives, sending bright pulses down the branches; your cursor stimulates the cells it passes, and a press sends a chain-reaction wave across the tissue.
Noise Fill Pricing
noise-fill-pricing
Pricing where volume fills a plane of dots in blue-noise order: drag the images a month and the dots light evenly with no clumps, the newly lit ones flashing signal, while the plan that covers it lights up.
Noise Gradient Canvas
noise-gradient-canvas
A slow-drifting colored noise wash rendered at low resolution and upscaled smooth.
404 Page
not-found-template
A centered 404 with a huge numeral, a human message, a home CTA, and a subtle grid backdrop.
Notification Center
notification-center-panel
A read/unread notification list with filtering, bulk actions, and a real empty state.
Peeking Toast Stack
notification-stack-peek
Toasts collapsed into a depth-scaled deck that fans out on hover.
Odometer Counter
odometer-counter
A stat number that rolls up from zero to its target the moment it's in view.
Offset Shadow Card
offset-shadow-card
A neo-brutalist card on a hard shadow: it lifts 2px on hover and lands on the shadow when pressed. A flat drawn motif or a photo, a punched price tag, a sticker badge, 3px ink throughout.
Offset Target Button
offset-target-button
A button whose label plate hangs off its hairline target along the grid's axis, reaches further and lights its bracket on hover or focus, and seats into the target in 120ms when you press it.
Onboarding Checklist
onboarding-checklist
An expandable setup checklist with a real derived progress bar and a completion state.
Optimistic Inline Commit
optimistic-inline-commit
An instant-feedback control with the parts everyone skips: request sequencing and a rollback that restores the right value.
Orb Depth Field
orb-depth-field
Floating orbs whose size, blur, opacity and speed all derive from one depth value.
Orbit Light Button
orbit-light-button
A dark pill whose border carries one light: it laps the outline slowly, glides to the nearest point of the border under the pointer and lights the surface from there, and a press sends a ring outward.
Orbit Product Hero
orbit-product-hero
A first screen with the product in it, raymarched live in WebGL2: drag the dial round, move across the hero to click its ring through detents, and switch its finish between titanium, ceramic and polymer.
Orbital Action Menu
orbital-action-menu
A radial menu that fans actions along an arc, evenly spaced at any count.
Ordered Dither Plate
ordered-dither-plate
A gradient quantised to a few tones by an 8x8 Bayer matrix — offset then quantised, dithered in linear light, one cell per device pixel.
OTP Code Input
otp-code-input
A one-time-code field whose cells survive SMS autofill, paste and Android backspace.
Overshoot Lattice Hero
overshoot-lattice-hero
A first screen on a drawn lattice whose caps headline breaks it by rule, and a plate you drag to any free cell: drop it on column 3, 6 or 9 and it overshoots, wears the bracket, and the hairlines bend to make room.
Page Loading Bar
page-loading-bar
An nprogress-style top-of-page bar that eases toward completion, never stalling.
Page Transition Wrapper
page-transition-wrapper
Wraps route content so it animates out and the next page animates in instead of swapping instantly.
Particle Assemble Text
particle-assemble-text
Particles sampled from the glyphs themselves, assembling into a word and scattering on hover.
Particle Galaxy Field
particle-galaxy-field
A full-bleed WebGL2 galaxy of up to ten million stars: a hollow ring of lit globes, braided threads and slow-breathing embers that you turn by dragging, while a sweep of the pointer flings stars out of the disk and a spring pulls each one back to its orbit.
Path Follow Scroll
path-follow-scroll
A marker that rides an SVG curve on scroll, banking through the bends.
Patina Dock
patina-dock
A command dock that wears in where it is used: habits animate less, brighten where you press, show their shortcut and move to the front on commit, and a readout says what changed.
Pedestal Footer
pedestal-footer
A footer where the product comes to rest: as it scrolls into view the dial floats down onto a mirror floor, its parts closing up as it lands, over a large wordmark lit from the object's key light.
Pendulum Menu
pendulum-menu
Menu items that hang from a rail and swing on real pendulum physics, nudging their neighbours.
Perspective Grid Floor
perspective-grid-floor
A tilted, endlessly scrolling grid floor that recedes toward the horizon.
Phone Room Section
phone-room-section
A rendered dark room slides up over the page and the app's phone rises into it; held on screen, the words come in one by one and the phone's card carousel and row of people slide along with the scroll. Two grey fork sculptures are the scroll cue: light runs down them, they bob, and a click moves the page on.
Physarum Vein Field
physarum-vein-field
A living transport network on black. Hundreds of thousands of slime-mould agents grow a luminous web of veins; your cursor is food, so the web reaches toward it, and a press plants a glowing node the network connects to with thick trunk veins before slowly letting go.
Pixel Dissolve Reveal
pixel-dissolve-reveal
A block-grid dissolve driven by a seeded shuffle, so it clears perfectly evenly.
Pointer Lit Card
pointer-lit-card
A card lit from the pointer: a bright arc of light on the hairline border, a softer wash across the surface, a two-degree tilt toward the pointer and a little counter-parallax on the content.
Pointer Parallax Scene
pointer-parallax-scene
A depth system where layers separate under the pointer from one shared motion source.
Pointer Warp Dot Field
pointer-warp-dot-field
A canvas dot grid that bulges and brightens away from the cursor.
Portfolio Page
portfolio-page-template
A personal portfolio with working discipline filters and a pointer-responsive work grid.
Pour Fill Heading
pour-fill-heading
A heading that starts as an empty mould and fills with liquid chrome as it scrolls into view, its surface a meniscus with a hot line of light that sloshes with scroll speed and settles.
Pour Tracklist Section
pour-tracklist-section
An album tracklist where each row is its own progress bar: liquid chrome pours across the row as the preview plays, the labels under the metal turn dark, and you scrub by dragging the row.
Pressure Signature Pad
pressure-signature-pad
A signature pad with real variable-width ink — pen pressure where it exists, velocity everywhere else, coalesced samples and midpoint quadratics.
Pricing Page
pricing-page-template
A pricing page that computes: seat slider, annual toggle and an expandable comparison matrix.
Pricing Toggle Switch
pricing-toggle-switch
A monthly/yearly billing switch with the price sliding to its new value.
Priority Plus Nav
priority-plus-nav
A nav that measures itself and collapses what does not fit into a More menu — ghost-row measurement, no breakpoints, no flicker loop.
Prism Beam Hero
prism-beam-hero
A raymarched glass prism on black: a white beam comes in from wherever your pointer is, a spectrum fans out the other side, and the prism turns once a minute. One shader, no libraries.
Product Shot Hero
product-shot-hero
A dominant framed app-window screenshot mock with the headline as a caption above it.
Program Curve Pricing
program-curve-pricing
Pricing beside the product's sunrise programs: pick gentle, standard or brisk and its curve morphs on a spring while the lamp, rendered live in a dark room, plays that sunrise in six seconds, next to the plans.
Progress Arc Gauge
progress-arc-gauge
An SVG arc gauge with a needle and a readout that counts to its value.
Circular Progress Ring
progress-ring
An SVG progress ring whose fill and centered percentage count up together on scroll into view.
Puffer Quilt Field
puffer-quilt-field
A background of diamond-quilted puffer you can press: a pillow sinks under your finger while the four around it puff up with the stuffing it lost, then everything springs back, rendered live in WebGL2.
Punch Card Field
punch-card-field
A background of 80-column punch cards whose holes spell real text in Hollerith code. Holes are punched in column by column on arrival; point at a column to decode it.
Pushed Shadow Button
pushed-shadow-button
A neo-brutalist button on a hard 5px shadow: hover lifts it 2px, a press lands it exactly on its shadow. 3px ink everywhere, 100ms linear, no blur.
Draggable Range Slider
range-slider
A custom-styled slider with a drag handle and a value tooltip while dragging.
Reaction Diffusion Plate
reaction-diffusion-plate
A live Gray-Scott solver as a background plate — coral, mitosis and maze are the same two equations at different feed and kill rates.
Reeded Glass Field
reeded-glass-field
A pane of fluted glass standing in front of a hidden light. The pointer drags the light behind it, and every rib refracts its own sliver, so the light reads as a comb of luminous shards that slide from rib to rib. A press sends a ripple of curvature through the glass.
Reflow States Section
reflow-states-section
A pinned section that re-lays four modules into three layouts at scroll checkpoints, all at once in 380ms, and since each layout orders them differently the rule's break passes to the new third, overlapping its left-hand neighbour.
Resizable Split Pane
resizable-split-pane
A split view with pointer capture, pixel minimums resolved against real width, and a separator you can actually tab to.
Ringed Planet Field
ringed-planet-field
A full-bleed WebGL2 gas giant hanging in black, wearing a ring system of up to ten million particles: a crisp terminator, an accent rim on the lit limb, the rings' shadow across the planet and the planet's shadow across the rings. Drag to orbit, sweep to fling ring particles out of the plane, tap the planet to send a ripple through the rings.
Ripple Click Effect
ripple-click-effect
A Material-style ripple that expands from the exact click point.
Ripple Roll Button
ripple-roll-button
A label that rolls letter by letter to a second copy, rippling outward from wherever your pointer came in — and settling back toward where it left.
Rotating Seal Badge
rotating-seal-badge
A round seal — the phrase fitted exactly around the circle with drawn dot separators — that turns once every 24 seconds, eases to a stop on hover, and is the link.
Rotating Word Swap Headline
rotating-word-swap
A headline where one word auto-cycles with a vertical odometer-style swap.
Rule Handoff Flip
rule-handoff-flip
The kit's rule for any list: items become plates on the lattice and every third breaks; filter, sort or add and everything moves from where it was in 380ms while the break passes to whichever item is now third.
Run-off Wordmark Footer
run-off-wordmark-footer
The closing anchor: the full lattice again, link columns under the rule (the third breaks onto a paper plate with the bracket), and the studio's name fitted to run two gutters past the right edge, whatever the name.
SaaS Landing Page
saas-landing-template
A full marketing landing page: nav, hero, logo band, feature grid, and footer.
Scramble Text
scramble-text
Text that decodes from random characters into its real word on hover.
Scroll Card Deal
scroll-card-deal
A pile of cards that fans out symmetrically as its section crosses the viewport.
Scroll Depth Layers
scroll-depth-layers
A parallax scene where every layer derives from one shared scroll source.
Scroll-Linked Image Mask Reveal
scroll-linked-image-mask-reveal
An image whose circular clip-path mask grows and shrinks in lockstep with scroll.
Scroll Velocity Skew
scroll-velocity-skew
Skews its content based on how fast the page is being scrolled, relaxing back to flat at rest.
Scrub Mask Reveal
scrub-mask-reveal
A plate that opens exactly with the scroll: its rounded frame widens from a fifth in on each side to full while the picture inside eases the other way so it seems to stay still, bound with no easing, with a hairline that fills.
Scrub Number Field
scrub-number-field
A numeric input whose label you drag to scrub, with pointer lock and precision modifiers.
Scrub Timeline Player
scrub-timeline-player
A media scrubber with buffered range, hover timestamp and pointer-capture dragging.
Seam Reveal Hero
seam-reveal-hero
A before-and-after hero with no handle: the seam is wherever your pointer is, eased like a curtain, and the colour arrives with the work.
Searchable FAQ Accordion
searchable-faq-accordion
A filterable FAQ list where each answer expands independently.
Seeded Identity Mark
seeded-identity-mark
Turns any string into a symmetric geometric logo that is byte-identical on every render, forever.
Segmented Control
segmented-control
An iOS-style pill switch whose highlight slides between options.
Segmented Morph Toggle
segmented-morph-toggle
A segmented control where only the selected option expands to its label.
Selection Annotate Toolbar
selection-annotate-toolbar
A toolbar that follows a text selection and highlights ranges without touching the DOM.
Service Price Ledger
service-price-ledger
A price list set like a printed menu — baseline dot leaders, tabular prices, a Book link per row — beside a photo plate that follows hover, focus, or on phones the row mid-screen.
Seventeen — Creative Studio
seventeen-studio-site
A print-spread studio site where photographs crop into a giant numeral and sit inline inside the sentence.
Shadow Shoal Footer
shadow-shoal-footer
A footer that is a concrete floor lit edge to edge by water light from a ceiling you cannot see, with rounded top corners. Sharks pass through it, in every direction, and there are no sharks, only their shadows. They swim like real animals: they can only move along their heading. A resting pointer is noticed and avoided or inspected, a click makes them bolt away smoothly, and hovering a link slows the nearest one. Switch to butterfly koi if you prefer.
Share Button Expand
share-button-expand
A share icon that expands into a row of social options with a copy-link state.
Shortcut Recorder Field
shortcut-recorder-field
Records a keyboard chord by physical key position, and refuses the ones the browser owns.
Signal Field
signal-field
A machined dot grid lit by slow waves of light, with a pointer lens and click ripples.
Six Values Scroll
six-values-scroll
A pinned section that plays one specimen card through each of the six values in turn, with a lit ledger saying what each one changes.
Skeleton Shimmer Loader
skeleton-shimmer
Loading-state placeholder blocks with a light sweep animating across them.
Slab Stack Hero
slab-stack-hero
A neo-brutalist first screen: a slab headline beside a pile of hard-shadow cards you can grab and throw. Thrown cards fly off and cut to the bottom; the rest step up. Nothing eases.
Slit Light Heading
slit-light-heading
A heading lit by a narrow slit of light that crosses it as it scrolls into view: letters under the slit burn white, letters it has passed stay lit, letters ahead wait in the dark.
Soft Form Field
soft-form-field
A background of soft forms raymarched live in WebGL2: rounded cubes, capsules and rings in ceramic, titanium and polymer drift, melt into one another where they meet and part around the pointer.
Soft Glow Button
soft-glow-button
A pill with a grained light inside it that follows the pointer with a slow settle, a diffused bloom that rises behind it, and a press that exhales a soft ring of light.
Sparkline Scrub Cell
sparkline-scrub-cell
An inline micro-chart you sweep to read exact values, with monotone interpolation that never invents a peak.
Spatial 3D Site
spatial-3d-site
The whole Spatial 3D kit as one hardware launch: a curved rail nav, the product live in the hero, a field of soft forms, the product taken apart, profile cards, pricing by material, a dial input and a pedestal footer.
Spec Ledger Section
spec-ledger-section
A dense spec table with real header association, a focusable scroll region, and a sticky head that keeps its rule.
Spec Numeral Tile
spec-numeral-tile
A big bold numeral in a spec-sheet voice whose digits roll into place like an odometer, set in a hairline bento tile.
Specular Text Sweep
specular-text-sweep
A light band travelling inside the glyphs, clipped to the text so only ink lights up.
Split Flap Board
split-flap-board
A real Solari departure board — four layers and a hinge, with reels that land apart because they travel different distances.
Split Screen Hero
split-screen-hero
A copy-left, product-right split with a floating stacked dashboard card.
Spotlight Follow Background
spotlight-follow-background
A full-bleed radial glow that tracks the cursor with zero re-renders.
Spotlight Card Grid
spotlight-grid
A card grid with a soft red spotlight that follows the cursor across it.
Spotlight List Focus
spotlight-list-focus
A list that dims and blurs every row except the one under the pointer.
Squash Press Button
squash-press-button
A pill that squashes under your finger and pops back: it sinks onto its base where you press, deeper the longer you hold, keeps its area as it squashes, and springs back with one overshoot while its tinted shadows collapse and return.
Squish Flip
squish-flip
A list whose items squash and stretch as they move: reorder, filter or add and each item travels to its new place stretched along its path by its speed, squashes as it lands, and settles; new items pop in.
Squish Letter Heading
squish-letter-heading
A heading whose letters squash under the pointer and push their neighbours up: each letter keeps its area as it squashes, springs back with one overshoot, and the line ripples behind the pointer before settling to crisp type.
Stacked Type Hero
stacked-type-hero
Oversized, tightly-stacked headline words that reveal in on mount — big type as sculpture.
Stagger Reveal Group
stagger-reveal-group
A wrapper that reveals its children one after another as the group scrolls into view.
Stamped Feature Grid
stamped-feature-grid
Features in an exposed table with A1 coordinates. As each row scrolls in, its cells are stamped on left to right: a black slab wipes across in hard steps, then the cell prints.
Interactive Star Rating
star-rating-interactive
A 5-star rating control with hover preview and a springy fill pop.
Star System Section
star-system-section
A WebGL2 page section where everything orbits one core: a glass core with a light breathing inside it, and each of your items a planet on its own orbit of braided star dust, with real, keyboard-reachable labels that light the planet, its lane and a detail card.
Starfield Parallax
starfield-parallax
A three-depth-layer field of drifting, twinkling stars with true parallax speed.
Sticker Peel Steps
sticker-peel-steps
How it works as three stickers you peel: pull from a corner and each one curls back around a real fold with its paper liner showing, a shadow growing under the flap; past halfway it comes off and reveals the picture underneath.
Sticker Pricing Section
sticker-pricing-section
Neo-brutalist pricing where each price is a label stuck on its card at a tilt. A monthly or yearly switch changes every price in one frame; the featured plan sits higher on a deeper shadow.
Sticky Index Section
sticky-index-section
An editorial index with sticky year headers, and a switch that demonstrates the overflow ancestor that breaks them.
Sticky Scroll Stack
sticky-scroll-stack
Cards that pin and stack on top of each other as you scroll past.
Sundial Shadow Heading
sundial-shadow-heading
A heading whose letters cast soft shadows that swing like a sundial as the page scrolls: the sun crosses with the scroll, the long shadows turn from right to left, and a faint warm band of light slides across the ink.
Swatch Fan Deck
swatch-fan-deck
A fan deck of paint chips that spreads in your hand on hover or focus — a real radio group, with arrow keys and the colour's name, not its hex.
Swipe Card Stack
swipe-card-stack
A draggable deck of cards you flick away to cycle through, Tinder-style.
Tactile Maximalism Site
tactile-maximalism-site
The whole Tactile Maximalism kit as one launch page for a creator-commerce platform: a jelly headline, peelable stickers, soft pricing columns, a quilted waitlist and a footer of gummy letters you can throw.
Taffy Pill Nav
taffy-pill-nav
A floating pill nav whose bubblegum marker stretches like taffy to the link you choose: long and thin in flight, short and fat as it lands, with the labels turning paper exactly where it covers them.
Terminal Demo Hero
terminal-demo-hero
A staged terminal window as the hero's centerpiece, typed command and streaming output.
Testimonial Carousel
testimonial-carousel
An auto-advancing quote carousel with directional slide transitions.
Text Mask Media Reveal
text-mask-media-reveal
Type used as a mask so imagery moves inside the letterforms.
Theme Toggle Sun Moon Morph
theme-toggle-sun-moon-morph
A track+thumb switch whose icon morphs between a sun and a crescent moon.
Third Plate Pricing
third-plate-pricing
Engagements as plates on the lattice: an intro with a Project / Retainer toggle, then three plans; flip the toggle and the plans re-order in 380ms, the prices change, and the rule's break passes to the new third.
Thumb Action Dock
thumb-action-dock
A phone bottom bar with Call, Directions and Book — that appears once the hero's CTA has gone, and steps aside for the footer, a focused field and the keyboard.
Ticker Tape Background
ticker-tape-background
Oversized, near-invisible ticker rows scrolling behind the fold as ambient texture.
Tile Expand Panel
tile-expand-panel
A primitive that grows any bento tile into a full panel: the panel opens from the tile's own rectangle while its cover, title and figure fly across to their new places.
Tilt Card
tilt-card
A 3D card that tilts toward the cursor with spring physics.
Toast Notification Stack
toast-stack
A queue of toast notifications that stack, reflow, and auto-dismiss independently.
Topographic Contour Drift
topographic-contour-drift
A survey map of terrain that never existed, traced live with marching squares and drifting underfoot.
Transform Compare Section
transform-compare-section
One source through every transform, split by a wipe you drag: a raymarched still life on the left, and on the right true Atkinson or Floyd–Steinberg diffusion, blue noise, Bayer, halftone or shape-matched ASCII.
Transform Loupe Hero
transform-loupe-hero
A first screen whose picture is computed live: a plane of spheres under a low sun, printed in blue-noise dither, with a loupe under the pointer that shows it as shape-matched ASCII, a halftone screen, Bayer or the source.
Tuning Prism Hero
tuning-prism-hero
A first screen whose glass prism is the reader's own six values: it turns to face them as they scroll, splits the light into a spectrum, and its values draw out as chips they can pull to retune the page.
Type Specimen Hero
type-specimen-hero
A magazine-cover hero where the photograph inverts through the letterforms, pinned to its own stacking context.
Typewriter Text
typewriter-text
Text that types itself out character by character, then cycles to the next phrase.
Ultra Pill Nav
ultra-pill-nav
A floating glass pill nav that tightens as the page scrolls, with the Aura Dial in it: press U and every Ultra part of the page retunes.
Ultra Plan Cards
ultra-plan-cards
Three glass plan cards dealt in by the scroll, with a real monthly and yearly switch; the featured one wears a slowly turning ring of the six values' colours.
Ultra Site
ultra-site
The whole Ultra page, told by the scroll: a glass prism of the reader's own values, a specimen played value by value, a light you set, tools that learn, plans and a footer, all retuned by one shared dial.
Ultra Site Footer
ultra-site-footer
A footer whose huge closing line gets bolder as the reader turns contrast up, with their own six values drawn as a hexagon they can reset.
Undo Commit Toast
undo-commit-toast
An undo window that defers the action instead of reversing it, and pauses when you tab toward the button.
Usage Pricing Calculator
usage-pricing-calculator
A live estimator with real marginal-tier overage pricing and an annual discount toggle.
Variable Blur Scrim
variable-blur-scrim
A scrim whose blur ramps instead of switching on — stacked backdrop-filter layers at doubling radii with overlapping masks.
Veil Resolve Heading
veil-resolve-heading
A serif heading that arrives out of soft light: each word condenses from a blur into focus with an 80ms stagger while a glow blooms behind the words and fades as they sharpen.
Velocity Marquee Rail
velocity-marquee-rail
A marquee that accelerates with scroll speed and flips direction when you scroll back.
Venetian Blind Slideshow
venetian-blind-slideshow
A hero slideshow whose photographs change like venetian blinds turning — slats flip in a staggered cascade, with the dark frame showing through as they go edge-on.
Verlet Cloth Banner
verlet-cloth-banner
A banner hanging from its fixings as real Verlet cloth — previous-position integration, relaxation passes and a fixed timestep behind an accumulator.
Vertical Timeline Reveal
vertical-timeline-reveal
A scroll-triggered vertical timeline whose dots and cards reveal in sequence.
Video Backdrop Hero
video-backdrop-hero
A cinematic full-bleed motion backdrop, built entirely from CSS and Framer Motion.
View Timeline Reveal
view-timeline-reveal
Scroll reveals on a real CSS view timeline — off the main thread, and visible by default where it is not supported.
Waitlist Capture Hero
waitlist-capture-hero
A waitlist hero that actually captures: validation, pending, success and queue position.
Waitlist Page
waitlist-page-template
A single-purpose pre-launch page: headline, email capture form, and a joined-count signal.
Wake Time Wheel
wake-time-wheel
Set the alarm on a pair of wheels: hours and minutes are snap-scrolling columns with momentum whose rows turn away in perspective around a lens, each a keyboard spinbutton, with the time the sunrise starts beneath.
Warning Tape Footer
warning-tape-footer
A neo-brutalist footer under a strip of hazard tape you can grab and throw on its slow 48-second crawl, a sign-up that stamps the tape, and a giant wordmark whose letters press down onto their own ink plates.
Wave Ribbon Band
wave-ribbon-band
Layered SVG line-work flowing from two incommensurable sine waves.
Weight Press Button
weight-press-button
A button whose press you can see in its type: hover and the label thickens as the button lifts; press and it goes bold under your finger while the button sinks and its shadow collapses to the contact line, then springs back.
Weight Slam Text
weight-slam-text
Display type whose weight slams instead of easing: letters jump 400 → 650 → 900 in two hard steps, left to right like a row of stamps, and let go in three.
Weight Wave Text
weight-wave-text
Per-character variable font weight that swells around the pointer and drifts when idle.
Whiplash Letters
whiplash-letters
A headline whose letters follow the cursor as a spring chain — crisp at the head, loose at the tail.
Widget Reorder Input
widget-reorder-input
A "customise your dashboard" panel: drag or keyboard reorder, show and hide switches, a live miniature of the result, and save, cancel and reset.
Window Light Drift
window-light-drift
Afternoon sun through a window, crossing a plaster wall over ninety seconds — and your pointer casts a shadow in it.
Wobble Drop Card
wobble-drop-card
A release card that leans toward the pointer on a soft spring while the sticker on its corner follows through, swinging the other way and jiggling to a stop; press it and the card squashes onto its base and pops back.
Word Mask Section
word-mask-section
Opens on a rendered concrete set with the app on two phones; on scroll the camera pulls out of the inside of the letter "i" and the whole set turns out to be inside a giant word, which then slides across the screen into the next section.
Word Wheel Cylinder
word-wheel-cylinder
A rotating word wheel built on a real cylinder — derived radius, accumulated rotation, no backwards spin on the wrap.
Yielding Hairline Field
yielding-hairline-field
A background that is the lattice itself: twelve-column hairlines with crosses where they meet, bending one gutter around every module the rule breaks and leaning away from the pointer, drawn on a canvas that sleeps when still.
Z-Swap Plate Card
z-swap-plate-card
A work card on the lattice: every third in a run breaks by the rule, two gutters out with the bracket, and hovering the card it overlaps lifts that card above it, the bracket going with the lift, in 240ms.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information