Make it yours.
Blur-in headline
Headline words resolve from a soft blur, one word at a time.
Text effects
Headlines do the heavy lifting on a landing page. These effects keep the text real (selectable and readable by screen readers) while the letters move.
19 live assets · React + Tailwind + Motion · restyle to your design tokens
Text effects
get_slot → resolvedWUIZARD
Decode text
Characters scramble through glyphs before landing on the real word.
Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship ·
Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly ·
Kinetic ticker
Oversized type running in a band, tilted, like a sports broadcast.
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.
Letter wave
Letters hop up one after another in a bouncy wave when the text mounts and again whenever it's hovered.
Rotating word
One accent word in a headline rotates through options, sliding up into place while its slot springs to the new width.
Split-flap text
Departure-board text whose character tiles flip through a few glyphs, top flap falling onto the bottom, before landing, staggered left to right.
Marker highlight
Chosen words get a slanted, hand-drawn-feeling marker stroke in the accent that sweeps in behind them one phrase after another, wrapping across lines.
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.
Number ticker
A large headline number whose digits roll like an odometer to the target value column by column with a stagger, formatted for any locale, currency or unit with Intl.NumberFormat.
Variable weight hover
Letters near the pointer swell bolder through the font's weight axis (a soft spot of weight that glides along the text on a spring), with an even-stroke fallback for fonts that have no axis.
Extruded type
Display type with a stepped 3D extrusion stacked from accent-toned text-shadows that springs deeper and swings its angle on hover or focus while the face lifts off the page.
Hover letter lift
Links or headings whose letters lift off the baseline in a quick left-to-right wave on hover or keyboard focus and hold there on a springy settle, with the accent sweeping through them and an underline drawing in.
Circular text badge
A ring of text set on a circular path that turns slowly around a centre icon or label on an accent disc, easing to a stop on hover or focus and gathering speed again after.
Pull quote reveal
A pull quote whose large quote marks draw themselves in before the words ink in one by one from a faint ghost of the text, with the attribution and its rule sliding in after the last word.
Slam headline
Display headline whose words drop onto the page one after another from oversized and askew, accelerating all the way and stopping dead with no bounce, each landing punching out a hard accent shadow that snaps back to rest.
Grid stamp text
Headline set one character per cell in a ruled grid that starts hatched and empty, then has its letters stamped in one tick at a time in a scattered order, each landing with an accent flash and a hard two-frame press.
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.
Is the text still accessible?
Yes. The full text is always available to assistive tech; the animated characters are decorative copies.
Do they work with any font?
They use your sheet’s display font by default and work with any web font.
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.