The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Generative Art Studio Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A three-page site for [BRAND], the studio of [ARTIST] in [CITY], making [PRACTICE]. The site is its own demo: every section background is a live, seeded canvas, and one global seed (input, regenerate button, shareable URL hash) redraws all of them deterministically. Pages: Studio, Gallery of 24 fixed-seed pieces with a large data view, and a Print Shop that draws the chosen seed in CSS frames on a code-drawn wall with a browser-only cart.

- Audience: People who buy art for their walls and enjoy seeing how it is made: designers, architects, developers, collectors of affordable prints. The buyer of the template is a generative artist, creative coder or print seller.
- Goal: Make a visitor play with the seed within ten seconds, find a picture they like, and carry that exact seed to the shop to configure a [PRODUCT].
- Tone: Dry, exact, a little funny. A workshop that keeps good notes. Short sentences, real numbers, no art-speak and no talk of magic.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Plain CSS (custom properties)
- Libraries: react, react-dom 18 (MIT), simplex-noise 4 (MIT), lucide-react (ISC), @fontsource-variable/syne (OFL-1.1), @fontsource-variable/instrument-sans (OFL-1.1), @fontsource-variable/martian-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with the Vite react-ts template. In vite.config.ts set base: './' and build.sourcemap: false.
  - No router library. Write a small useHashRoute hook. Route format: #/ , #/gallery , #/shop , each with an optional query: #/gallery?seed=4417&piece=1187 , #/shop?seed=4417&algo=flow . A missing or invalid seed falls back to the default 4417; a missing piece means no overlay is open.
  - Keep all copy, piece titles, prices and FAQ answers in src/content.ts. When the variable values differ from the defaults, rewrite that copy to fit the new brand, artist and product, and keep the same structure and lengths. Derive brandSlug in content.ts from [BRAND] (lowercase, hyphenated) and use it for the email address, the cart storage key and PNG file names.
  - Files: src/art/prng.ts, src/art/palettes.ts, src/art/flowField.ts, src/art/circlePacking.ts, src/art/contours.ts, src/art/subdivision.ts, src/art/engine.ts, src/content.ts, src/seed.tsx (seed context), src/components/ (ArtCanvas, TopBar, SeedDock, InstrumentPanel, Panel, FramedPrint, WallScene, CartDrawer, PieceOverlay, Footer), src/routes/ (Studio.tsx, Gallery.tsx, Shop.tsx), src/styles.css.
  - prng.ts, written from scratch: hash the string `${seed}:${salt}` with 32-bit FNV-1a to get an initial state, then return a function producing floats in [0,1) from a multiply-and-xorshift step on that 32-bit state. makeRng(seed, salt) is the only randomness used in art. Math.random is used in exactly one place: choosing a new seed on Regenerate.
  - palettes.ts: the six art palettes listed under Imagery, in that exact order. A section's palette index is (seed + paletteOffset) % 6; a gallery piece uses seed % 6 with no offset. Default seed 4417 therefore gives Ink Riot in the hero.
  - engine.ts exports renderPiece({ canvas, seed, algorithm, salt, paletteIndex, mode }) where mode is progressive or final. Every algorithm is a generator that fills the background, then yields after small batches. The engine runs it in requestAnimationFrame with an 8 ms budget per frame, returns { cancel, done, params } and reports progress from 0 to 1. Starting a new job on a canvas cancels the old one. deriveParams(seed, algorithm, salt) returns the same numbers without drawing, for the instrument panel.
  - Composition must not depend on pixel size. Noise coordinates are x / shortSide and y / shortSide. Stroke widths and radii scale with shortSide / 900. Element counts scale with area / (1440 * 900). Same seed, salt and aspect ratio means the same picture. Canvas device pixel ratio is clamped to 1.5. Guard every getContext call against null.
  - Flow field: createNoise2D(rng) angle field, angle = noise(x*freq, y*freq) * TAU * turns. Derived: freq 1.6-4.2, turns 1-3, particles 2400 at 1440x900, steps 70-190, step length 1.4-2.2, line width 0.5-1.8, alpha 0.85. Color weights across the four inks: 46, 28, 18, 8 percent. Strokes are thin and overlap freely, reading like combed silk. The artist-section instance (salt 'artist') uses 6000 particles and width 0.4-0.9.
  - Circle packing: rejection sampling with a uniform grid hash. Derived: 9000 attempts at 1440x900, radius from 0.004-0.007 up to 0.06-0.14 of the short side, with the local maximum radius modulated by low-frequency noise, gap 1.5 px, at most 1400 circles. Sort largest first and draw in that order. Each circle is one of: solid fill 55 percent, concentric rings 30 percent, half-and-half split disc 15 percent.
  - Noise contours: fractal noise with 2-4 octaves, freq 1.2-3.4, 9-15 levels. Marching squares on a 5 px grid (10 px on phones). For each level from low to high, fill the part of every cell above the threshold with the next palette ink, then stroke the isoline as a 1 px hairline in the palette background. One level is revealed per batch of rows.
  - Subdivision: recursively split the rectangle at a ratio of 0.32-0.68, across the longer side, depth 4-7, with a stop chance of 0.12-0.28 per split. Each leaf gets a fill plus one pattern: none, parallel hatch at 0 or 45 degrees, dot grid, or a quarter arc. A 2 px gap in the background color separates leaves. Leaves appear in shuffled order.
  - ArtCanvas component: absolutely positioned, full-bleed, aria-hidden. It starts a progressive render when within 200 px of the viewport. Fallback: 2500 ms after a route loads, any canvas not yet started renders in final mode, one at a time, so no section is ever left blank. Re-render on seed change and on a width change, debounced by 250 ms. Ignore height-only resizes on phones.
  - Gallery thumbnails render through a single queue at 480x640 (240x320 on phones), start on IntersectionObserver, and cache the result in a Map keyed by seed and algorithm. The print shop, cart and overlay reuse the cache.
  - Regenerate writes the new seed with history.replaceState and updates React state directly. All internal links carry the current seed. Pressing R regenerates when focus is not in an input. A polite aria-live region announces the new seed.
  - Cart: React state mirrored to localStorage under `${brandSlug}-cart`. Wrap every read and write in try/catch, and keep the page working when storage throws. Copy link uses navigator.clipboard inside try/catch and shows a fallback selected text field if it fails.

