Find the light
Spotlight cursor
A soft light follows the cursor and reveals a grid underneath.
Cursor effects
Cursor effects are a signature move, best used sparingly. These stay inside the section that uses them, step aside on touch screens, and never hide the cursor from keyboard users.
14 live assets · React + Tailwind + Motion · restyle to your design tokens
Cursor & scroll
Cursor trail
A dot and a lagging ring follow the pointer inside a region on springs, and the ring swells over buttons and links.
Cursor ring
Inside a container, an accent ring trails the pointer on a spring and swells into a filled, optionally labelled disc over marked interactive children.
Hover image reveal
A list whose rows summon a floating preview card that trails the pointer, tilts with its speed and wipes up to each hovered row's artwork.
Blob cursor
A soft accent blob trails the pointer on a spring inside a region, stretching along its direction of travel, and morphs into a rounded highlight that hugs any child marked data-blob.
Label cursor
Over chosen targets a pill label (View, Drag, Play) with an optional icon springs in beside the pointer, follows it with a slight tilt and rolls its text when you move to a target with a different label.
Crosshair guides
Hairline guides cross the region at the pointer with a gap around it, edge rulers mark its position and a coordinate readout counts along, with optional snapping to a grid.
Click ripple
Concentric accent rings expand and fade from every click or tap inside a region (over buttons, cards or empty canvas alike), and keyboard presses ripple from the centre of the activated element.
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.
Magnifier lens
A round lens follows the pointer over an image or block of content and shows it magnified underneath; it hides for touch, and keyboard users can move it with the arrow keys.
Needle field
A grid of short needles behind a region swings to point at the pointer like iron filings round a magnet, the nearest growing longer and taking the accent, then settles back to a resting angle when it leaves.
Pixel trail
Every grid cell the pointer crosses inside a region lights up in the accent and fades out behind it in hard steps, filling in between samples so even fast sweeps leave a blocky, gap-free trail.
Elastic divider
A hairline divider the pointer can push: crossing it drags the line along like a string, and pushed past its stretch it slips free and wobbles back to straight on a loose spring.
Direction-aware hover
Tiles whose overlay slides in from the edge the pointer entered through and leaves through the edge it exits, so a sweep across a grid reads as one continuous motion; keyboard focus brings it up from the bottom.
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 work on touch devices?
They switch off on touch and coarse pointers, so phones get the normal interface.
Will they slow the page?
They follow the pointer with springs on transforms only, and only inside their own container.
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.