Component Registry

A personal collection of UI animations, scroll effects, Lottie integrations, and 3D components — ready to preview, copy, or install via the shadcn CLI.

Animated Button

Hover/press micro-interaction button built with motion.

Word-by-word staggered entrance animation for headings and copy.

Modal Transition

Animated dialog with fade/scale transitions via AnimatePresence, built on top of Animated Button.

Scroll & Timeline

Scroll Fade Section

Fades and rises a section into view as it scrolls in, powered by GSAP ScrollTrigger.

Scroll & Timeline

Scroll Parallax Image

Scroll-scrubbed parallax effect for images, powered by GSAP ScrollTrigger.

Lottie Hover Player

Plays a Lottie animation on hover and stops on mouse leave.

Lottie Playback Controls

Play/pause and restart controls for a Lottie animation.

Rotating Hero Scene

A floating, auto-rotating 3D torus knot hero built with react-three-fiber and drei.

Particle Field Background

A slowly rotating field of points, useful as a hero/background layer, built with react-three-fiber.

Scroll & Timeline

GSAP Tween Methods

Interactive comparison of gsap.to(), gsap.from(), gsap.fromTo(), and gsap.set() with a live code preview.

Animated Background

A shared highlight that slides between items on hover or click, powered by motion's layout animations.

Animates text in by character, word, or line with blur, fade, scale, and slide presets.

Scrambles through random characters before settling on the final text.

A light sweep travelling across text, driven by an animated background gradient.

Text Shimmer Wave

Per-character 3D wave with a colour sweep travelling through the text.

Odometer-style number that slides each digit into place as the value changes.

macOS-style dock where icons magnify based on cursor proximity.

Morphs one string into another by animating shared characters between positions.

An animated gradient glow layer with rotate, pulse, breathe, and colour-shift modes.

A soft light that follows the cursor inside its parent container.

Pulls its child toward the cursor within a configurable range.

Morphing Dialog

A trigger that morphs into a full dialog using shared layout animations.

Progressive Blur

A layered gradient-masked blur that fades in one direction, for overlaying media.

Scroll & Timeline

GSAP Scramble Text

Text that scrambles through characters, numbers, or case variants before resolving, using GSAP's ScrambleTextPlugin.

Scroll & Timeline

Morphs one SVG path into another with GSAP's MorphSVGPlugin.

Scroll & Timeline

GSAP Split Text

Splits text into characters, words, or lines and staggers each piece in, using GSAP's SplitText.

A collapsible 'thinking' panel with a blinking live state, for streaming model output.

A vertical chain of reasoning steps with status dots and a blinking active step.

Anime Text Bounce

Per-character bounce-in built with anime.js splitText and staggered keyframes.

Anime SVG Distort

Animated SVG turbulence filter and polygon point morphing, built with anime.js.

Anime Line Draw

Draws SVG strokes on as if being sketched, using anime.js createDrawable.

Anime Char Flip

Characters flip on a 3D cube face-by-face, built with anime.js splitText templates.

Anime Three Spheres

Three shaded spheres with a vertex wave deformation, driven by anime.js through its Three.js adapter.

Anime Three Cube Grid

An instanced cube grid that explodes outward and rotates, driven by anime.js through its Three.js adapter.

Anime Scramble Text

Scramble reveal with a configurable cursor, character set, and reveal direction, built on anime.js scrambleText.

Splits text into words and pushes them out in 3D with a randomised stagger.