Components
The effects from the videos as React components. Open one to play with it, then copy the code or install it with the shadcn CLI.
ASCII RevealA photo typed out in ASCII that scrambles into the real image.
Aurora BackgroundSoft colour blobs rising from an edge and drifting behind your content.
3D Card RingPhoto cards bent around a 3D cylinder that spins with wheel and drag.
Clip-Path SliderFull-bleed slides that open through a clip-path while the old one zooms back.
Colour TrailA greyscale photo the cursor paints back into colour.
Context MenuA right-click menu that pops open from the cursor.
Electric BorderA card edge that crackles like electricity.
Expandable PanelPhoto strips that open wide on hover, focus or tap.
Fashion PreloaderTilted photo cards open one by one, a brand name rises and a counter runs to 100.
Film Split LoaderLoader words spread apart and a tilted card grows between them into the full-screen picture.
Flip BookA hardcover photo book whose pages turn and bend in 3D.
Flow ArtColour-block sections that swing in over each other as you scroll.
Folder Hover TabsService folders that lift and fan three photos open on hover.
Opening Card RowAn acronym preloader, then tall cards that slide across a pinned hero and open.
Rotating Image GalleryA ring of photos you spin with a drag, a swipe or the arrow keys.
Image LoaderA counter climbs to 100 while photos open in a stack and the last one fills the screen.
Images flowImages spread from the centre into 3D.
Infinite Drag GalleryA wall of work you drag in any direction, forever.
Ink Hover RevealA brush stroke of ink pours the colour photo in on hover.
Jelly Spiral GalleryPhotos on a 3D spiral that bend like jelly when you spin it.
Lanyard BadgeAn ID badge on two straps that you can grab, swing and flick.
Line RevealHeadings and paragraphs that rise line by line out of a mask.
Liquid image revealAn organic reveal with SVG filters.
Magnetic ButtonA button that leans toward the cursor and snaps back like a spring.
Mask Reveal on HoverA round window that follows the cursor and shows different content underneath.
Mouse Tilt CardA card that leans toward the cursor with a moving glare.
Mouse trailAn image trail that follows the cursor.
OdometerNumbers that roll digit by digit, like an odometer.
Perspective Card StackA pile of photos that swings open into a 3D fan.
Pin rotate sectionsPinned sections that turn in 3D.
Pixel Hover RevealHover a name and its picture breaks in, pixel by pixel.
Portrait BurstHover a word and a burst of portraits flies out, then tucks back in.
Post SwiperA deck of social posts you swipe through, card by card.
Project hoverThumbnails float with the cursor.
Proof Of WorkA big title over a grid of work that flies in, or tumbles into view, as you scroll.
Scrolling GalleryA zig-zag column of pictures that slide past each other as you scroll.
Section 3DTall cards that fall back into 3D as the next one arrives.
Settle TextHeadline rows that slide in while their letters drop in and settle.
Social CardA realistic post card in three looks: photo feed, short-text timeline and news feed.
Spotlight CardsA grid of cards lit by one soft light that follows the cursor.
Stack Fly-Out CardsCards rise into a peeking stack, then fly off one by one as you scroll.
Stacked card sliderClick to cycle cards with GSAP Flip.
Swipeable CardsA deck of cards you swipe through.
Text block effectA coloured block sweeps each line in.
Text LoaderLetters rise out of a mask, fill with a gradient, leave, and the panel lifts away.
Text scramble revealLetters scramble near the mouse.
Text to TimelineImages inside a sentence fly out on scroll and land on an editor timeline.
Tilt MenuThe page swings aside and tilts to show a full menu behind it.
Velocity MarqueeA marquee that speeds up, leans and turns around with your scroll.
Card FanA hand of photo cards that fans out, lifts and turns over.
Curved GalleryA WebGL photo strip on a curved screen that bends with speed.
Dot GlobeA dotted three.js globe with arcs that fly between cities.
Dynamic IslandA black pill that springs between live activities.
Magnetic Dot GridA dot grid that parts around the cursor and springs back.
Mesh GradientSoft fields of colour that drift, swirl and blend, with fine film grain.
Physics LettersHuge letters that drop in, bounce, pile up and can be thrown.
Water RippleA photo under live water: the cursor leaves a wake, a click drops a ripple.
Blinds RevealA photo that turns open like venetian blinds as you scroll.
Displacement SliderA full-bleed photo slider where each photo melts into the next.
Fabric ImageA photo hung like cloth on the wall, that you can grab and pull.
Fill ButtonA button that floods with colour from where the cursor enters.
Glass LensA lens of thick glass that follows the cursor and bends the photo and the type under it.
Image TunnelScroll flies the camera down a bending tunnel lined with photos.
Particle TextA word drawn by thousands of particles that part around the cursor and morph to the next word.
Path MarqueeBig type that flows endlessly along a waving curve and speeds up with your scroll.
Peel StickerA board of die-cut stickers whose corners peel back under the cursor.
Split FlapAn airport departures board that flaps through every letter.