Getting Started

Guides

Scroll Animations

Text Animations

Hover & Cursor

Sliders & Carousels

Galleries & Grids

Menus & Navigation

Preloaders & Intros

Page Transitions

3D & WebGL

UI Elements

Components

The full Tween catalog — animated React components built with Three.js, React Three Fiber, Framer Motion, and GSAP.

Every component is copy-paste ready and installable with the shadcn CLI:


pnpm dlx shadcn@latest add https://tweenui.dev/r/<name>.json

Browse the full catalog below — select any component to see a live preview, the source, and install instructions.

01 / Category

Scroll Animations

Pinned sections, sticky stacks and scrubbed timelines driven by ScrollTrigger.

15

Sticky Cards Scroll

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.

Rise Fan Cards Scroll

A pinned section where four rotated image cards rise from below into a centered overlapping stack, then fan out to four distinct positions while de-rotating upright as the scroll continues.

Rotate Stack Scroll

A stack of full-screen colored panels that each swing up from a tilted angle to flat as they enter, pinning over the previous one so the page assembles like a deck of cards righting itself.

Doodle Lens Scroll

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.

Slit Open Hero Scroll

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.

Logo Mask Zoom Scroll

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.

ASCII Dissolve Scroll

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.

Lottie Flight Scroll

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.

Inline Icon Text Scroll

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.

Starfield Scroll

A pinned canvas starfield whose radial color streaks accelerate with scroll progress while three headers scrub in and out word by word.

Name Swap Scroll

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.

Spotlight Gallery Hero

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.

Slit Rotate Hero Scroll

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.

Stroke Cover Scroll

A pinned section where thick outlined strokes draw in a staggered order until they cover the screen, the message swaps underneath, then the strokes undraw while sparkle shapes spin in and out.

Stroke Rows Scroll

A pinned section where rows of thick rounded SVG strokes with dark borders draw in by dash offset, two curved strokes sweep through, the rows slide away and the section flips to a dark palette with a new headline.

02 / Category

Text Animations

SplitText reveals, scrambles, skews and kinetic type.

2

Text Skew Reveal

Text Skew Reveal

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.

Block Text Reveal

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.

03 / Category

Hover & Cursor

Image trails, magnetic hovers, spotlights and cursor followers.

5

Image Trail Cursor

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.

Cursor Depth Logo

Cursor Depth Logo

A logo extruded into stacked, silhouette-masked color slabs that trail the cursor with a staggered lerp, faking parallax depth as the pointer moves across the hero.

Physics Tag Drop

A list of service rows that elastically expand on hover while matter-js tag pills drop in and pile up at the floor.

Elastic Card List

A stacked title list where the hovered row grows while its neighbours shrink by proximity, the label swaps to a handwritten cut, and four tilted preview cards spring in with elastic jitter.

Magnetic Cards Spring

Four fanned photo cards on a spring-damper ticker — sweep the pointer past them and its velocity shoves the nearest card and tilts it, dragging neighbours along before everything springs back.

04 / Category

Sliders & Carousels

Draggable, wheel-driven and shader-distorted sliders.

8

Wheel Fullscreen Carousel

Wheel Fullscreen Carousel

A cinematic full-bleed slider where each wheel or swipe step throws the current slide out with rotation while the next slide enters via clipped polygon, then reveals its title, tags, and copy line-by-line.

Ripple Displacement Slider

A click-driven slider where each advance fires a circular ripple wave that distorts the image and crossfades to the next slide, with the title and copy sliding out and back in.

Three.js Blend Slider

A wheel- and touch-driven Three.js slider where a single plane bends on a velocity-signed sine displacement while a fragment shader wipes vertically between the current and next image, snapping to the nearest slide as the title swaps.

Stacked Deck Slider

A wheel- and touch-driven slider where slides sit in a receding 3D card stack — each step pushes the front card off and pulls the next from the back while its title reveals word by word.

Orbit Cylinder Slider

Ten image panels arranged on a CSS 3D cylinder that spins with the mouse wheel, tilts toward the cursor, and swaps a counter-rotated preview and title for the slide facing the viewer.

Fan Stack Slider

An infinite wheel- and touch-driven stack of photos that fan out to the right with stepped offset, rotation, scale, blur and dimming, lerping toward the target and snapping to the nearest slide.

Exponential Strip Slider

An infinite horizontal strip where slide widths grow exponentially from left to right across the container, driven by a lerped wheel, drag and touch scroll.

Dual Column Slider

An infinite two-column slider: the left column reveals upward and the right column downward through polygon clip-paths, with parallax images and a split title that holds at center before drifting away.

05 / Category

Galleries & Grids

Infinite canvases, circular layouts and image grids.

1

Scroll Wave Gallery

A vertical column of images where each one drifts horizontally on a combined three-sine-wave path and clips in from its edges as it passes through the scroller, shrinking toward the end, framed by an intro and outro heading.

06 / Category

Menus & Navigation

Overlay, off-canvas and split-panel menus.

1

Shrink Page Menu

A fullscreen menu where the page clips down to its centre point while scaling to half size, and the menu behind it flies forward out of z-depth and un-blurs, with a per-character roll on link hover.

07 / Category

Preloaders & Intros

Counters, curtain wipes and landing-page reveals.

3

Floating Items Reveal

A page-load reveal where four colour discs clip open from the centre, four tilted product images fly out and bob around a logo, then everything blasts off-screen as the nav, elastic headline and hero plate rise in.

Word Cycle Reveal

A page-load reveal where a 000-100 counter runs as the second title word and a framed image cycle rotate, the loader clips away upward, the headline words slide in and the image frame expands to fill the page.

Tile Grid Loader

A page-load reveal where a grid of square tiles fills in at random while a white progress marker Flips between stops along the middle row, then every tile collapses on scaleY to uncover the hero.

08 / Category

Page Transitions

Block, mask and shutter transitions between views.

1

Panel Assembly Transition

A self-contained page swap where horizontal panels sweep in on a hop ease to assemble a cover, a masked heading rises word by word, then everything retracts to reveal the new page.

09 / Category

3D & WebGL

Three.js scenes, shaders, particles and fluid simulations.

5

Fractal Glass Hero

A full-bleed hero that renders an image through a WebGL fragment shader, applying a striped fractal-glass distortion with edge falloff and mouse-driven parallax that lerps toward the cursor.

Fluid Cursor Canvas

A real-time GPU fluid simulation that reacts to the cursor — curl, vorticity, pressure and advection passes drive a dye field rendered over the hero with a difference blend so the headline inverts through the flow.

Fluid Portrait Hero

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.

Fluid Gradient Canvas

Fluid Gradient Canvas

A self-contained WebGL canvas that renders a flowing four-color plasma gradient and warps it through a cursor-driven, feedback-buffer fluid simulation with a velocity-decay trail.

Inversion Lens Hover

A three.js shader lens that follows the cursor and flips the image to inverted grayscale inside a circle whose edge boils with animated turbulence noise.

10 / Category

UI Elements

Buttons, widgets, footers and other animated building blocks.

4

Circular Widgets

An SVG circular spinner of image segments driven by the wheel, with a center label that cycles as the indicator passes each segment.

Vinyl Cover

A rotating vinyl record with the album cover at its center, framed by text that streams along two curved SVG paths above and below.

Image Explosion Footer

A footer that fires a physics-driven explosion of image particles when it scrolls into view — particles launch upward with random velocity and rotation, then fall back under gravity and re-arm.

Accordion Image Frames

A horizontal track of thin image slivers where the hovered panel springs open to full width, the rest slide aside, and a white focus frame with vertical guide lines glides to follow it.

Story Absolute Cards Scroll