Dynamic Island Toast
A pixel-faithful Apple Dynamic Island that morphs, splits, and breathes while it hosts live activities inside your app.
React Animation Effects
Big-feeling motion: parallax, scrub-scroll sequences, sticky storytelling, page transitions and cursor trails. The components that make a marketing site feel alive.
21 components
Apple-Style Sticky Scroll
A pinned cinematic section that morphs in lock-step with scroll, staying perfectly in sync whichever way you travel.
Morphing Shape Background
Lava lamp background for React heroes: soft gradient shapes that drift and melt.
Scrubbable Video Reveal
An Apple-style image sequence scrubbed frame by frame on canvas, following your hand as you scroll in either direction.
Perspective Marquee
A 3D tilted image grid with alternating rows scrolling infinitely in both directions.
Animated Tabs
A physical stack of photo cards shuffled to the front by clipped tabs, with a tight image inset and copy in the footer.
Genie Effect
A macOS genie minimize built on a real per-slice warp that sucks any window, folder, or panel down into a waiting dock.
Cover Flow Carousel
A 3D Cover Flow album carousel where side cards swing into the center and a mini player below follows the track.
Apple Intelligence Glow
A soft Apple Intelligence edge glow that traces the screen with a rotating iridescent gradient you can toggle on.
Google-Style Search Bar
A Google AI Mode search bar with a rainbow that travels the rim, cycling typewriter prompts, and an inline Google wordmark.
Color Archive Scroll
An endless project list that repaints the whole stage in the active row's color, with a preview card you can drag.
Liquid Glass Orb
A draggable soap-bubble orb you swipe upward to enter the page, where it settles as a compact, still glass anchor.
Infinite Image Collage
Grab and throw a photo collage. Frames wrap with no seam, then glide to a stop.
Peel Effect
Grab any corner and peel the sheet back. It curls, catches the light, and springs shut with the weight of paper.
Which cinematic interaction should I use?
Scroll drives the animation
Both pin a section. What differs is what you have to supply.
- Apple-Style Sticky Scroll
- A section should pin and transform as the page travels through it. Runs on markup you already have, and reverses cleanly when someone scrolls back up.
- Scrubbable Video Reveal
- You have an exported frame sequence and want a product to turn under the reader's hand. Every frame is a download, so price that before committing.
Scroll through a catalogue
- Color Archive Scroll
- A project index should feel like one long reel, not a grid. The stage repaints to each project colour as it lands, so it wants work with colour worth showing.
Gate the page behind one object
- Liquid Glass Orb
- A landing page should make the reader commit before it opens. The orb is the only thing on screen until it is swiped up, and it stays as a compact anchor afterwards, so the entry is a gesture rather than a splash screen.
- Peel Effect
- Something should stay hidden until a visitor chooses to look. Grab any corner and the cover curls back like paper, then springs shut if they let go early.
A canvas you throw around
- Infinite Image Collage
- A photo archive should feel like a table you push around, not a page you scroll. Throw it in any direction and the collage wraps with no visible edge.
Looking closer
- Magnifying Glass Lens
- A product shot or dense chart has detail worth inspecting. The loupe magnifies live markup rather than a screenshot, and bends at the rim like thick glass.
A trail behind the pointer
- Cursor Trail
- A hero or portfolio should answer every movement of the mouse. A ribbon, ink stroke, beads or sparks follow the pointer and fold away the moment it stops, so nothing lingers over the copy.
Strips that loop forever
- Infinite Marquee
- A row of logos or short labels should travel with no visible seam. Runs on the GPU alone, so it stays cheap to leave on a long page.
- Perspective Marquee
- An image gallery should read as depth rather than a row. Tilted rows scroll opposite ways, which pulls far more attention than a flat strip.
Behind your content
- Morphing Shape Background
- A hero needs colour moving behind the copy. Blobs drift and melt without SVG morphing, so it stays smooth across a large surface.
- Blob Animation
- A hero wants one soft shape breathing behind it. Border-radius keyframes morph a single blob, and the motion runs entirely in CSS.
Lighting the edge of a card
- Glowing Border
- A card grid should answer the pointer. Edges near the cursor light up, or a beam, spin, or pulse runs the border on its own.
Borrowed from macOS and iOS
These read as a quotation. Worth it when the reference is the point.
- Dynamic Island Toast
- Live status like a timer, a call, or an upload should stay on screen. The pill morphs and splits, and reads as iPhone on anything that is not one.
- Genie Effect
- Something dismissed should visibly go somewhere. A per-slice warp pulls a window or panel down into a dock, which only lands if that dock is real.
- Cover Flow Carousel
- An album picker that should feel like iTunes. Side cards swing into the center on click or arrow key, and a glass bar follows the track.
- Apple Intelligence Glow
- The screen itself should light up. A soft iridescent rim traces the edges the way Apple Intelligence does, and a pill turns it off.
Borrowed from Google
These read as a quotation. Worth it when the reference is the point.
- Google-Style Search Bar
- A homepage search should feel like Google AI Mode. The rainbow travels the rim while idle prompts type themselves in.
A logo poured into liquid
- SVG Liquid Animation
- A mark should read as liquid without losing its shape. Waves and ripples run through it, and the surface gives where the pointer pushes.
A logo set alight
- SVG Fire
- A mark should burn rather than sit still. Flames grow from the upward edges of its own paths, with embers and heat shimmer, and hold a still frame under reduced motion.
Switching between panels
- Animated Tabs
- Tabs should feel like shuffling a physical stack rather than swapping a div. Cards promote to the front with the image inset up top.
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 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 categoryElite Micro-Interactions
16 componentsThe 200-millisecond moments that elevate every flow: magnifying docks, animated hamburger menus, star ratings, liquid glass buttons, tag inputs and loaders. Polish without theatrics.
Explore category