Framer — Gradient Mesh

Use in a session

Tell Claude: build [my thing] using swipe ref framer-gradient-mesh

Full recreation prompt

Recreate a landing page in the "Framer — Gradient Mesh" style (Gradient Mesh). This is a VIBE / STYLE-TRANSFER task, not a clone: apply the design DNA below to MY content and section structure, do not copy the reference's copy or exact layout.

Design DNA:
- Mood: Modern, creative, energetic-but-controlled. Design-tool confidence.
- Colors: Dark or light base with a large, soft, multi-color mesh gradient (blue-violet-pink-orange) as the hero backdrop. Vibrant but blended, never harsh.
- Typography: Clean geometric sans, large tight headline, high legibility over the gradient (often with a subtle scrim). Simple, modern hierarchy.
- Layout: Mesh-gradient hero with centered headline + CTA, followed by clean card sections on a neutral base. Gradient is the wow; rest is orderly.
- Motion: Slowly morphing/drifting mesh gradient, soft fades, hover lifts. The gradient animation is the signature motion.
- Texture: Large blurred mesh gradients, subtle grain over them to avoid banding, clean flat cards elsewhere, soft radius.
- Avoid: No banded/harsh gradients, no clutter over the gradient, no muted-only palette. Keep the mesh smooth and alive.

Imagery (generate real assets, do not use placeholders): Generate: a large, soft, multi-color mesh gradient (blue-violet-pink-orange) as the hero backdrop, plus a subtle grain overlay to avoid banding. Tool: kie-ai Flux for the mesh; add a noise PNG on top.

Reference exemplar: https://www.framer.com. Build the page around the content I give you next, faithfully channeling this aesthetic, and generate the matching imagery described above.

Reference exemplar