## Variables
- [BRAND] — Studio name (default: "Quillfield"). Invented studio or project name. Used in the wordmark, title tag and all copy.
- [ARTIST] — Artist name (default: "Tove Adeyemi"). An invented person, or yourself. Goes in the bio and hero line.
- [CITY] — Studio city (default: "Rotterdam"). Where the studio is. Goes in the hero line and the address.
- [PRACTICE] — What the studio makes (default: "seeded generative prints drawn by pen plotter and pigment printer"). A plural noun phrase that reads well after 'making'.
- [PRODUCT] — What the shop sells (default: "archival pigment print"). Singular noun phrase for the item that gets framed.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/generative-art-studio-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Ink Violet `#160A33` — Site base, panel backing, text on bright buttons, footer
- Deep Violet `#2A1A5E` — Raised surfaces, input fields, chip backgrounds, default wall color
- Hot Coral `#FF4D3D` — Secondary buttons (Ink Violet text), large display accents, cart count badge. Never small text on panels
- Acid Yellow `#E6FF2E` — Primary buttons (Ink Violet text), highlighted H1 line, focus rings, active states, progress bar
- Electric Teal `#14E0C8` — Mono data values in panels, links, selected chip outline
- Ultramarine `#1B10A8` — Alternate raised surface in the gallery overlay and cart header
- Moon `#F4EFFF` — Primary text on violet, print mat color
- Lilac `#C4B9E6` — Secondary text and mono labels on violet
- Panel `rgba(22, 10, 51, 0.88)` — Backing for all text over art, with backdrop-filter: blur(14px). Hero headline lines use solid #160A33

