Make it yours.
Blur-in headline
Headline words resolve from a soft blur, one word at a time.
Hero sections
The hero is the first five seconds. These sections arrive with a considered entrance, carry your type and colours, and give your agent a starting point that already looks like your brand.
15 live assets · React + Tailwind + Motion · restyle to your design tokens
Text effects
Drifting mesh
Drifting mesh
Soft colour fields drifting behind content like a slow lava lamp.
Typewriter
Types a phrase character by character (or cycles a list, deleting between them) behind a blinking accent caret.
Gradient sweep headline
An accent-tinted band of light sweeps through headline text on a loop, painted with background-clip: text.
Rotating word
One accent word in a headline rotates through options, sliding up into place while its slot springs to the new width.
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.
Split hero
Landing hero whose headline slides up line by line beside an abstract product frame that rises and settles into place on scroll.
Centered hero
Centered landing hero with a pill badge, a headline whose words blur into focus one by one, and a CTA row over a soft breathing accent glow.
Line mask reveal
A headline or paragraph whose lines rise one after another out of their own clipping masks with a settling tilt, split by explicit lines or by sentence, while the copy stays real, selectable text.
Outline fill
Outlined display type that floods with the accent from left to right behind a soft edge, painted with background-clip: text and driven by a progress value or autoplayed.
Pointer parallax
Stacked layers in a hero shift by their depth as the pointer moves across it (background one way, foreground the other), with a gentle 3D tilt, springing back to centre when the pointer leaves.
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.
Video hero
Landing hero with headline, copy and CTAs beside a poster frame whose pulsing play button swaps the poster for the video in place, never autoplaying.
Grid poster hero
Landing hero laid out like a ruled poster over a visible twelve-column grid, with oversized headline lines in bordered rows that shove in from alternating sides in hard stop-motion frames, a starburst sticker that slaps on, hard-shadow CTAs and a strip of short notes.
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.
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.
Can I change the copy and layout?
Every section takes its content as props, and the layout adapts from mobile to wide screens.
Will it look like everyone else’s?
No. It renders from your sheet: your fonts, colours, radii and springs. Two sheets give two different heroes.
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 readGuideExport your sheet as CLAUDE.md, AGENTS.md and tokensDownload a Wuizard sheet as a zip with CLAUDE.md, AGENTS.md, CSS and Tailwind tokens, your slot components and whole pages, ready to drop into a repo.5 min readGuideExtract a design system from a website you likePaste a public web address and Wuizard reads its colours, type, corners and motion into a starting sheet, or drop a screenshot for its colours.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.