Drifting mesh
Drifting mesh
Soft colour fields drifting behind content like a slow lava lamp.
Animated backgrounds
A background sets the mood without asking for attention. These move slowly, use your palette, and go still for reduced motion.
19 live assets · React + Tailwind + Motion · restyle to your design tokens
Backgrounds
Dot grid fade
A dot grid in the line colour that fades out toward the edges through a radial mask, with an optional slow diagonal drift.
Aurora gradient
Large, heavily blurred bands tinted from the accent drift and sway slowly behind content like a northern-lights sky.
Film grain
A fine SVG feTurbulence noise overlay, tinted with the text colour and jittered a few times a second like film stock.
Light beams
Soft diagonal shafts of light, built from blurred accent and text-colour gradient strips, drift and breathe slowly behind content.
Perspective grid
Grid lines on a floor that recedes to a horizon, drifting slowly toward the viewer and fading out into a soft accent glow at the far edge.
Pulse rings
Concentric accent rings ripple outward from a point behind a call to action, a live badge or a map pin, growing and fading on a steady beat.
Floating shapes
Soft, blurred geometric shapes (circles, a rounded square, a triangle, a ring and a pill) float on slow independent loops from a fixed layout, with optional pointer parallax.
Moving stripes
Bold diagonal stripes in the accent, the text colour or both alternating drift slowly sideways behind content and fade out toward every edge through a soft rectangular mask.
Starfield
A canvas night sky of twinkling stars in three depth layers that drift at different speeds for a slow parallax, with a few accent-tinted stars and the odd shooting star; it stops drawing off screen.
Layered waves
Stacked SVG waves in deepening accent tones gently undulate along the bottom of a section, each layer travelling and bobbing at its own pace; the front wave can match the next section's colour.
Conic sweep
A soft conic-gradient light rotates slowly around a point behind content like a lighthouse beam, each arm brightening toward a leading edge and fading away from the centre and the far edges.
Topographic lines
Contour lines traced from a slowly evolving noise field drift and reshape across a canvas like a living survey map, with every fourth line drawn as a heavier accent index contour.
Dot ripple
A dot matrix that a ripple wave sweeps through on a steady beat and from every pointer press, swelling, pushing and tinting the dots in the accent as the ring passes.
Blueprint grid
A technical-drawing backdrop of fine grid lines with heavier majors, ruler ticks and coordinates along the top and left edges and blinking registration marks, swept slowly by an accent scan line.
Moiré field
Two fields of fine concentric rings, one in the text colour and one in the accent, overlap while one circles slowly around the other, so their interference ripples into shifting op-art moiré bands behind content.
Signal traces
Circuit-board traces route in from every edge toward a chip outline at the centre in straight runs with 45° bends, while glowing accent pulses travel along them and flash the pads they arrive at.
Silk lines
Ribbons of hair-thin wave lines drift sideways at different speeds and bob gently, so each ribbon slowly twists, gathers and fans out across the section like folded silk.
Orbits
Thin elliptical orbits circle a point behind content, each carrying dots or small tiles at its own pace: outer rings slower, alternate rings turning the other way, far-side bodies smaller and dimmer.
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.
Will text on top stay readable?
They’re designed as soft, low-contrast backdrops and take an intensity value you can turn down.
Do they cost much to render?
They use blurred gradients and transforms rather than canvas loops.
More of the library
Guides and articles
GuideGenerate images and animations in your sheet's coloursMake app icons, logos, illustrations, photos, backgrounds, UI screenshots and short animations that match your sheet, then get them into your project.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 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 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.