### Typography
- Display: H1, H2, wordmark, prices in the configurator. CSS family 'Syne Variable'. H1 clamp(44px, 7.4vw, 112px) line-height 0.98 letter-spacing -0.02em; H2 clamp(32px, 4.4vw, 64px) line-height 1.02: Syne (OFL), weights 700/800
- Text: paragraphs, buttons, FAQ. CSS family 'Instrument Sans Variable'. Body 17px line-height 1.55, 16px on phones. Buttons 15px weight 600: Instrument Sans (OFL), weights 400/500/600
- Mono: instrument panels, seeds, parameter tables, captions, nav. CSS family 'Martian Mono Variable'. 11px on desktop, 12px on phones, uppercase labels with letter-spacing 0.08em, line-height 1.5: Martian Mono (OFL), weights 300/400/500

### Layout & motion
- Spacing: 8 px base. 12-column grid, max width 1360 px, 24 px gutters, 16 px side gutter on phones. Sections are min-height 100svh on desktop, auto with 72 px vertical padding on phones. Panels have 24 px padding (16 px on phones). Art always bleeds to the viewport edge; only content sits on the grid.
- Radius: 0 on art, frames, cards and panels. 2 px on buttons, inputs and chips. Panels get a 1 px border of rgba(244, 239, 255, 0.22). No shadows on UI; only framed prints cast a shadow on the wall.
- Motion: Art is the main motion. On load, Regenerate and scroll entry, each canvas fills with its palette background and draws progressively: hero complete in about 2.4 s, others in about 2-3 s.
- Motion: Instrument panel values change instantly on Regenerate. The draw percent counts up and a 2 px Acid Yellow progress bar fills, then the render time in ms appears.
- Motion: Text panels rise 16 px and fade in over 400 ms ease-out when they enter the viewport, staggered by 80 ms. All are forced visible 2500 ms after route load so nothing stays hidden.
- Motion: Route change: a 180 ms opacity fade on the main content. The cart drawer slides in over 260 ms. The piece overlay fades in over 200 ms.
- Motion: Print shop: changing size animates the framed print's width over 320 ms ease-in-out; changing frame cross-fades the frame style over 200 ms.
- Motion: Regenerate button icon spins once per press (500 ms). Buttons shift 1 px up on hover. Gallery cards show a 2 px Acid Yellow outline on hover and focus.
- Motion: prefers-reduced-motion: render every canvas in final mode without visible stroke drawing and blit the finished frame in one paint. Disable panel rise, route fade, icon spin and frame animation. Regenerate still works.
- Imagery: All artwork is drawn live on canvas by this site's own code. There are no stored art files. Art palettes, in this exact order, as background then four inks. 0 Furnace: #2A0636, #FF2E63, #FFB800, #FF7A1A, #FFF1D6. 1 Ink Riot: #160A33, #FF4D3D, #E6FF2E, #14E0C8, #F4EFFF. 2 Deep Reef: #03203A, #14E0C8, #2E7BFF, #E6FF2E, #FF6FB5. 3 Acid Bloom: #0B2A16, #C8FF00, #00E58A, #FF4D9D, #F6F7D8. 4 Ultra: #1B10A8, #FF5A36, #FFE500, #39F3D0, #F2F0FF. 5 Hot Paper: #FF4D3D, #160A33, #E6FF2E, #1B10A8, #FFF4E8. The only photographs are three generated documentary shots of the fictional artist and her workshop, shown with a 1 px Acid Yellow border. The wall scene and favicon are drawn in SVG.

## Pages & Sections
### Studio (`#/`)
1. **Shared top bar (all pages)** — Wordmark [BRAND] in Syne 800, 20 px, preceded by a small code-drawn SVG mark: a quarter circle plus three short strokes. Nav in mono: Studio, Gallery, Shop. Right side: SEED label, 6-digit numeric input showing the current seed, a Regenerate icon button (Lucide RefreshCw, aria-label 'Regenerate'), a Copy link icon button (Lucide Link), and a cart button (Lucide ShoppingBag) with a Hot Coral count badge.
   Layout: Fixed, 64 px tall, solid #160A33 with a 1 px bottom border. Directly under it, a 4 px strip split into four equal blocks showing the hero palette's four inks, which changes with the seed. Under 768 px the bar is 56 px with wordmark, cart button and a Lucide Menu button that opens a full-width sheet of the nav links; the seed controls move to the seed dock.
   Motion: Active nav link is underlined in Acid Yellow. The ink strip swaps instantly on seed change.
