❍Index

Components

51 components. Copy-paste ready, shadcn-compatible.

Backgrounds

Warp Grid Background

Warp Grid BackgroundCanvas grid vertices displaced by evolving value noise — drifts continuously, or warps locally around the cursor.

003phosphor-sweep

Phosphor Sweep Background

Phosphor Sweep BackgroundRotating beam sweeps a dot grid, leaving dots to fade with phosphor-persistence decay.

Flow Field Background

Flow Field BackgroundCurl noise vector field rendered as dense directional strokes — cursor parts the flow.

005dither-spotlight

Dither Spotlight

Dither SpotlightA WebGL cursor spotlight rendered as ordered halftone dots instead of a soft glow.

Aurora VeilAn aurora borealis background — noise-driven light curtains ripple and fold across the sky over twinkling stars; on light themes the same curtains render as soft pigment veils.

029autumn-drift

Autumn DriftA gnarled tree on a rocky outcrop in full fall color, swaying in wind and shedding leaves — the cursor is a gust that scatters them.

046wireframe-terrain

Wireframe Terrain

Wireframe TerrainAn endless flight over wireframe mountains — perspective-projected ridge lines scroll toward the camera and dissolve into fog at the horizon, with a calm valley down the middle for your content.

Liquid SilkA WebGL sheet of ink-coloured fabric that folds and flows in slow motion, threads of light riding the creases — a quiet full-bleed backdrop for landing pages.

049grain-gradient

Grain GradientThree pools of colour drift and breathe across the page under a layer of film grain, mixed into the theme's own background — works on paper and on night.

051sakura-drift

Sakura DriftA gnarled cherry blossom tree on a rocky outcrop, swaying in wind and shedding petals — the cursor is a gust that scatters them.

Text

010combination-text

Combination Text

Combination TextA mechanical combination lock that spins through characters to form words.

015particle-word

Particle WordA word sampled into thousands of ink particles that spring-assemble on mount, drift with organic noise, and scatter away from the cursor.

027odometer-number

Odometer Number

Odometer NumberAn odometer for stats and prices — each digit is a rolling column that springs to its target with a mechanical overshoot, left to right.

001encrypted-text

Encrypted Text Reveal

Encrypted Text RevealCharacters scramble through random glyphs then resolve to the final text on scroll.

011springy-text

Springy TextWords fall into place with individual spring physics on scroll enter, drop away downward on exit.

Split FlapA split-flap departure board — each character is a mechanical flap module that clatters forward through the alphabet until it lands on its target.

Buttons

006depth-button

Depth ButtonA tactile raised button with a fixed depth base — lifts on hover, snaps down on press.

008magnetic-button

Magnetic Button

Magnetic ButtonA button that translates toward the cursor with spring physics, with the label counter-drifting to create a sense of mass.

Tilt ButtonA 3D button that tilts in perspective toward the cursor with a spring snap on press.

Hold ButtonA hold-to-confirm button — press and keep pressing while ink floods across the label; let go early and it snaps back, hold to the end and it commits with a pop.

Navigation

021fisheye-dock

Fisheye DockA macOS-style dock — icons swell under the cursor with a fisheye falloff, neighbours rising in sympathy, labels popping above on hover.

020spring-accordion

Spring Accordion

Spring AccordionAn editorial accordion — spring-driven height, answers that rise out of a blur, and an index numeral that ignites on open.

033expanding-panels

Expanding Panels

Expanding PanelsAn editorial menu of numbered columns — hover one and it blooms into a full-height accent panel with its content, while the others compress into slim rails with vertical titles.

Scroll

Word RevealA paragraph that reveals word-by-word as it scrolls through the viewport — ink rising to full strength, scrubbed directly to scroll position.

016velocity-band

Velocity BandA typographic marquee whose drift speed and skew react to scroll velocity — rows alternate direction and lean into hard scrolls.

032ink-timeline

Ink TimelineA process timeline drawn in ink — the rail fills as you scroll, and each step ignites the moment its dot crosses the center of the viewport.

Displays

Matrix HeroFull-width hero section with cascading matrix rain and centered green-phosphor glow text.

