/inbox
AnaNew palette ideas
TheoSheet v4 is live
KaiMotion review
Shared axis X
Page transition that slides and fades along the x-axis between routes.
React page transitions
Route changes are where an app feels cheap or considered. These transitions handle the exit, the enter and the in-between (with reduced-motion fallbacks), so your agent stops reaching for a 200 ms fade on everything.
24 live assets · React + Tailwind + Motion · restyle to your design tokens
Transitions
Crossfade page
Calm route transition where the old page fades out before the new one fades in, keyed by pathname so it drops into any router.
Curtain wipe
An accent-coloured curtain sweeps across the old page, then pulls away to reveal the new one.
Slide-up stagger page
On each route change the new page's sections rise in one after another on a spring.
Card → detail
Grid cards that morph into a detail dialog (card, image and title travel as shared elements) and morph back on close.
Button → dialog morph
A button whose shape grows into its dialog panel as a shared element and shrinks back into the button on close, with focus returning to it.
List ⇄ grid toggle
A collection with a segmented list/grid switch whose items glide and reshape into their new places on a spring.
Direction-aware panels
Tab or step panels that slide in from the side of the newly selected index while the box springs to the new height.
3D content flip
Swaps content with a flip-board turn around the X axis whenever its key changes, ideal for stat cards and live values.
Zoom-through page
The old page shrinks back and fades while the new one settles in from slightly larger than life; keyed by pathname for any router.
Split doors page
Two doors slide in from the sides and meet over the old page, hold for a beat, then part to reveal the new one.
Thumbnail → lightbox
A square thumbnail un-crops into a centred lightbox at its true aspect ratio as a shared element, steps through the set with arrow keys and shrinks back into place on close.
Search expand
A search icon button morphs into a field spanning its whole bar (shape and magnifier travel as shared elements while the bar's content steps aside) and back on Esc or blur.
Button → bottom sheet
A floating action button grows into a bottom sheet as one shared element, its colour washing out, with drag or flick to dismiss back into the button.
Avatar → profile
A small avatar chip opens into a profile header card (shape, portrait and name travel as shared elements over a banner), then folds back on close.
Circle reveal page
The next page grows over the current one inside a circle that opens from the click point (or the centre) while the old page sinks back.
Diagonal wipe page
Two slanted panels sweep across to cover the old page and peel away the same way to uncover the new one, whose content rises in with a stagger.
Stack push page
Native navigation-stack route transition: a push slides the new page in over the current one while the page beneath drifts back under a dimming scrim, and a pop plays it in reverse.
Shutter page
A row of slats drops shut over the old page one after another like a roller shutter, then rolls open the same way to uncover the new one, in ink, accent or alternating two-tone.
Zoom-out pan page
The current page shrinks into a rounded card, the row of cards pans the way you navigated until the next one is centred, and it grows back to fill the frame.
Title card page
An ink panel rises over the old page as the destination's name rises into it in large display type, holds for a beat, then lifts away upward to uncover the new page.
Morphing island
One floating container that springs its width, height and corners to fit whatever it holds next (a button, a tray of actions, a confirm prompt, a status) while the old content blurs out and the new blurs in.
Stack ⇄ spread
A fanned pile of cards that deals itself out into a grid when opened and gathers back into the stack when closed, each card gliding on a spring at its own size.
Stacked sheets
Nested bottom sheets where each new step slides up over the last, which shrinks back, lifts just above it and dims, and Back drops the top sheet away so the one beneath springs forward.
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 these work with the Next.js App Router?
Yes. Each page transition is a wrapper keyed by the route, so it works with the App Router, React Router or any setup where you can key a component by path.
What happens with reduced motion?
Every transition ships a fallback (usually an instant swap or a short opacity change) and follows both the OS setting and your app’s MotionConfig.
More of the library
Guides and articles
ComparisonScreenshot inspiration vs live components for UI designGalleries of app screenshots or a library of running components: what each tells you about a design, and which one your coding agent can build from.5 min readArticleWhy AI-built apps all look the same, and how to fix itAI coding agents reach for the same defaults on every project. Where the generic look comes from, why prompts don't fix it, and what does.4 min readGuideConnect 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 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.