Scroll choreography, shader sliders, preloaders and full-site templates — rebuilt as typed React components you install with the shadcn CLI and own outright.
- Components
- 45
- Categories
- 10
- Full-site templates
- 5
- Command to install
- 1
Circular Widgets
Block Text Reveal
Fractal Glass Hero
Ripple Displacement Slider
Stacked Deck Slider
Physics Tag Drop
Logo Mask Zoom Scroll
Inline Icon Text Scroll
Spotlight Gallery Hero
Stroke Rows Scroll
Orbit Cylinder Slider
Dual Column Slider
(01) Index
Ten kinds of motion.
(02) In motion
Fresh off the timeline.
01 · Scroll AnimationsDoodle Lens Scroll
Open →A pinned illustration whose sunglass lenses become clip paths: glare bands sweep across them, the camera zooms into a focus point, an image fades in through the lenses and the header words appear one by one.
02 · Scroll AnimationsSlit Open Hero Scroll
Open →A pinned hero where a thin centre slit opens into a full accent panel, three images cascade open from the centre with clip-path and scale, an outro panel scales in and then splits into two halves that slide apart to reveal the next section.
03 · Scroll AnimationsLogo Mask Zoom Scroll
Open →A pinned hero where a full-screen overlay with a logo-shaped hole shrinks from a huge zoom down to the logo, the image behind scales and washes to white, and a headline wipes in with a gradient fill.
04 · Scroll AnimationsASCII Dissolve Scroll
Open →A pinned stack of images that wipe away top to bottom on scroll, with the wipe edge hidden behind a scattered band of random-character cells that thickens at its core and dissolves at its edges.
05 · Scroll AnimationsLottie Flight Scroll
Open →A looping Lottie character flies down a staggered image gallery on scroll, following eased horizontal and vertical keyframe paths, tilting into its turns and casting a soft shadow that grows and fades with its height.
06 · Scroll AnimationsInline Icon Text Scroll
Open →A pinned hero where a row of icons rises, gathers to the center and shrinks, then each icon flies into an inline placeholder inside a paragraph while the text segments reveal in random order.
07 · Scroll AnimationsStarfield Scroll
Open →A pinned canvas starfield whose radial color streaks accelerate with scroll progress while three headers scrub in and out word by word.
08 · Scroll AnimationsName Swap Scroll
Open →A pinned frame where giant SVG names squash and stretch on scaleY to hand over one by one while square visuals scale in from the bottom-left corner and drift upward as they exit.
09 · Scroll AnimationsSpotlight Gallery Hero
Open →A pinned hero where an oversized 3×3 image gallery shrinks into view while a giant logo scales down and travels to the top corner, the headline fades in word by word, and the next section slides over a darkening hero.
10 · Scroll AnimationsSlit Rotate Hero Scroll
Open →A pinned hero whose clip narrows to a vertical slit, rotates 65 degrees and scales to nothing to uncover two sliding copy blocks, then two outro images clip in from the top and bottom under a line-masked headline.
Keep goingAll components →(03) Templates
Whole sites, not just parts.
Plonk
01 · StudioA loud, playful creative studio — SCHABO display type, matter-js physics footer pills, a goo-mask smudge revealer, a colour-block page-transition grid, SplitText reveals, and lenis-smooth scroll across about, work, expertise, careers, contact, and a sample project.
Opal Lark
02 · PortfolioA playful designer portfolio — a five-colour stacked page-wipe transition, a scroll-driven hero image flip, a pinned 3D fly-through work gallery, stacking service cards, SplitText reveals, a cursor image-trail contact page, and a footer image explosion across work, project, about, and contact.
Saltmere Array
03 · EditorialAn interplanetary observatory lab — a stabilizing-feed preloader, a hover-reactive goo grid, a block-flicker page transition, SplitText line and flicker reveals, a pinned horizontal routine slider, an arc-scrolling crew registry, an infinite traces carousel, and lenis-smooth scroll across observatory, expedition, traces, and contact.
Quiet Havoc
04 · StudioA playful creative studio — Big Shoulders display type, an SVG-morph page-transition wipe, a frame-flipping showreel with audio, scroll-driven variable-weight spotlight type, story slides, and lenis-smooth scroll across work, studio, stories, contact, and a sample project.
(04) Install
One command. Your code.
- 01
Pick
Browse a live preview and tweak its props.
- 02
Install
One shadcn command copies the source in.
- 03
Own it
Plain TypeScript and Tailwind — edit anything.
$ npx shadcn@latest add \ https://tweenui.dev/r/sticky-cards-scroll.json ✔ Created components/sticky-cards-scroll.tsx
npx shadcn@latest add https://tweenui.dev/r/sticky-cards-scroll.jsonWorks with Next.js, Vite and any shadcn-compatible project