Take the weather with you.

Build me a complete, responsive business website in the SIMPLEX-NOISE style — the living, computed look of Stripe's animated mesh-gradient hero, Active Theory, and Lusion: the page is not decorated with a noise field, the page IS the field. One continuous procedural gradient bloom drifts forever across a deep ink canvas, unified by fine film grain, with sharp quiet type floating in its calm zones. Combine this style seed with my brief below. If I don't give you the details, invent a plausible business that suits this alive, computed feel — a creative studio, an AI product, a music label, a design tool — and build a full, real demo for it, not a placeholder. This style is a FAMILY, not a single template — the same seed should produce visibly different sites for different businesses. A few dimensions are yours to choose: the exact BLOOM PALETTE, the TYPE pairing, and the overall LAYOUT ARCHETYPE. Pick one of each that fits my brand and COMMIT to it across the whole site — every option below is equally on-style, so don't second-guess the choice with your own taste. ── INVARIANTS (never break these — they define the style) ── • ONE continuous animated simplex- (or Perlin-) noise gradient field is the page's connective tissue — render it as low-res canvas/WebGL scaled up smooth, driven by 3D noise with time as the third axis. It flows ACROSS section boundaries without seams; a section ends where the field cools, never at a line or a box edge. • Deep near-black ink ground with a faint blue/violet cast carries the whole page. Low-frequency color bloom (a huge soft glow) PLUS high-frequency monochrome film grain over everything — the grain is what makes it a crafted surface instead of a default CSS blur. • Calm text pockets: wherever body copy, a list, or a form sits, the field falls to near-flat ink — text NEVER sits on a hot bloom. Blooms anchor corners, edges, and the empty half of the hero. • No hard card borders, no boxed sections, no outlines. When grouping is needed, use faint translucent fills, not borders. • Motion is DRIFT: continuous, ease-free, time-driven — the noise itself is the easing; nothing snaps, bounces, or staggers. The field may lean/warp gently toward the cursor. Text settles at most once with a slow opacity/translate; children never stagger. Honor prefers-reduced-motion with a static frame, and keep ALL content visible without JavaScript. • No photographic backgrounds or hero images — the field, grain, contour linework, and type are the visual media. • CONTRAST (WCAG 2.2 AA, non-negotiable): every text/background pair is ≥4.5:1 for body, ≥3:1 for large/headline text. Because the ground is dark, use near-white / warm-ivory text and keep it in the cooled ink zones; verify muted secondary text still clears 4.5:1, and never let a paragraph drift over a bright bloom where the ratio collapses. ── VARIABLES (choose one of each that fits my brand, then commit) ── • BLOOM PALETTE — the ground stays deep ink; the BLOOM is yours. Bring my brand hues if I give them; otherwise choose a warm→cool pair the noise blends across soft, grain-unified transitions (never hard stops). Express it as tone and relationship: two-to-three luminous hues that meet in the middle, a warm anchor flowing into a cooler counter. Example pairs (not required): ember-orange → violet · coral → cyan · amber → teal · magenta → deep blue. Keep the transitions soft and the ground dark. • TYPE — one clean geometric or grotesque sans, kept SMALL and SHARP: the deliberate opposite frequency of the huge soft field. Loaded via Google Fonts. Pick a display weight and a body: Outfit · Space Grotesk · Inter · Instrument Sans · General Sans. Tight, precise, high-contrast against the ground. • LAYOUT ARCHETYPE — choose one and commit: a centered vertical scroll floating on the field with generous vertical space; type claiming the calm middle while blooms anchor the edges; an off-center hero with the bloom owning the empty half; thin contour/topographic linework threading behind headings; or long quiet reading columns parked entirely in cooled ink. Also settle your own hero composition, where the hottest bloom sits, and overall density. ── MEDIA MODEL (code-native, not stock photography) ── Build the visuals from CODED SURFACES — the noise gradient field, a fine grain overlay, optional SVG contour linework, and typography. That is the media. If the business genuinely needs a product or device shot, treat it as a rare quiet inset in a cooled zone, never a full-bleed photo background competing with the field. Generate marks appropriate to MY business, not a reuse of any demo. WHAT THIS SITE MUST ACHIEVE (business goal): Make it instantly clear who this business helps and what it offers; explain the value plainly; build trust with real proof (results, credentials, client names, whatever is true); and drive one clear next step — an enquiry, a booking, a demo, a call. Let the business and its brief decide which sections serve that goal, include exactly those in a sensible order, and build each one fully. BUILD REQUIREMENTS — ship a complete, usable site, not a hero mock: • Real information architecture driven by MY business and goal — whatever sections move a stranger toward acting, each with one clear job, in an order that builds understanding then trust then action. Include working navigation and a footer, all floating on the one continuous field. • Don't be lazy with any section: each carries real content depth (never a title plus one thin line), proper internal hierarchy, and the full simplex-noise treatment — but stays a calm reading pocket where the copy lives. • Real, tailored copy for MY business — quiet, precise, confident, never lorem — written to explain and reassure, matching the sharp small type. • Fully responsive and accessible: semantic landmarks, alt text, prefers-reduced-motion respected, and the CONTRAST invariant enforced on EVERY section — especially any text near a bloom. • Apply the one field, the grain, the palette, type, and layout archetype to EVERY section, not just the hero — one organism, not a decorated hero over plain pages.

Best for AI website builders that write code — Claude Code, Cursor, v0

