❍Index

❍ Catalogue

Components

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

Backgrounds

Warp Grid Background

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

Phosphor Sweep Background

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

Flow Field Background

Curl noise vector field rendered as dense directional strokes — cursor parts the flow.

Dither Spotlight

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

Buttons

Depth Button

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

Magnetic Button

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

Text

Encrypted Text Reveal

Characters scramble through random glyphs then resolve to the final text on scroll.

Combination Text

A mechanical combination lock that spins through characters to form words.

Springy Text

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

Move your cursor through the word

Particle Word

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

Word Reveal

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

Display

Clock hands align to form letterforms

Kinetic Wall

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

Matrix Hero

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

Specimen Carousel

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

Velocity Band

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

Interactive

Mechanical Keyboard

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

Spring Accordion

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

Fisheye Dock

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

AI

AI Input I

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

AI Input II

A 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.