Split hero
Landing hero whose headline slides up line by line beside an abstract product frame that rises and settles into place on scroll.
Landing page sections
Whole sections, not just widgets: drop in a pricing block or a feature grid and it arrives with motion, accessibility and your tokens already applied.
39 live assets · React + Tailwind + Motion · restyle to your design tokens
Components
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.
Pricing with billing toggle
Three-plan pricing section whose monthly/yearly switch slides its indicator while every price rolls digit by digit to the new amount.
Feature bento
Asymmetric bento grid of feature cells with icons and small visuals that rise in on a stagger and lift slightly on hover or focus.
Logo marquee
Trusted-by strip of text wordmarks gliding in an endless loop behind soft edge fades, easing to a stop on hover.
Testimonial rotator
Testimonial section that cycles quotes with a crossfade and short slide, with dot picker, arrow keys and auto-advance that pauses on hover or focus.
FAQ section
Two-column FAQ with heading, intro and contact link beside a disclosure list whose answers ease open to their natural height.
Border-beam CTA band
Call-to-action band whose rounded border carries a beam of accent light travelling around it, with headline and buttons.
Count-up stats band
Row of headline stats split by hairline dividers whose numbers count up from zero once the band scrolls into view.
Footer with newsletter
Site footer with brand block, link columns and a newsletter field whose subscribe button morphs into a spinner and then a check.
How it works steps
Numbered three-to-four step section whose steps pop in one after another while an accent connector line draws from each step to the next on scroll.
Alternating feature rows
Alternating text-and-media feature rows where copy and token-drawn product art slide in from opposite sides as each row scrolls into view.
Comparison table
Plan or us-vs-them comparison on a real table, with a highlighted column band, rows revealing on a stagger and check and cross glyphs that draw in.
Team grid
Team section of initials-avatar cards that rise in on a stagger and lift on hover or focus to slide up a short bio and profile link.
Article grid
Blog section of article cards with token-drawn covers, category chips and read times that rise in on a stagger and lift with a slow cover zoom on hover.
Newsletter band
Newsletter sign-up band whose button shrinks into a spinner and then stretches across the field into a success message, shaking on invalid or failed sign-ups.
Contact section
Contact section with an info column and a name, email and message form that validates inline and moves through sending and sent to a success panel.
Integrations hub
Integrations section with your product as a centre hub whose connector lines draw out to generic app tiles that pop in as each line arrives.
Roadmap timeline
Vertical roadmap grouped by quarter whose progress line fills to the latest shipped or in-progress milestone, lighting status dots as it passes.
Error page section
404 or error section whose oversized code assembles from split glyph halves and then wobbles digit by digit above a message and two actions.
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.
Split CTA
Two-column call to action with copy and a checklist beside a compact email form that slides aside for a success panel with a drawn check.
Tabbed features
Feature tabs that crossfade a large screenshot panel, with an accent progress line that auto-advances to the next tab and pauses on hover, focus or its pause button.
Testimonial wall
Masonry wall of quote cards whose columns drift slowly in alternating directions behind soft fades, easing to a stop on hover with a visible pause button.
Changelog list
Dated release notes on a rail with New, Improved and Fixed tags, collapsible details and each date pinned beside its entry on wide screens.
App download section
Mobile-app section with neutral text download buttons beside a phone frame that springs into place, floats and tilts toward the pointer over expanding rings.
Feature spotlight
Large screenshot with numbered callouts where a spotlight glides from one to the next in sequence and jumps to any callout whose list item is hovered or focused.
Open roles
Careers section with team filter chips and counts above role rows that collapse away or rise in on a stagger as the filter changes.
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.
Search 404
404 that names the missing path in mono and offers a search field whose suggested links filter as you type, plus a way home.
Spotlight 404
Dark 404 where a soft spotlight follows the pointer (or drifts on its own on touch) across oversized numerals and finds the way home.
Editorial 404
Paper-toned 404 with a serif numeral across ruled columns and an index of likely destinations whose rules draw in line by line.
Detached page 404
Playful 404 where a page card hangs off a grid by one pin and swings on a spring when nudged, beside a home button and a few links.
Server error section
500 screen that owns the fault plainly, with a Retry that spins while onRetry runs, a copyable error reference and an optional status link.
Maintenance section
Scheduled maintenance screen showing the window in the viewer's local time, a progress line through it and an optional notify-me email field.
Offline screen
Offline state whose signal arcs fade out one by one, listening to online and offline events with an auto-retry countdown, then a back-online confirmation.
Access denied section
403 screen with a padlock that gives a small shake, the signed-in account, Request access that morphs into a sent state, and a switch-account link.
Expired link section
Expired or already-used link screen with an hourglass that runs out, a masked email and Send a new link with a resend cooldown.
Redirect notice
Moved-page or leaving-site notice showing the destination, a slab countdown bar that redirects when full, Go now and Stay here, pausing on hover or focus.
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 sections animate on scroll?
They play their entrance once as they enter the viewport, and show the final state straight away with reduced motion.
Can my agent assemble a whole page?
Yes. Ask for a landing, pricing, about, contact, blog, features, changelog, careers or 404 page and it gets one built from your sheet’s own sections, in order, with your values filled in.
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 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 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 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.