Halloween only 🎃 Get 
Split-Flap Display
A ceramic and graphite split-flap device that ripples each flap into your message.
React Visual Effects
Set-piece components for hero sections and demo decks. Confetti cannons, refraction glass, retro terminals, ambient aurora. Used sparingly, felt instantly.
27 components
Interactive 3D Globe
A 3D Earth lit day and night from the real sun position, wrapped in a soft atmosphere, with smooth drag-to-orbit controls.
Animated Code Diff Viewer
Inline or toggled code diffs rendered inside the same polished code block frame, flipping between before and after.
Animated Terminal
A terminal UI with self-typing commands, CRT phosphor glow and scanlines, streaming output that never re-renders a line.
Tinder-Style Swipe Cards
Tinder-style swipe cards where the top card flicks off under your thumb and the one underneath rises in real time.
Physics-Based Confetti Cannon
Hand-rolled canvas particles with gravity, drag, terminal velocity, and paper ribbons that flutter on the way down.
Refraction Glass Container
Real refraction, where feDisplacementMap warps the actual pixels sitting behind the card instead of blurring them.
Bento Grid Layout
A responsive bento grid of dashboard tiles where clicking one moves it to the front and the rest glide into place.
Aurora Background
Aurora background of blurred light on Framer Motion, with grain that kills banding.
Scroll Stack
Cards that pin, tilt, and stack into a tidy deck as you scroll, with zero scroll hijacking anywhere in the sequence.
Orbital Image Carousel
Drag a cylindrical photo rail with snapped inertia, keyboard stepping, and depth-aware parallax on every face.
Interactive 3D Book
A tactile 3D book cover that opens on click with real matte depth, then turns each page on a weighted hinged flip.
Animated 3D Folder
A real CSS 3D folder that tilts toward your cursor, drops its cover open, and lifts its files into a stepped index.
Fan Hover Card Stack
Hover a stacked profile deck and watch the cards fan outward in sequence while the active one lifts to the front.
Card Stack Carousel
A React card stack carousel on Framer Motion: each photo drops out below the pile, slips behind it and rises to the back.
Expanding Cards
Hover a tall editorial strip and it opens wide, the rest of the row holding as tight vertical slivers of the same image.
Hover Image Gallery
Hover a card in the fanned artwork row and it rises to the front, showing a colored pill with that card's title.
3D Image Carousel
Portrait cards line the inside of a curved wall, smallest at the center and larger toward each side. Drag or hover to turn.
Which show off component should I use?
Backdrops
Sits behind your content and never asks for attention directly.
- Aurora Background
- You want soft coloured light behind a hero section. Pure CSS with a noise overlay to kill banding, so it stays cheap on a long page.
- Gradient Stripes
- The background should answer the cursor. Gradient columns on springs rise toward the pointer and fall back into a slow swell. Plain canvas, no WebGL.
- Glass Stripes
- The hero wants depth rather than colour alone. Real refracting glass flutes bend a slow glow that drifts toward the pointer. WebGL, paused offscreen.
- Particle Image
- You already have the photograph and want it to come apart. It is rebuilt as halftone dots that assemble on load, scatter from the cursor and spring back home.
- Liquid Ripple Image
- The photograph should stay whole and move like water. A real wave simulation spreads, crosses and reflects ripples from the cursor or rain, then goes still.
- Fluted Glass
- You have a bold photograph and want it seen through ribbed glass. Each rib squeezes its own slice of the picture, which slides beneath the pane with the pointer.
- Gradient Grain
- The hero should look like light leaking onto film rather than a flat gradient. Saturated colour burns to white under fine grain, in four compositions from one palette.
Showing a set of cards or images
Eight decks, separated by how a visitor moves through them.
- Orbital Image Carousel
- People should browse photos by dragging. A cylindrical rail with snapped inertia and keyboard stepping, so it still works without a mouse.
- Tinder-Style Swipe Cards
- You want one decision at a time. The top card flicks away under a thumb and the next rises, which reads as native on a phone.
- Scroll Stack
- Scroll position is the control. Cards pin and tilt into a deck as the page moves, with no scroll hijacking anywhere in the sequence.
- Fan Hover Card Stack
- A short set of profile or team cards that fans out on hover. Shows everything at once, and does nothing at all on touch.
- Expanding Cards
- A row of tall editorial frames that open on hover. One stays wide, the rest collapse into vertical slivers of the same photograph.
- Card Stack Carousel
- The deck should cycle on click, front card dropping away and the rest promoting. Right when there is nothing for the visitor to decide.
- Hover Image Gallery
- A handful of artworks where each piece deserves its credit. Hovering a card lifts it to the front with a coloured pill naming the work.
- 3D Image Carousel
- Portraits should read as a ring you turn rather than a flat row. Drag it, or hover a side, and the cards tilt with the curve.
Framing content on the page
- Bento Grid Layout
- A feature grid where the clicked tile should jump to the front. The other tiles glide into place around it.
- Refraction Glass Container
- Glass that genuinely bends what sits behind it instead of blurring it. Costs more than a backdrop filter, so spend it on one card.
- iPhone Mockup Hero
- An app or photo product needs a phone front and centre. The frame stands over a wall of photos that fades out toward both sides.
Text and data that changes
- Split-Flap Display
- Short strings or live counters that update on a schedule. The mechanical flip makes a change land as an announcement.
- Animated Terminal
- Command output or a scripted install walkthrough. Types itself at speed without re-rendering the lines already on screen.
- Animated Code Diff Viewer
- Showing what your tool changed in someone else's code. Additions and removals inline, or a flip between before and after.
Three-dimensional objects
Heavier than the rest of this category. One to a page.
- Interactive 3D Globe
- Customers, servers, or offices spread across the world. Drag to orbit, with pins you can point at real coordinates.
- Interactive 3D Book
- A publication, changelog, or case study that should feel like an object. Opens on click, then turns pages on a weighted hinge.
- Animated 3D Folder
- A document set that should read as physical. The flap peels back on click and the contents fan out behind it.
- Tactile Keyboard
- Shortcuts or typing are the product itself. Real key travel with synthesized switch sound, which needs audio permission to land fully.
- iPhone Siri
- Your product is an app and the mockup should do something. Tapping the Dynamic Island blooms a glass sheet that keeps refracting the wallpaper and widgets beneath it.
Marking a moment
- Physics-Based Confetti Cannon
- A signup, purchase, or milestone worth celebrating. Canvas particles with real gravity and drag, so ribbons flutter rather than drop.
More categories
Browse other categories
Agentic AI Interfaces
12 componentsAgentic AI interface components for React: a complete AI chat, an agent UI for tool calls and reasoning steps, typing indicators, AI buttons, prompt inputs, model pickers and voice orbs.
Explore categoryCinematic Interactions
21 componentsBig-feeling motion: parallax, scrub-scroll sequences, sticky storytelling, page transitions and cursor trails. The components that make a marketing site feel alive.
Explore categoryHeavy SaaS Blocks
5 componentsCommand palettes, kanban boards, data tables, pricing toggles, RBAC controls - the dense product surfaces real apps need on day one.
Explore category