Gradient Mesh Brand Film
A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart cards float in front of it at different depths.
Written and rendered by AI CSS Animations Oct 12, 2026
- Type
- prompt
- Made with
- Claude Opus 5.5 in Claude Code
- Built in
- Canvas
- Topics
- Product UI · Kinetic type · Landing page
About this style
Gradient mesh hero films pair a fluid, animated field of color with crisp typography and floating product UI. The gradient carries mood and brand color, while the cards show there is a real product underneath. Fintech and developer-platform brands favor the look because it reads as modern and technical without needing photography or illustration.
The prompt
Make a 10-second developer-platform hero film: a slow gradient mesh flows behind crisp type while product UI cards float in front.
<inputs>
If I don't give you something, use the default and don't ask.
- Brand: Northwind
- Headline: "Move money the way you move data."
- Subline: "One API for payments, payouts and treasury."
- Mesh colors: #6A4CFF, #FF5C8A, #FFB23F, #18C2E6
- Ink: #0B1736
- Length: 10 seconds
</inputs>
<direction>
- Composition: light page #F7F8FC. The mesh fills a band skewed −11° across the top 60% of frame, bleeding off three edges. The headline sits left on a 12-column grid (128px margins), overlapping the band's lower edge; cards stack in the right third.
- Mesh: a WebGL fragment shader blending the four colors through two layers of domain-warped simplex noise, stretched 2.5:1 horizontally so color moves in broad ribbons, not blobs. Drift slowly (≈0.05 field units/s), add ±1.5% grain against banding, and lighten near the band's lower edge for legibility. Clip the canvas to the band with clip-path.
- Type: Plus Jakarta Sans. Headline 112px/1.02, weight 700, −0.03em, ink, two lines at most; subline 34px, weight 500, #425466; code in Geist Mono 22px.
- Cards: white, 18px radius, 1px rgba(11,23,54,0.06) border, shadow 0 28px 56px −20px rgba(16,24,64,0.3), sharing one 3D space (perspective 1800px, rotateY −9°, rotateX 5°) at different depths: a payment ("€1,240.00 · Halcyon Studio", status pill), an API request (POST /v1/payouts, syntax colors from the mesh) and a volume chart ("+38%").
- Motion: entrances 0.8–1.1 s on cubic-bezier(0.22, 1, 0.36, 1); headline words rise 40px out of a mask, 70 ms apart; each card drifts ±6px on its own 5 s sine. Nothing snaps or overshoots.
- Premium is a slow, broad mesh, sharp type over color, and cards that look like real product.
Banned: a two-color linear gradient posing as a mesh, more than four mesh colors, fast mesh motion, glassmorphism, stock illustration, lorem ipsum, emoji, real company names.
</direction>
<structure>
- 0.0–1.2: The mesh blooms from its center and settles into its skewed band.
- 1.2–2.8: The headline rises in, line by line.
- 2.8–3.8: The subline and two buttons fade up ("Start building" in ink, "Read the docs" outlined).
- 3.8–6.0: Cards slide in from the right, 180 ms apart; the API card types at 40 chars/s; the chart line draws.
- 6.0–7.6: The payment pill flips Processing → Succeeded as its check draws; the volume counts up to +38%.
- 7.6–10.0: Hold; mesh and cards keep breathing.
For other lengths, scale the beats; hold the end at least 2 s.
</structure>
<build>
- One self-contained index.html (inline CSS and JS) with a fixed 1920×1080 (16:9) stage scaled to fit the window; design for 60fps.
- window.seek(t), t in seconds, sets every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames. Randomness comes from a seeded PRNG; springs are closed-form functions of time.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser; with ?render, don't start that loop.
- Google Fonts via <link> are fine. Render the mesh in a WebGL shader inside seek with time as a uniform (preserveDrawingBuffer: true); type and cards are HTML/CSS on top. No three.js.
</build>
<check>
Before showing me, screenshot seek(0) through seek(10), one frame per second, and look at each. Fix overlaps, clipped or cramped text, and anything generic. The headline must stay readable over the brightest mesh color, with no banding and no card covering it. Confirm the final frame holds.
</check> Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.
Similar prompts
Glass panels with real refraction float over vivid, striped color: their rims bend what's behind them, two buttons fuse…
A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…
Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…
One black pill on a phone screen morphs into a notification, a live card and a music player on closed-form springs that…