Restyle my existing site into the SIMPLEX-NOISE look — the living, computed aesthetic of Stripe's animated mesh-gradient hero, Active Theory, and Lusion: one continuous procedural gradient field drifting forever across a deep ink canvas, unified by fine film grain, with sharp quiet type floating in its calm zones. Keep ALL of my current content, copy, pages, and structure exactly as they are; change only the visual language so the whole page becomes one breathing field. Do not invent new pages, remove sections, or rewrite my words. Keep MY brand hues — carry my existing brand colors into the BLOOM rather than swapping in new ones. The ground goes deep ink; my colors become the luminous glow the noise blends, warm flowing into cool across soft grain-unified transitions. Then make one TYPE choice and COMMIT — a clean geometric or grotesque sans that suits my brand, kept small and sharp against the field. ── INVARIANTS (never break these) ── • Merge all my section backgrounds into ONE continuous animated simplex-noise gradient field — low-res canvas/WebGL scaled up smooth, 3D noise with time as the third axis, drifting continuously and leaning gently toward the cursor. The field flows across section boundaries; a section ends where the field cools, not at a line. • Deep near-black ink ground carries the page. A low-frequency color bloom PLUS a fine high-frequency monochrome grain overlay over everything — the grain unifies field and UI into one surface. • Move any hot color AWAY from paragraphs — wherever my text, lists, or forms sit, cool the field to near-flat ink so text always reads on a quiet zone. Blooms anchor corners and edges only. • Strip card borders, boxes, and outlines — regroup my existing content with faint translucent fills instead of borders. Preserve which brand color means what, just let it live in the bloom. • Motion becomes DRIFT: continuous, ease-free, time-driven; slow every transition to a long ease with no bounce, no snap, no stagger. Honor prefers-reduced-motion with a static frame and keep content visible without JavaScript. • Never: hard card borders or boxed sections · body text over a hot bloom · snapping/bouncing/staggered motion · photographic backgrounds fighting the field · a gradient with no grain (reads as default CSS blur). ── TYPE (pick one to suit my brand, then commit) ── One clean geometric or grotesque sans, kept small and sharp — Outfit · Space Grotesk · Inter · Instrument Sans · General Sans, loaded via Google Fonts. Convert my decorative gradients and boxed panels into the one field plus translucent groupings; park any existing photo in a cooled inset rather than full-bleed behind the field. Keep it responsive and accessible — enforce WCAG 2.2 AA contrast on every block (≥4.5:1 body, ≥3:1 large): because the ground is dark, use near-white / warm-ivory text kept in the cooled zones, verify muted text still clears 4.5:1, and never leave a paragraph over a bright bloom. Restyle what already exists so every section shares the one continuous field — same content, new surface.

Paste alongside your existing site/code for an AI coding agent to apply

Design a single section in the SIMPLEX-NOISE style — the living, computed look of Stripe's animated mesh-gradient hero, Active Theory, and Lusion: a continuous procedural gradient bloom drifting over a deep ink canvas, unified by fine film grain, with sharp quiet type floating in its calm zone. A low-commitment preview of the style, built richly for whatever section I ask for. Tell me in your own words, alongside this prompt, which section you want and the job it has to do — a hero that lands who you are, a services row, a proof/results block, a project showcase, a quiet call-to-action. If I don't name one, build a hero for a plausible business you invent that suits this alive, computed style. Whatever the section, build it fully and richly — don't be lazy: real, tailored copy, proper hierarchy, and depth, not a title plus one thin line. ── INVARIANTS ── • The section background is ONE living simplex-noise gradient field — low-res canvas/WebGL scaled up smooth, 3D noise with time as the third axis, drifting continuously forever and leaning gently toward the cursor. Deep near-black ink ground + a low-frequency color bloom + a fine high-frequency grain overlay over everything. • Type sits in a CALM POCKET where the field cools to near-flat ink — never on the hot part of the bloom. No card borders, no boxes, no outlines; group with faint translucent fills if needed. • Motion is drift only: continuous, ease-free, no snap, no bounce, no stagger; text settles at most once with a slow opacity/translate. Honor prefers-reduced-motion with a static frame; content visible without JavaScript. • Never: hard borders/boxes · body text over a hot bloom · a gradient with no grain · photographic background fighting the field. ── VARIABLES (pick one of each, commit) ── • BLOOM PALETTE — ground stays deep ink; bring my brand hues if I give them, otherwise choose a warm→cool pair the noise blends soft (ember → violet · coral → cyan · amber → teal · magenta → deep blue — examples, not required). Keep transitions soft and the ground dark. • TYPE — one clean geometric or grotesque sans, small and sharp: Outfit · Space Grotesk · Inter · Instrument Sans · General Sans, via Google Fonts. Build the section from CODED SURFACES — the field, the grain, optional SVG contour linework, and sharp type. If it genuinely needs an image, park a real placeholder <img> in a cooled pocket, never a full-bleed photo fighting the field and never a fake colored div standing in for a photo. Include one quiet pill or text CTA where the section's job calls for it. Make it responsive and accessible — WCAG 2.2 AA contrast (≥4.5:1 body, ≥3:1 large): near-white / warm-ivory text kept in the cooled zone, muted text still clearing 4.5:1, never a line over a bright bloom. Write real, tailored copy for the subject, not lorem.

Good for a focused first pass, or a chat-based assistant like ChatGPT/Claude