Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
Every component is copy-paste ready and installable with the shadcn CLI:
Browse the full catalog below — select any component to see a live preview, the source, and install instructions.
A self-contained scroll box where photos scatter and reform as the user scrolls, cycling through headings.
An SVG circular spinner of image segments driven by the wheel, with a center label that cycles as the indicator passes each segment.
Stacked cards that pin to the viewport one by one and slide the underlying card up as the user scrolls past, framed by an intro and outro heading.
A primitive that wraps any text element, splits it into lines with SplitText, and reveals them from below with a staggered tween when the element enters the viewport.
A rotating vinyl record with the album cover at its center, framed by text that streams along two curved SVG paths above and below.
A primitive that wraps an image and translates it vertically with Lenis-driven inertia as the user scrolls, producing a subtle parallax effect inside any layout.
A pinned roadmap section where four absolutely positioned cards rotate and rise into view one after another as the user scrolls, alongside a tinted progress bar and an animated index list.
A pinned section where four floating cards spread out across the viewport and then flip from front to back in a staggered sequence as the user scrolls.
A two-section landing pattern where three rows of paired photo cards fly outward from the center while the foreground logo, copy and CTA reveal as the main section enters the viewport.
A primitive that wraps any text element, splits it into characters with SplitText, and reveals them with a skew-and-slide animation — play on mount, replay on scroll, or scrubbed to scroll position.
A primitive that wraps any text element, splits it into lines, and wipes a colored block across each line in sequence — revealing the text underneath as the block passes through.
A scroll-driven heading where alternating characters start far above and below the line and converge to the baseline while the whole heading slides horizontally into place.
A wrapper section that draws an SVG path stroke behind its content, progressing from empty to fully drawn as the user scrolls through the section.
A fashion-style landing page reveal — a counter from 0 to 100, a three-stage overlay caption, five images that fade in and scale up before all but the center one wipe away and the center one scales to fill, revealing the hero title underneath.
A wrapper that spawns rotated images along the cursor's path inside the wrapped area — scaling them in and out as the pointer moves, idles, or the inner content scrolls.
A horizontal row of small portrait thumbnails that grow on hover while a giant headline of that team member's name rises into view, letter by letter from the center outward.
A pinned full-bleed slider where each scroll step swaps the cover image with a scale-and-fade, reveals a new caption line-by-line with SplitText, and advances the active marker on the side indicator.
A self-contained horizontal slider with infinite wraparound, lerped wheel and drag scrolling, and per-slide image parallax that shifts opposite to the slide's distance from the center.
A clip-path-driven fullscreen menu that wipes up from the bottom — with a centered image, info columns, mouse-tracked link wrapper, char-by-char hover swaps, and a lerped underline that follows the hovered link.
A self-contained WebGL canvas that samples a logo image into a grid of points and pushes them away from the cursor with damped return forces, restoring the silhouette as the pointer leaves.
A grid of image cards where hovering draws two looping brush-stroke paths that thicken until they flood-paint over the photo, while the title reveals word-by-word — all reversing on mouse-out.
A fanned grid of folder tabs where hovering one lifts its label and fans three preview images up from behind it with randomized rotation, while every other folder dims out of focus.
A WebGL hero where the cursor paints a decaying fluid trail into a ping-pong simulation that blends between two portrait textures — wiping the cover image away to reveal the one beneath wherever you move.
An image wrapper overlaid with a grid of monospace symbol cells — moving the cursor lights up the nearest cell and a random walk of its neighbors, scrambling some glyphs before they fade back out.
A bordered grid of labelled cells with a colored highlight block that glides and resizes to whichever cell the cursor is over, snapping its color per cell while the labels stay legible on top.
A self-contained infinite grid of images you can fling in any direction with momentum and lazy culling — click any tile to expand it to the center over a fading overlay while its title rises in word by word.
A wall of breathing 3D cube tiles, each carrying a slice of one image — hovering a project name flips every tile from its center outward to mosaic in the next image.
A difference-blended list of names where hovering one clip-path reveals its image into a centered preview pane — the image easing up from a scaled-in crop and fading back out on leave.