2. **Shared seed dock (phones only, all pages)** — SEED label, numeric input, Regenerate button labeled 'Regenerate' in Acid Yellow.
   Layout: Under 768 px only: fixed to the bottom, 60 px tall, solid #160A33, safe-area padding, targets at least 44 px. The footer gets 76 px of extra bottom padding so nothing is covered. The input accepts digits only, 0 to 999999, and commits on Enter or blur.
3. **Hero** — H1, two lines: 'One number draws' / 'this entire page.' with the second line in Acid Yellow. Paragraph: 'Quillfield is the studio of Tove Adeyemi, making seeded generative prints drawn by pen plotter and pigment printer in Rotterdam. Type a seed or press regenerate. Every background on this site redraws, and the same seed always draws the same picture.' Buttons: primary 'Regenerate' (Acid Yellow), secondary 'Frame this seed' (Hot Coral) linking to #/shop with the current seed. Instrument panel rows in mono, labels Lilac and values Electric Teal: SEED 004417, ALGORITHM Flow field, PALETTE Ink Riot with four small swatches, PARTICLES, STEPS, NOISE FREQ, TURNS, DRAW 0-100 percent with progress bar, RENDER in ms. Panel footer buttons: Copy link and Download PNG. Download PNG runs a final-mode render at 2000x1250 offscreen and saves `${brandSlug}-seed-${seed}-flow-field.png`.
   Layout: 100svh full-bleed flow-field canvas, salt 'hero', paletteOffset 0. Desktop: headline block bottom-left on columns 1-8 with 64 px bottom margin; each H1 line is an inline span with solid #160A33 background, padding 0.04em 0.16em and box-decoration-break: clone. Paragraph and buttons sit under it in a Panel, max width 560 px. Instrument panel is bottom-right on columns 9-12, 360 px wide, bottom-aligned with the headline block. Phone: top padding 72 px, H1, paragraph panel, buttons, then a compact panel showing only ALGORITHM, PALETTE and DRAW with a 'Parameters' disclosure for the rest. Leave at least 25 percent of the art uncovered on both sizes.
   Motion: Flow field strokes draw progressively on load and on every seed change. The headline block rises on first load only.
4. **Method** — H2: 'A number goes in. A picture comes out.' Three numbered panels. 01 Seed: 'A whole number from 0 to 999,999. It sets every decision below it, so the same number always returns the same picture.' 02 System: 'Four algorithms written in this studio: flow field, circle packing, noise contours, subdivision. Nothing is borrowed and nothing is trained.' 03 Surface: 'When a seed earns its place, it goes out as an archival pigment print, checked by hand against the screen proof.' Stat row in mono with Syne numerals: '1,000,000 seeds', '4 algorithms', '6 palettes', '212 prints shipped last year'.
   Layout: Full-bleed circle-packing canvas, salt 'method', paletteOffset 1. H2 in a Panel on columns 1-7. The three panels sit on a 12-column row at columns 1-4, 5-8, 9-12 with stepped top margins of 0, 64 and 128 px. Stat row is a full-width solid #160A33 band at the section bottom with four equal cells. Phone: one column with no stepping; stats form a 2x2 grid.
   Motion: Circles draw largest first when the section enters. Panels rise with stagger.
5. **Selected seeds** — H2: 'Seeds that earned a wall.' Paragraph: 'Most numbers make mud. We keep about one in four hundred. These six stayed.' Six cards using gallery pieces 40213, 2718, 4096, 1024, 7702, 55012. Each shows a 3:4 thumbnail and a mono caption with seed, title and algorithm, and links to #/gallery with piece set. Button: 'Open the full gallery'.
   Layout: Full-bleed noise-contours canvas, salt 'selected', paletteOffset 2. Heading panel on columns 1-5. Below, a horizontal scroll-snap row of cards 280 px wide with 16 px gaps that bleeds past the right edge; at 1440 wide about 4.5 cards are visible. Captions have solid #160A33 backing. Phone: cards 72 vw wide.
   Motion: Contour levels fill low to high on entry. Cards show the Acid Yellow outline on hover.
