- 2m
- 9m
- 1h
- 3h
Staggered list in
List rows rise and fade in one after another with a short stagger.
Scroll animations
Scroll is the one gesture every visitor makes. These effects reward it without hijacking it: no scroll-jacking, and a plain layout for reduced motion.
30 live assets · React + Tailwind + Motion · restyle to your design tokens
Animations
01Collect
02Connect
03Ship
Stacking scroll cards
Cards pin and stack on top of each other as the page scrolls.
Scroll progress bar
A thin accent bar fills left to right with scroll progress, spring-smoothed, for the whole page or any scroll container.
Parallax layers
Layers inside a section drift at different speeds as it scrolls through the viewport, with per-layer speed for foreground and background depth.
Clip reveal on scroll
Content is uncovered once by a clip-path inset wipe from any edge as it scrolls into the viewport or a container.
Grid wave reveal
Grid cells scale and fade in as a diagonal wave (each waits by its row plus column) the first time the grid scrolls into view.
Mask wipe reveal
An image or card is uncovered by a clip-path wipe in the direction you choose while its content settles from a slight zoom.
Pop-in stagger
Items pop in one after another on an overshooting spring, each starting small with a tiny tilt.
Blur slide stagger
Items slide in from a side one after another, sharpening from a blur as they fade up.
Horizontal scroll section
A tall section pins its viewport while vertical scrolling slides a row of cards sideways from the first card to the last.
Scroll text fill
A paragraph whose words fill from the muted colour to full text colour one after another as it scrolls up through the viewport.
Scroll velocity marquee
An endless marquee that speeds up with scroll velocity, flips direction when the scroll does and skews while you scroll fast, then eases back to cruising speed.
Section dots
A vertical column of dots that tracks the section in view with an IntersectionObserver; the active dot springs into an accent pill and every dot is a labelled button that scrolls to its section.
Back to top
A round back-to-top button that springs in past a scroll threshold, ringed by a progress circle of how far down the page you are, and glides to the top when pressed.
Pinned steps
Scrollytelling: a sticky visual panel swaps with a springy slide as step blocks scroll past beside it, the step crossing a reading line is highlighted and a counter tracks where you are.
Scroll zoom hero
A pinned media block grows from an inset rounded card to full-bleed as you scroll through its section, its image settling from a slight zoom while overlay copy fades in at the end.
Shrinking header
A site header that condenses past a scroll threshold (shorter, with a smaller logo, frosted background and hairline) and optionally slides away while you scroll down, returning as soon as you scroll up.
Scroll timeline
A vertical timeline whose accent line draws down the rail in step with scroll, both ways, lighting each node with a small pop as the line reaches it and bringing its entry up to full strength.
Flip-in tiles
Grid tiles swing into place on the X axis from a hinge in a diagonal wave, landing on a spring when the grid scrolls into view.
Line-draw illustration
An inline SVG illustration draws its strokes one after another, then washes in its fills once the last line lands.
Alternating slide-in
Zig-zag rows of text and media sweep in from alternating sides as each enters the viewport, the media trailing the text from further out.
Block reveal
A solid accent block sweeps across an image or line of type, holds a beat, then sweeps away to uncover the content beneath it.
Slam-in stamp
Items slam onto the page one after another from oversized and blurred, dipping on impact as a hard offset shadow block kicks out from underneath each one.
Outline-draw card
A card's outline traces itself around its edge (from two opposite corners meeting halfway, or in one stroke), then its surface washes in and its content rises into place.
Strip-join reveal
An image arrives in vertical strips that slide in from alternating ends and lock together into the whole picture, sweeping from one edge or from the centre outward.
Exploded stack
A pinned isometric stack of layer plates pulls apart as you scroll through its section, each plate lifting to its own height while a leader line and label draw in beside it, for an exploded view of how a product is built.
Chapter index
A sticky table of contents for long reads where each chapter's hairline fills as you read through it, the current chapter shows the minutes left in it, finished ones get a tick, and every entry jumps to its chapter inside its own scroller.
Curtain split
A pinned cover with an oversized headline tears down the middle as you scroll, its two halves sliding apart and tipping away along an accent cut to reveal the section underneath, which settles up from a slight zoom.
Tilt-in showcase
A product frame enters leaning back in perspective and straightens to face you as it scrolls up into view, rising and scaling to full size while its shadow tightens and an accent glow comes up behind it.
Tone shift
Sections each name a tone (background, surface, accent or ink), and the backdrop crossfades to it as the section passes the middle of the viewport, with the text colour blending along so copy never sits on the wrong tone.
With your agent
From this page to your app in three steps
- 1Add the ones you like to your sheet. It holds your colours, type and motion.
- 2Connect Claude, Cursor or any MCP client in a click.
- 3Ask for the screen. Your agent pulls these exact components with your values filled in.
Do they hijack scrolling?
No. They read scroll position and animate in response; the page scrolls normally.
Performance?
They animate transforms and opacity, which the browser can composite cheaply.
More of the library
Guides and articles
GuideConnect your coding agent to Wuizard over MCPConnect Claude, Claude Code, Cursor, Windsurf or any MCP client to Wuizard, so your agent builds with your exact colours, fonts and components.6 min readGuideDesign a sheet from the library and fine-tune itBuild a Wuizard sheet by hand: start from a vibe or the library, set colours, type and motion, fill slots, add rules and check it in the live preview.5 min readGuideConnect Windsurf and other MCP clients with an API keyCreate a personal Wuizard API key and add it to Windsurf, Claude Code, Cursor or any MCP client's config. Then check it works, rotate it and keep it safe.5 min read
Stop shipping apps that look AI-made.
Save what you love to a sheet, connect Claude or Cursor, and every screen comes out in your style. Free for 3 days on annual plans, card needed.