009kinetic-wall

Kinetic WallA grid of miniature analog clocks whose hands choreograph to spell words — inspired by kinetic clock installations.

013specimen-carousel

Specimen Carousel

Specimen CarouselAn editorial carousel for type, product, or archive specimens with numbered tabs and hard snap motion.

034isometric-stack

Isometric Stack

Isometric StackAn exploded isometric layer diagram for architecture and platform sections — extruded plates hover apart on staggered springs, and a leader-line label ignites beside each layer.

035isometric-cubes

Isometric Cubes

Isometric CubesAn isometric cube field — a wave rolls diagonally through the grid while cubes near the cursor rise to meet it. A compute-grid illustration for bento cards.

036isometric-bars

Isometric BarsAn isometric bar chart illustration — extruded bars grow out of a plinth on staggered springs when scrolled into view, with live value counters riding their tops.

037isometric-network

Isometric Network

Isometric NetworkAn isometric network plate — pin nodes on an extruded slab, connected by lifted arcs with pulses travelling from the hub outward.

038isometric-conveyor

Isometric Conveyor

Isometric ConveyorAn isometric conveyor — raw blocks ride the belt, pass under the gate, and come out the other side wearing the accent. A pipeline / ETL illustration.

050isometric-press

Isometric Press

Isometric PressA tiny isometric printing press — blank sheets glide along the bed, the press stamps down, and each page slides out carrying fresh ink to the delivery pile.

044misprint-hero

Misprint HeroA hero headline printed as three colour-separation plates that fly in misregistered and spring into register — the cursor pulls the print slightly out of true again.

045woodblock-hero

Woodblock HeroA woodblock-print sunrise hero — vermillion sun rising behind layered indigo hills, paper-coloured mist between the ridges, and gentle depth parallax as the cursor moves.

Ink CrowdA procedural canvas crowd for hero sections — tiny ink figures stroll through parallax lanes with hats, multicoloured umbrellas, and multicoloured balloons.

039rope-marquee

Rope MarqueeA marquee strung on a real rope — type flows along a verlet-simulated line you can grab, yank, and pluck while it sways back into its swags.

Cards

Toss DeckA card deck with weight — drag the top card past the threshold and it flies off with a spin, then slips back under the pile.

025depth-gallery

Depth GalleryA scroll-scrubbed Z-flythrough — plates hang scattered in 3D space and the scrollbar is the dolly; far plates loom out of the fog, near ones sweep past the camera.

Card FanA hand of cards fanned in an arc — hover one and it straightens and rises out of the fan while its neighbours part in sympathy.

031ring-gallery

Ring GalleryA 3D carousel ring — cards stand on an invisible cylinder; drag to spin it with real inertia, let go and it coasts, idle and it slowly revolves.

Splay CardsA leaning rack of 3D plates — hover one and the stack splays open, the chosen plate turning to face you while its title takes over the caption line.

AI

018prompt-composer

AI Input IAn editorial AI chat input — attachment dropdown for images and documents, web-search and deep-think toggles, a model selector, and a live character counter.

019orbit-composer

AI Input IIA rounded, motion-driven AI chat input — springy attachment menu with inline image previews, toggle pills that expand their label when active, a model selector, and a send button ringed by a character-usage orbit.

022streaming-text

Streaming TextAn AI-response text renderer — tokens materialize out of a blur at stream pace, trailed by a blinking caret that vanishes on completion.

Voice OrbA voice-assistant orb of concentric wobbling rings — idle breathes, listening reacts to amplitude, thinking swirls, and speaking folds the rings into a rotating wireframe sphere.

Widgets

014mechanical-keyboard

Mechanical Keyboard

Mechanical KeyboardFull Mac keyboard with tactile depth-button keycaps — lifts on hover, snaps on press, plays synthesised mechanical click sounds.

026gravity-tags

Gravity TagsA physics playground for tags — chips rain in from above, land as capsule bodies, pile up, and can be grabbed and thrown with real inertia.

041lanyard-badge

Lanyard BadgeA badge dangling from a lanyard with real rope physics — grab it, throw it, and it swings on a verlet-simulated strap until it settles.