6. **Shop teaser** — H2: 'This exact picture, on paper.' Paragraph: 'You are looking at seed {seed}. Order it as an archival pigment print and we print that number, not a lookalike.' List in mono: 'From $78 unframed', '4 sizes, 12 x 16 to 36 x 48 in', '3 frames or rolled', 'Rolled ships in 5 business days, framed in 12'. Button: 'Frame seed {seed}' (Acid Yellow), linking to #/shop with the current seed. {seed} is live.
   Layout: Full-bleed subdivision canvas, salt 'teaser', paletteOffset 3. Desktop two columns: columns 2-6 hold a FramedPrint of the current seed in black ash with mat, 3:4, about 460 px wide, with a soft wall shadow. Columns 8-12 hold the Panel. Phone: print first at full width minus gutters, then the panel.
   Motion: Subdivision leaves appear in shuffled order. The framed print redraws progressively on seed change.
7. **Artist** — H2: 'I write the rules, then get out of the way.' Bio: 'Tove Adeyemi spent eleven years drawing shipping charts for a harbor authority before she wrote her first flow field on a night train. She founded Quillfield in a former rope workshop in Rotterdam, where two pen plotters and one large-format pigment printer now run most days. Every algorithm on this site was written here, and every print is checked against its screen proof before it ships.' Facts table in mono: STUDIO 'Studio 4B, 19 Ropemaker Yard, Rotterdam'; OPEN 'Saturdays 11:00-16:00, other days by appointment'; EMAIL '[email protected]' as a mailto link; SHOWN AT 'Harbor Light Print Fair', 'Kiln Street Project Space', 'Northbank Editions Week'. Button: 'Browse the gallery'.
   Layout: Full-bleed flow-field canvas, salt 'artist', paletteOffset 4 (with default seed 4417 this is the coral Hot Paper ground). Desktop: portrait photo on columns 1-4 at 3:4, plotter photo at 4:3 on columns 4-6 overlapping the portrait's lower-right corner by 48 px. Bio panel on columns 7-12. Phone: portrait full width, plotter photo below it at full width, then the panel.
   Motion: Hairline strokes draw progressively. Photos rise 16 px on entry.
8. **Shared footer (all pages)** — Left: [BRAND] wordmark in Syne 800 at clamp(48px, 9vw, 140px). Mono line: 'This page was drawn from seed {seed}.' with a 'Copy link' button. Columns: Pages (Studio, Gallery, Shop); Visit (address and hours from the artist section); Write (email). Bottom row in mono: '[BRAND], [CITY]' and, if [CREDIT] is kept, its small link.
   Layout: Solid #160A33, 1 px top border, 72 px padding. Above it, a 96 px full-bleed strip canvas running subdivision with salt 'footer' and paletteOffset 5. Columns stack on phones.

### Gallery (`#/gallery`)
1. **Gallery header** — H1: '24 numbers worth keeping.' Paragraph: 'Every piece below is drawn live in your browser from the seed printed beneath it. Nothing here is a stored image.' Filter chips in mono with counts: All 24, Flow field 6, Circle packing 6, Noise contours 6, Subdivision 6.
   Layout: 60svh full-bleed noise-contours canvas, salt 'gallery-head', paletteOffset 3. Headline in a Panel at bottom-left, columns 1-7. Chips sit in a solid #160A33 bar directly under the canvas, sticky under the top bar; horizontal scroll on phones.
   Motion: Contours fill on load and on seed change. Chips switch instantly; the active chip has an Electric Teal outline.
