Magnetic flow

Cards follow the leader like a snake, then burst open like the sun. Move your cursor to lead; click to burst.

Backgrounds, hover, then press, GSAP

Install

npm i @gsap/react clsx gsap tailwind-merge && curl -o components/magnetic-flow.tsx https://motion-brew.com/r/magnetic-flow.tsx

One self contained file for React and Tailwind CSS: magnetic-flow.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { MagneticFlow } from "@/components/magnetic-flow";

export default function Page() {
  return <MagneticFlow className="h-[480px] w-full" cardSize={150} follow={0.2} />;
}

Pass your own faces with `cards`, back to front; the last one leads.

Props

Prop	Type	Default	Description
cards	ReactNode[]	8 graphic cards	Card faces, back to front
cardSize	number	140	Card edge, px
follow	number	0.16	How tightly each card chases the one ahead, 0 to 1
spacing	number	7	Stack offset at rest, px
burstRadius	number	150	Ray distance from center, px; shrinks to fit
burstHold	number \	null	2400	Fold back after this many ms; null waits for a click
autoplay	boolean	true	Float gently at the center when no pointer is over it
onBurst	() => void		Cards burst open

More backgrounds

Gravity tag pile: Tags fall, bounce, spin and pile up with real physics.
Prism flow: A dark background crossed by a soft band of light that bends and drifts, its edges splitting into colour like light through a prism.
Spatial gallery: A WebGL media tunnel of images and videos that never ends: scroll or drag to travel, and the ring twists into a turning spiral as you go.
Pixel blast: A background of dithered pixel clouds that drift, shimmer and light up under the cursor.

All animated react backgrounds and shaders