The Lab.
Open one, play with it, see how it behaves. Every piece here is something I can build into your site.
Command Console (Cmd-K)
Keyboard-driven command palette with fuzzy filtering, grouped results, and full ARIA compliance — opens globally on ⌘K.
Number Ticker
Animated count-up that rolls a number to its target when scrolled into view, with thousands separators, decimals, and prefix/suffix.
Marquee
Seamless infinite-scrolling row of content with configurable speed, direction, gap, and pause‑on‑hover — edge-faded into the frame.
Magnetic Button
A button that attracts toward the cursor within a configurable radius and springs back on leave — a tactile pointer micro-interaction.
Scramble Heading
A heading that decodes from random glyphs into its final text on reveal — a rAF character-swap effect with a configurable glyph pool.
Tilt Card
A card that tilts in 3D toward the pointer with an optional radial spotlight that tracks the cursor — resets smoothly on leave.
Bento Grid
A responsive asymmetric bento layout whose tiles stagger-fade into view — varied column/row spans from a typed item list.
Reveal Gallery
A responsive card gallery whose tiles fade, rise, and unclip into view with a staggered GSAP ScrollTrigger reveal.
Dock
A macOS-style dock whose square tiles magnify by their horizontal distance to the pointer with spring physics, neighbours scaling less, and a tooltip above the hovered tile.
Magnetic Cursor
A container-scoped custom cursor that hides the native pointer and renders an instant dot plus a lagging spring ring that grows over marked targets.
Sticky Feature
A two-column feature showcase whose panel pins via GSAP ScrollTrigger while a tall step stack scrolls past, advancing and highlighting the active step.
Aurora Background
An animated aurora background of heavily-blurred, screen-blended gradient blobs that slowly drift behind your content on an infinite Motion loop.
Image Compare
A before/after comparison slider that wipes a clip-path divider between two stacked layers via a draggable, keyboard-accessible handle.
Animated Tabs
A tab bar whose active underline (or pill) and hover pill glide between items with a shared-layout (layoutId) FLIP transition. Controlled or uncontrolled.
Text Shimmer
A heading with a soft highlight that sweeps continuously across the glyphs via a gradient clipped to the text.
Scroll Progress
A reading-progress bar whose origin-left scaleX fills as a target scrolls, spring-smoothed by default.
Typewriter
Types, holds, and deletes its way through a rotating list of phrases with a blinking cursor.
Spotlight Card
A flat card whose surface glows under a radial spotlight that tracks the cursor, fading in on enter and out on leave.
Testimonial Carousel
A stacked photo-deck that springs between speakers via AnimatePresence while the synced quote cross-fades, with autoplay and prev/next controls.
Animated Beam
An SVG connector diagram where bright accent pulses travel along orthogonal wires between node junctions, staggered down the paths so beams fire in sequence.
Dot Grid
A DPR-crisp canvas dot grid whose dots glow and scale toward the cursor, with click ripples propagating outward and a faint idle breathing.
Flip Card
A card that rotates in 3D around its Y axis on hover or focus to reveal a distinct back face.