2. **Piece grid** — 24 fixed pieces (seed, title). Flow field: 1187 Slack Water; 40213 Tidewrack; 7702 Undertow; 92814 Ember Drift; 30505 Long Exposure; 615003 Salt Wind. Circle packing: 2718 Frogspawn; 55012 Bubble Chamber; 8086 Pollen Count; 310441 Lily Raft; 19937 Full Car Park; 777001 Coin Jar. Noise contours: 4096 Imaginary Fjord; 66060 Heat Map of Nowhere; 12345 Thumbprint; 250753 Slow Landslide; 90909 Weather Front; 505050 Agate. Subdivision: 1024 Allotments; 31337 Floor Plan; 864200 Shipping Manifest; 16180 Golden Excuse; 70707 Window Count; 428571 City Block. Each card: 3:4 thumbnail canvas, mono caption with seed in Electric Teal, title in Moon, algorithm in Lilac. These seeds do not change with the global seed. In the grid and overlay, order the pieces as listed.
   Layout: Grid of 4 columns with 16 px gaps at max width 1360 px, 2 columns on phones with 12 px gaps. Behind the grid, a sticky viewport-height canvas (position: sticky; top: 0; height: 100vh; negative bottom margin) running flow field with salt 'gallery-bg' and paletteOffset 1, driven by the global seed. Captions have solid #160A33 backing. Below 24 cards, a Panel with 'Found one? Hang it.' and a button to #/shop.
   Motion: Thumbnails render as they near the viewport through the queue, each fading in over 200 ms when finished. Hover shows the Acid Yellow outline.
3. **Piece large view** — Opens when a card is clicked and sets ?piece=<seed> in the hash, so it is shareable. Left: the piece on a large canvas drawn progressively. Right, in mono: title in Syne 700; SEED; ALGORITHM; PALETTE name; five color swatches each with its hex code; a parameter table from deriveParams; ELEMENTS drawn; RENDER ms. Buttons: 'Frame this piece' (Acid Yellow), linking to #/shop with seed and algo set; 'Use this seed on the site' (outline), setting the global seed. Prev and next buttons (Lucide ChevronLeft, ChevronRight) and close (Lucide X).
   Layout: Fixed full-viewport dialog, background Ultramarine #1B10A8, with the canvas at up to 80vh tall, 3:4, on the left and a 380 px solid #160A33 data column on the right. Phone: canvas on top at full width, data below, whole dialog scrolls. Focus is trapped; Esc and the close button clear the piece param; left and right arrow keys move between pieces.
   Motion: Fades in over 200 ms. Strokes draw progressively, or appear finished with reduced motion.

### Print Shop (`#/shop`)
1. **Configurator** — H1: 'Pick a number. Hang it.' Controls in a Panel. Seed: the shared seed input plus 'Surprise me', which regenerates. Algorithm segmented control: Flow field, Circle packing, Noise contours, Subdivision. Size radios, all 3:4: 12 x 16 in $78; 18 x 24 in $140; 24 x 32 in $240; 36 x 48 in $460. Frame radios with add-on by size in the same order: Unframed (rolled) +$0; Black ash +$65/$95/$140/$220; Natural oak +$75/$110/$160/$250; Coral lacquer +$85/$120/$175/$270. Wall preview swatches, preview only: Deep Violet #2A1A5E, Coral #FF4D3D, Teal #0E7C74, Acid #E6FF2E. Summary in mono, e.g. '18 x 24 in, black ash, seed 4417' and the price in Syne 800, default $235. Button: 'Add to cart' (Acid Yellow). Note: 'Rolled prints ship in 5 business days, framed in 12. Each seed is capped at 10 prints per size.' Defaults: current global seed, or the seed and algo from the hash; algo flow; 18 x 24 in; black ash; Deep Violet wall.
   Layout: Sticky viewport-height subdivision canvas behind the section, salt 'shop-bg', paletteOffset 4. Desktop: H1 in a Panel on columns 1-8 above WallScene on columns 1-8; control panel on columns 9-12, sticky at top 88 px. WallScene is an SVG room, 16:10: wall fill from the swatch, Ink Violet floor band at the bottom 16 percent, a low sideboard with a stem vase and a globe pendant lamp with a radial light gradient, all flat shapes with no brand references. The FramedPrint is an absolutely positioned 3:4 canvas centered above the sideboard, scaled so the scene is 120 inches wide, so 36 x 48 looks really large next to the sideboard. Frames in CSS: Black ash 18 px #17141C with inner shadow; Natural oak 18 px repeating-linear-gradient grain between #C89A5B and #A97B3F; Coral lacquer 18 px #FF4D3D with a thin highlight; each framed option has an 8 percent #F4EFFF mat. Unframed has no border, two small clips and a thin shadow. Frame widths scale with the print. Phone: H1, WallScene full width, then controls in normal flow.
   Motion: Size change animates width over 320 ms. Frame change cross-fades over 200 ms. The print redraws progressively on seed or algorithm change. Adding to cart opens the cart drawer.
2. **Studio picks** — H2: 'Six we would hang ourselves.' Cards, each a FramedPrint plus title, seed, size, frame and computed price: 40213 Tidewrack, 18 x 24, black ash, $235; 55012 Bubble Chamber, 12 x 16, coral lacquer, $163; 66060 Heat Map of Nowhere, 24 x 32, natural oak, $400; 31337 Floor Plan, 18 x 24, natural oak, $250; 615003 Salt Wind, 36 x 48, black ash, $680; 90909 Weather Front, 12 x 16, unframed, $78. Button on each: 'Load this one', which sets seed, algorithm, size and frame in the configurator and scrolls up to it.
   Layout: Full-bleed noise-contours canvas, salt 'picks', paletteOffset 2. H2 in a Panel on columns 1-6. 3-column grid of cards with solid #160A33 captions; prints sit on a Deep Violet card ground with 32 px padding. 1 column on phones.
   Motion: Cards rise with stagger. Thumbnails come from the render queue.
3. **Paper and framing** — H2: 'What actually arrives.' Three columns: Paper: '310 gsm cotton rag with a matte surface. Acid free, and heavy enough to lie flat.' Ink: 'A 12-color pigment set, proofed by hand against the screen before anything ships.' Frame: 'Solid ash, oak or lacquered poplar with UV-filtering acrylic. Wired and ready to hang.' Mono line: 'Rolled: tube, $18 flat. Framed: crate, $48 flat. US and EU.'
   Layout: Full-bleed circle-packing canvas, salt 'paper', paletteOffset 5. Proof-table photo at 4:3 on columns 1-6; Panel with H2 and three stacked text blocks on columns 7-12. Phone: photo, then panel.
   Motion: Circles draw largest first on entry.
4. **Collector notes** — Three quotes. Priya Raman, architect: 'We picked seed 40213 because it is our old house number. It turned out to be the best picture on the list.' Jonas Weil, software engineer: 'I checked the link a year later. Same seed, same picture. That is why I trust the print.' Dalia Mensah, cafe owner: 'Three 36 x 48 pieces on a brick wall. Customers keep asking what the numbers mean.'
   Layout: Solid Ultramarine #1B10A8 band with a 96 px subdivision strip canvas at the top (salt 'notes', paletteOffset 1). 3 columns of quote text in Syne 700 at 24 px, with name and seed in mono below. 1 column on phones.
5. **FAQ** — H2: 'Questions we get at the fair.' Accordion. 'Can someone else buy the same seed?': 'Yes, up to the cap. Each seed is limited to 10 prints per size, then that size is retired.' 'Will the print match my screen?': 'Very closely. We proof each seed by hand, and pigment inks run slightly deeper than a bright display.' 'Can I request a seed that is my birthday?': 'Please do. Type it in. If it makes mud, press regenerate and blame the number.' 'What is your return policy?': 'Prints are made to order, so we replace damaged items free within 30 days but do not take back a change of mind.' 'Do you ship outside the US and EU?': 'Yes, by quote. Write to the studio with your country and the size.'
   Layout: Full-bleed flow-field canvas, salt 'faq', paletteOffset 0. A single Panel on columns 3-10, with items separated by 1 px rules. Native button triggers with Lucide Plus and Minus. First item open by default.
   Motion: Accordion height animates over 220 ms, instant with reduced motion.
6. **Cart drawer** — Header 'Your cart' on Ultramarine. Line items: small 3:4 thumbnail, title or 'Seed 4417', algorithm, size, frame, quantity stepper, price, remove (Lucide Trash2). Totals: Subtotal; Shipping ($18 if all items are rolled, $48 if any is framed); Total. Button 'Checkout' shows an inline note: 'Checkout is switched off on this site. Your cart is saved only in this browser.' Empty state: 'Nothing framed yet.' with a button to #/shop. Opens from the top-bar cart button on every page.
   Layout: Right drawer 420 px wide, solid #160A33, full height, scrollable list, totals pinned at the bottom. Full width on phones, above the seed dock. Focus is trapped; Esc and the scrim close it.
   Motion: Slides in over 260 ms, instant with reduced motion.

## Assets
- image: All artwork, thumbnails, section backgrounds and the wall scene are drawn in code (Canvas 2D and inline SVG). Favicon: an inline SVG file at public/favicon.svg with a coral quarter circle and three acid-yellow strokes on #160A33. Title tag: '[BRAND], generative prints'.
- image: Download https://media.vibefather.ai/assets/a66f3fce-e465-4855-89ba-d993f6885cef/artist-portrait.webp to public/images/artist-portrait.webp. Alt: 'The artist leaning over a pen plotter in the workshop, seen from behind, lit by a coral lamp.' Used in the Artist section on Studio. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. It shows a fictional person and is a placeholder to swap for your own photo.
- image: Download https://media.vibefather.ai/assets/a66f3fce-e465-4855-89ba-d993f6885cef/plotter-at-work.webp to public/images/plotter-at-work.webp. Alt: 'A pen plotter arm drawing thin coral lines across a large sheet of paper.' Used in the Artist section on Studio. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/a66f3fce-e465-4855-89ba-d993f6885cef/proof-table.webp to public/images/proof-table.webp. Alt: 'Colorful abstract proofs and framed prints laid out on a workshop table under a lamp.' Used in the Paper and framing section on Shop. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- icon: lucide-react (ISC) only: RefreshCw, Link, ShoppingBag, Menu, X, ChevronLeft, ChevronRight, Plus, Minus, Trash2, Download.
- font: Self-host through Fontsource: import '@fontsource-variable/syne', '@fontsource-variable/instrument-sans' and '@fontsource-variable/martian-mono' in src/main.tsx. All OFL-1.1.
- image: List the three generated photos in ASSETS.md at the project root with path, source URL, author 'Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template' and that same license note. Also list simplex-noise, lucide-react and the three fonts with their licenses, and state that all artwork is drawn by this project's own code.

## Don'ts
- No backend, server code, API routes, databases, auth, forms that submit anywhere, payment providers or third-party APIs. The cart lives in the browser only.
- No fonts from fonts.googleapis.com, fonts.gstatic.com, Adobe Fonts or any CDN. Self-host through Fontsource. No commercial or custom signature fonts.
- No CDN script or link tags, no analytics, no hotlinked files. Download every image into the project.
- No source maps, and do not copy src/ into dist/. Keep dist/ under 20 MB. Use relative asset paths.
- Internal links use the hash routes in this prompt. Never link to a bare directory. Opening any route directly must work, with the default seed and with no empty state.
- No console errors at 1440x900 or 390x844. Respect prefers-reduced-motion as specified.
- No text directly on art. Every piece of copy sits on a Panel or on solid backing so it keeps WCAG AA contrast over any generated output, including the coral Hot Paper ground.
- No blank canvases: every section must finish drawing without scrolling to it, through the 2500 ms fallback. Do not block the main thread; render in time-sliced batches.
- Do not use or imitate the code, parameters or output of any named generative series or artist. In particular, no fat non-overlapping ribbon strokes in flow fields and no single rainbow squiggle.
- Do not use other artists' artworks or images as gallery items. Every piece is generated by this site's own code. No stored artwork files.
- No NFT platform names or marks, and no wallet, mint, token, on-chain or drop language. Editions and prints only.
- No real gallery, museum, print-house, paper-maker or framing brand names or logos. All venues, collectors and people are invented.
- No real artists' names, likeness or biographies. The studio and artist come from [BRAND] and [ARTIST].
- Write the algorithms from scratch. No snippets from creative-coding books, tutorials or sketch-sharing sites, and no p5.js or other sketching framework.
- Do not change the stack, add a router or UI kit, or replace plain CSS with a framework.
- No placeholder-image services and no stock photo sites. No SEO work beyond a plain title tag with [BRAND] and the favicon.
- No mention of VibeFather inside the site except the optional [CREDIT] footer link. All copy, labels and alt text in US English. Do not use cream or off-white page backgrounds.

---
— Prompt by VibeFather · https://vibefather.ai/t/generative-art-studio-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.