# LandingPagePrompts — full corpus

> 332 free, verified AI web-design prompts with their exact model,
> token cost and automated test transcript, followed by the four evidence reports.

Canonical URL: https://landingpageprompts.com
Generated: 2026-10-05
Licence: MIT — copy, modify and ship commercially, no attribution required.

## Summary

- 332 published prompts across 8 models and 3 platforms
- 4,606 automated checks recorded, 4,523 passing
- 200 prompts pass every check, 63 have at least one recorded failure, 69 have no transcript
- 11,896,829 tokens of inference, itemised per call

---

# Hero Section (4 prompts)

## Liquid Glass Voyage

- Slug: `liquid-glass-voyage`
- Page: https://landingpageprompts.com/prompts/liquid-glass-voyage
- Effect: Liquid-glass morphism floating on a procedurally animated cinematic film backdrop
- Model: `hy4-preview-f` (Hy4 preview (hy4-preview-f)) on Workbuddy proxy
- Build tokens: 33,814; total with repair and cross-check: 62,167
- Verification: 21/21 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - canvas backdrop element exists and is painted (non-blank pixels)
  - exactly one element with class "liquid-glass" has a non-none backdrop-filter
  - h1 font-family resolves to a serif family
  - three stat counters exist and end at 4120 / 41 / 900
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
DESIGN BRIEF — "Liquid Glass Voyage"

Build a full-viewport cinematic hero for a fictional deep-sea research studio called
"Abyssal". The feeling is expensive, quiet and slightly unreal: a slow-moving film of
light and water behind a single pane of liquid glass.

A. THE BACKDROP ("the film")
   - A fixed, full-bleed <canvas> layer that renders an endless, slowly drifting
     underwater light field. Do NOT draw literal water. Draw the *light*: 3-5 large,
     very soft radial gradients in deep teal (#031a1f), abyssal blue (#062b3a) and
     cyan (#1e6f8c) that drift on independent Lissajous paths, plus one warm
     highlight (#c8a45c) that passes across the frame every ~24 seconds.
   - Layer on top, in CSS: a fine animated grain (SVG feTurbulence as a repeating
     background-image, animated by shifting background-position), a 1.5px caustic
     band pattern at 4% opacity, and a bottom-to-top vignette so the centre stays
     legible.
   - The whole film must run at 60fps. Render at devicePixelRatio capped to 2, and
     downscale the canvas backing store to 0.6x for the soft gradients (they are
     blurry by nature) then CSS-scale it up — this is the performance trick.
   - A "film loop" behaviour, implemented in JS exactly like this: every 18 seconds the
     film performs a 900ms cross-fade to the next palette (teal → indigo → slate →
     teal), implemented with requestAnimationFrame interpolation of a palette weight
     array, NOT a CSS transition. Any fade in progress is cancelled and restarted
     from the current opacity rather than snapping.

B. THE GLASS
   - Implement a reusable `.liquid-glass` class with: background rgba(255,255,255,0.012)
     plus background-blend-mode: luminosity; backdrop-filter: blur(14px) saturate(1.4)
     with the -webkit- prefix; box-shadow: inset 0 1px 1px rgba(255,255,255,0.10);
     position: relative; overflow: hidden; isolation: isolate.
   - The signature 1.4px glass edge is drawn with a ::before pseudo-element:
     inset 0; border-radius: inherit; padding: 1.4px; background:
     linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 18%,
     rgba(255,255,255,0) 42%, rgba(255,255,255,0) 58%, rgba(255,255,255,.18) 82%,
     rgba(255,255,255,.55) 100%); and the border-only mask trick
     (-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none).
   - Add a slow specular sweep: a ::after with a 120deg white gradient at 6% opacity
     that translates across the pane over 9s, paused (animation-play-state: paused)
     until the hero has entered.

C. LAYOUT (single column, everything centred, all inside <main>)
   - <header> nav bar: a liquid-glass pill, max-width 1080px, centred, containing on the
     left a small inline-SVG mark (a stylised wave inside a circle) + the wordmark
     "ABYSSAL" in 600 weight with 0.18em letter-spacing; centre nav links "Vessel",
     "Research", "Expeditions" (hidden below 768px); right side a plain text "Sign in"
     link and a liquid-glass pill button "Request access".
   - Hero block, optically centred but translated up by 6vh:
       * Eyebrow: a liquid-glass pill containing a 6px pulsing dot and the text
         "EXPEDITION 14 · LIVE FROM 4,120 M" in 11px, 0.22em letter-spacing, uppercase.
       * <h1> in "Instrument Serif" (Google Fonts, italic available) at
         clamp(2.75rem, 8vw, 6.5rem), line-height 0.98, tracking -0.02em, colour #f4f7f8:
         "We chart the light / that never reaches shore." — the second line in italic
         and at 0.86em size, coloured #9fd8ea.
       * A max-width 560px paragraph, 17px/1.65, rgba(244,247,248,0.72): "Abyssal maps
         the twilight zone with autonomous gliders — 41 vehicles, 900 days of continuous
         observation, one open dataset."
       * A liquid-glass email capture bar: rounded-full, padding 8px 8px 8px 22px,
         containing a transparent email input (placeholder "you@institute.edu",
         aria-label "Email address") and a solid #eaf6fa circular submit button with a
         black arrow-right SVG. On submit, prevent default and morph the pill into a
         confirmation state reading "You're on the manifest." with a checkmark, then
         fade back after 3.2s.
   - A stat strip of three liquid-glass cards (grid: 3 cols → 1 col under 640px) showing
     animated counters: "4,120 m  max depth", "41  gliders", "900  days at sea". Counters
     animate from 0 with an easeOutExpo over 1.6s when the strip first enters the
     viewport (IntersectionObserver, fire once).
   - <footer> a single row: "© 2026 Abyssal Research" on the left, three liquid-glass
     circular social icon buttons (inline SVG: instagram, x, globe) on the right, each
     with aria-label.

D. TYPE + COLOUR SYSTEM
   - Display: 'Instrument Serif', ui-serif, Georgia, serif.
   - UI: system stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif).
   - Palette: ink #f4f7f8, muted rgba(244,247,248,.72), cyan #9fd8ea, gold #c8a45c,
     base #031a1f.

E. MICRO-INTERACTION
   - Buttons lift 1px and gain a 1.04 specular boost on hover; the glass edge brightens
     to 0.75 alpha. Use transform + custom properties only.
   - On pointer move over the hero, the glass panes tilt at most 1.2deg toward the
     pointer (perspective 1200px), damped with a 0.08 lerp in the rAF loop.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Magnetic Orbit

- Slug: `magnetic-orbit`
- Page: https://landingpageprompts.com/prompts/magnetic-orbit
- Effect: Cursor-reactive magnetic hero with spotlight, tilt and a custom cursor
- Model: `glm-5.3` (GLM-5.3 (glm-5.3)) on Workbuddy proxy
- Build tokens: 7,209; total with repair and cross-check: 31,073
- Verification: 21/21 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - a custom cursor element exists and is pointer-events:none
  - at least 3 elements carry data-magnetic
  - a marquee strip exists and its transform changes over time
  - a spotlight element with a radial-gradient exists
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
DESIGN BRIEF — "Magnetic Orbit"

Build a cursor-reactive hero for a fictional creative-technology studio called "FIELD".
The page should feel like it is physically aware of the pointer: light, weight and
magnetism. Everything reacts; nothing jitters.

A. CUSTOM CURSOR (desktop pointer only)
   - Hide the native cursor inside the hero (`cursor: none`) and draw a two-part
     cursor: a 7px solid dot that tracks the pointer at 1.0 lerp (essentially instant),
     and a 40px ring that follows with a 0.14 lerp so it trails with visible weight.
   - The ring scales to 1.9x and its border thins from 1.5px to 1px when hovering any
     interactive element; it scales to 3.2x and fills with rgba(249,115,22,.12) when
     hovering a `[data-magnetic]` element.
   - Do NOT hide the native cursor on coarse pointers — guard with
     `window.matchMedia('(pointer: fine)')` and only then enable.
   - The cursor must be aria-hidden and pointer-events: none.

B. THE SPOTLIGHT
   - A fixed radial spotlight (radial-gradient, 520px radius, rgba(249,115,22,.14) →
     transparent) follows the pointer across the hero with a 0.10 lerp, blended with
     mix-blend-mode: screen. Behind it, a second, larger, colder spotlight
     (rgba(56,189,248,.10), 900px) follows with a 0.04 lerp, creating depth.
   - Both spotlights are driven from the single rAF loop using cached pointer
     coordinates; never attach a mousemove handler that writes layout.

C. MAGNETISM
   - Any element with `data-magnetic` translates toward the pointer when it is within
     140px of the element centre, with strength falling off as
     `(1 - d/140)^2 * 14px`, capped at 14px. On pointer leave it springs back using a
     critically-damped spring (stiffness 0.12, damping 0.78), not a CSS transition.
   - Apply this to: the primary CTA button, the three orbit nodes, and the logo mark.

D. COMPOSITION
   - <header>: a thin top bar with the wordmark "FIELD" (tracking 0.3em, 12px, 700) on
     the left, and on the right "Index" / "Contact" plus a bordered pill "Book a call".
   - <main> hero, min-height 100vh, centred:
       * <h1> at clamp(3rem, 9vw, 7rem), line-height 0.94, letter-spacing -0.035em,
         system sans, weight 500: "Design that / pulls back." with "pulls back."
         in rgba(242,242,245,.45).
       * Under it, max-width 480px, 16.5px/1.7, rgba(242,242,245,.62): "FIELD is a
         three-person studio building interfaces that answer to the hand that moves them."
       * A row: primary CTA "Start a project" (solid #f97316, black text, rounded-full)
         and a ghost "See the index" (1px border rgba(255,255,255,.18)).
       * ORBIT NODES: three absolutely positioned circular glass nodes (86px, 108px,
         72px) scattered around the headline at pre-set coordinates, each containing a
         2-3 word label ("Motion", "Systems", "Brand"). They drift on slow independent
         sine paths (±8px, 11-17s periods), are `data-magnetic`, and tilt up to 10deg
         toward the pointer with perspective 900px. On hover each node scales to 1.08
         and its label brightens.
   - A thin marquee strip below the hero (a single row, 1px top and bottom hairlines,
     12px uppercase, 0.24em tracking, opacity .5) reading
     "MOTION · SYSTEMS · BRAND · INTERFACES · SOUND ·" repeated — translated
     continuously by the rAF loop at 26px/s, wrapping seamlessly using two duplicated
     spans and a modulo offset.
   - <footer>: one row, "© 2026 FIELD Studio" and an email link.

E. SYSTEM
   - Palette: base #0a0a0b, ink #f2f2f5, muted rgba(242,242,245,.62), accent #f97316,
     cold #38bdf8.
   - Fonts: system sans for everything (no webfont) — this page must be 100% offline.
   - A faint 48px grid overlay at 3% opacity behind the hero, masked with a radial
     gradient so it fades out at the edges.

F. TOUCH DEVICES
   - On coarse pointers: no custom cursor, no spotlight (render a static centred glow),
     nodes become a normal 3-up grid, magnetism is disabled. The page must look
     deliberate, not broken.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Kinetic Type

- Slug: `kinetic-type`
- Page: https://landingpageprompts.com/prompts/kinetic-type
- Effect: Split-text mask reveal, velocity-skewed marquee bands and scroll-linked type scale
- Model: `gemini-3.5-flash` (Gemini-3.5-Flash (gemini-3.5-flash)) on Workbuddy proxy
- Build tokens: 11,429; total with repair and cross-check: 23,969
- Verification: 20/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - h1 is split into per-word spans (>= 4 elements with class "w")
  - at least 3 marquee bands exist
  - a band transform changes over time
  - page background is light (luminance > 0.6)
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
DESIGN BRIEF — "Kinetic Type"

Build an editorial, type-first hero for a fictional independent magazine called "OFFCUT".
Typography IS the interface here. No illustrations, no photography — only letters, rules,
and motion.

A. THE SPLIT-TEXT REVEAL (on load, once)
   - Split the <h1> into per-word <span class="w"> wrappers, each containing a
     <span class="wi"> inner. The outer has overflow: hidden; the inner starts at
     translateY(105%) and animates to 0 with a cubic-bezier(.16,1,.3,1) ease over 900ms,
     staggered 65ms per word, driven by the shared rAF loop (compute progress from a
     start timestamp — do not use setTimeout chains).
   - Respect prefers-reduced-motion: skip the reveal entirely and render final state.

B. THE MARQUEE BANDS (three of them)
   - Band 1 (top, 13px, uppercase, 0.3em tracking, opacity .55): slow left drift,
     "OFFCUT — ISSUE 14 — SPRING — " repeated.
   - Band 2 (behind the h1, ~11vw, weight 800, colour transparent with a 1px
     rgba(255,255,255,.13) -webkit-text-stroke, uppercase): fast right drift reading
     "PRINT IS NOT DEAD IT JUST GOT FASTER".
   - Band 3 (below, 15px, weight 600): left drift with the words
     "TYPE / GRID / INK / PAPER / TYPE / GRID / INK / PAPER".
   - All three are driven by ONE rAF loop. Crucially, the drift speed must be modulated
     by scroll velocity: compute `v = (scrollY - lastScrollY)`, smooth it with a 0.12
     lerp, and offset the bands by `baseSpeed + clamp(v * 0.35, -14, 14)` px/frame. The
     bands should visibly surge when the user scrolls fast and settle when they stop.
   - Additionally apply a velocity skew: each band's transform includes
     `skewX(clamp(v * -0.06, -4, 4)deg)` so the type leans into the motion.
   - Seamless wrap: duplicate the band content exactly twice and use a modulo offset of
     half the scroll width. Measure the width once per resize, never per frame.

C. SCROLL-LINKED TYPE SCALE
   - The <h1> scales from 1.0 to 0.82 and its letter-spacing tightens from -0.01em to
     -0.045em as the user scrolls the first 60vh, driven by rAF from a cached scroll
     value. It must feel like the type is being squeezed by the scroll.

D. THE PAGE
   - <header>: a 3-part grid bar — left "OFFCUT" (900 weight, tracking -0.02em),
     centre the issue meta "ISSUE 14 / SPRING", right "Subscribe" as an underlined link
     plus a solid #facc15 pill "Get the print edition" (black text). Hairline rules
     above and below the header.
   - <main>:
       * Hero with the h1: "Slow down and / read the thing." — second line in italic
         serif. Below it a 2-column block (stacked under 720px): a 15px/1.7 paragraph
         and a pull-quote with a 3px #facc15 left border.
       * An "index" section: a numbered list of 5 article titles (01–05) with hairline
         separators; each row is an <a> that on hover slides its title 8px right and
         reveals a small "→". Implement hover motion with CSS transform only.
       * A closing subscribe block: <h2> "One issue. Every quarter. No feed." plus an
         inline email form that validates non-empty and shows an inline success message.
   - <footer>: masthead, three link columns (Read / About / Legal), and a bottom row
     "© 2026 OFFCUT Press — printed in Rotterdam".

E. SYSTEM
   - Palette: paper #f4f1ea, ink #14140f, muted rgba(20,20,15,.6), accent #facc15.
     This page is LIGHT — the only light page in the set. Use dark text on paper.
   - Fonts: "Instrument Serif" (display + italic pull-quotes) and
     "Inter" (UI, 400/600/900) via Google Fonts, with Georgia and system-ui fallbacks.
   - Everything sits on a strict 12-column grid with 24px gutters; hairline rules are
     1px rgba(20,20,15,.16).

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Interactive Discovery

- Slug: `interactive-discovery`
- Page: https://landingpageprompts.com/prompts/interactive-discovery
- Effect: A cursor-following spotlight unmasks a warm procedural deep-core plate over a cold sedimentary strata plate
- Model: `hy4-preview-f` (Hy4 preview (hy4-preview-f)) on Workbuddy proxy
- Build tokens: 39,026; total with repair and cross-check: 39,026
- Verification: 18/18 automated checks passed
- Acceptance criteria:
  - the reveal layer carries a non-none mask-image (or -webkit-mask-image) built from a radial-gradient with the 1/1/0.75/0.40/0.12/0 stops, and the document contains no <canvas> element and no external image request
  - the spotlight centre tracks the pointer: --spot-x and --spot-y are written on the reveal layer, and after the pointer moves to a new coordinate both values change and the mask centre follows them
  - outside the 260px spotlight radius the reveal layer is fully transparent, so the cold strata plate is the only layer visible away from the cursor
  - the spotlight is parked at the viewport centre before any pointer input, and with prefers-reduced-motion: reduce the page is static, fully readable and reports zero errors
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
DESIGN BRIEF — "Interactive Discovery"

A. WHAT IS BEING BUILT

Build ONE complete, valid, self-contained `index.html`: a single-viewport, dark, cinematic hero
for a fictional geology brand called **Lithos**. Document title (exact):
`Lithos — Layers Hold Tales of Time`. `<html lang="en">`.

The page is: a near-black sedimentary ground; a PROCEDURAL strata plate built only from CSS
gradients; a second, warmer PROCEDURAL "deep core" plate stacked directly on top of it that is
revealed ONLY inside a soft circular spotlight which trails the pointer — that reveal is the
signature effect and the whole point of the page; a fixed top bar holding the Lithos mark, the
wordmark, a centred glass pill of five nav items and a "Sign Up" pill; a two-line display
headline; one short paragraph bottom-left; one short paragraph plus an amber "Start Digging"
button bottom-right; and a slim footer rule.

Structure it with real landmarks: exactly one <header> (containing the <nav>), exactly one <main>
(the hero and every one of its layers), exactly one <footer>. Exactly one <h1>.

At viewport widths of 901px and above the page is EXACTLY ONE FRAME: `html, body { height:100%;
overflow:hidden }` and `.page { height:100dvh; overflow:hidden }`. It does not scroll. At 900px
and below the page may scroll vertically, and horizontal scrolling is forbidden at every width.

B. WHAT NOT TO BUILD — every one of these is a failure

- No React, no TypeScript, no Vite, no Tailwind, no lucide-react, no JSX, no npm, no build step.
  The crawled source prompt asked for that stack; this library ships one vanilla file instead.
  Translate every Tailwind utility into plain CSS and every lucide icon into an inline SVG you
  draw yourself.
- **No <canvas> element anywhere in the document.** The source built its spotlight mask with a
  hidden canvas plus `toDataURL()`. Do not. The mask is a CSS `radial-gradient` applied through
  `mask-image`, repositioned by writing two CSS custom properties. This is mandatory: the
  automated verifier measures the first <canvas> it finds and a hidden one fails the build.
- No external media of any kind: no `<img>`, no remote `url(...)`, no
  `https://images.higgs.ai`, no .png/.jpg/.webp/.mp4/.webm/.gif, no base64 photo blobs, no
  <iframe>, no <video>, no <object>. Both "images" in this design are procedural CSS gradients.
- No framework or motion library: no GSAP, no Three.js, no Lottie, no jQuery, no external script.
- Google Fonts is the ONLY permitted network request. Nothing else may leave the page.
- No second <h1>. No extra sections, feature cards, pricing table, testimonial, FAQ, form,
  newsletter input, cookie banner, modal, gallery, carousel or scroll indicator.
- No `console.log`, `console.warn`, `console.error`, `alert` or `debugger` anywhere.
- No text-shadow glow on the headline, no neon outline, no drop shadow under the type.
- Never truncate. Never write "rest of the code here". The file must be complete and under 90 KB.

C. THE TWO PROCEDURAL PLATES  (this replaces the source's BG_IMAGE_1 and BG_IMAGE_2)

The source revealed a second photograph through the mask. Photography is banned, so build the same
idea out of gradients: two clearly different geology plates occupying the identical box, so the
spotlight reads as a lens into a second world. Both are `position:absolute; inset:0;` children of
<main> and are never given an explicit width or height.

C.1 `#layer-base` — the cold surface plate (z-index 1). One element, this exact background stack
    (topmost first), plus `background-color:#05060a`:
      radial-gradient(120% 80% at 50% 6%, rgba(232,112,42,0.10) 0%, rgba(232,112,42,0) 62%),
      radial-gradient(90% 60% at 12% 78%, rgba(126,148,178,0.12) 0%, rgba(126,148,178,0) 66%),
      radial-gradient(70% 50% at 88% 30%, rgba(120,180,200,0.07) 0%, rgba(120,180,200,0) 70%),
      repeating-linear-gradient(178deg, rgba(255,255,255,0.030) 0 2px, rgba(255,255,255,0) 2px 9px),
      repeating-linear-gradient(172deg, rgba(255,255,255,0.018) 0 1px, rgba(255,255,255,0) 1px 27px),
      repeating-linear-gradient(184deg, rgba(255,255,255,0.012) 0 4px, rgba(255,255,255,0) 4px 61px),
      linear-gradient(180deg, #0d1014 0%, #090b0f 44%, #05060a 100%);
    The three repeating gradients are the sedimentary bedding planes; the 178/172/184deg angles keep
    them from looking printed. It carries the Ken Burns zoom (see G).

C.2 `#layer-reveal` — the warm deep core (z-index 2, `pointer-events:none`). A visibly different
    plate: molten amber strata threaded with cold mineral veins, i.e. what is under the crust.
    This exact background stack, plus `background-color:#1a0f07`:
      radial-gradient(58% 44% at 50% 54%, rgba(255,196,120,0.55) 0%, rgba(232,112,42,0.22) 42%, rgba(232,112,42,0) 74%),
      radial-gradient(40% 30% at 22% 24%, rgba(255,214,150,0.28) 0%, rgba(255,214,150,0) 70%),
      repeating-linear-gradient(176deg, rgba(255,168,88,0.30) 0 3px, rgba(255,168,88,0) 3px 14px),
      repeating-linear-gradient(184deg, rgba(120,220,255,0.16) 0 1px, rgba(120,220,255,0) 1px 34px),
      linear-gradient(180deg, #1a0f07 0%, #2a1509 46%, #0b0705 100%);
    Its mask is the signature effect (section D). Nothing else about it moves.

C.3 Overlays, above both plates and below the copy:
    - `.grain` (z-index 3): one inline SVG, `aria-hidden="true"`, `position:absolute; inset:0;
      width:100%; height:100%; opacity:0.05; mix-blend-mode:soft-light; pointer-events:none`,
      containing
        <filter id="lithosGrain" x="0" y="0" width="100%" height="100%">
          <feTurbulence type="fractalNoise" baseFrequency="0.82" numOctaves="3" stitchTiles="stitch" seed="11" result="n"/>
          <feColorMatrix type="saturate" values="0"/>
        </filter>
        <rect width="100%" height="100%" filter="url(#lithosGrain)"/>
      It is STATIC — no animation, no per-frame cost. It is what makes two gradient plates read as
      photographed rock instead of as CSS.
    - `.spot-ring` (z-index 4): see D.5.
    - `.vignette` (z-index 5): `position:absolute; inset:0; pointer-events:none;` with
      `background: radial-gradient(120% 92% at 50% 44%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 56%, rgba(0,0,0,0.74) 100%)`.
      This is what guarantees the white copy always wins, however bright the deep core is.
    - <main> itself is `isolation:isolate` so the grain's blend mode cannot reach outside the hero.

D. THE SPOTLIGHT — the signature effect, implement exactly this

D.1 Constants and state
    - `const SPOTLIGHT_R = 260;` (CSS pixels — the spotlight radius).
    - `const LERP = 0.10;`
    - Raw pointer `mouse = { x: innerWidth / 2, y: innerHeight / 2 }` and eased pointer
      `smooth = { x: mouse.x, y: mouse.y }`.
      NOTE: the source initialised the pointer off-screen at `{-999,-999}` so nothing was revealed
      until the mouse moved. Here the spotlight starts PARKED AT THE VIEWPORT CENTRE instead, so
      the page reads correctly on first paint, in a screenshot, and on touch devices with no
      pointer at all. This is deliberate — keep it.
    - One `mousemove` listener on `window` with `{ passive: true }` that ONLY stores
      `mouse.x = e.clientX; mouse.y = e.clientY;`. It must never touch the DOM, never read layout,
      never write a style.
    - The lerp runs in the single rAF loop (D.3): `smooth.x += (mouse.x - smooth.x) * LERP;` and the
      same for y. That 0.10 easing is the trailing weight of the light — it must be visible, so do
      not raise it above 0.12 and do not snap.

D.2 The mask — pure CSS, both prefixes, on `#layer-reveal`
      -webkit-mask-image: radial-gradient(circle 260px at var(--spot-x, 50%) var(--spot-y, 50%),
          rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,0.75) 60%,
          rgba(255,255,255,0.40) 75%, rgba(255,255,255,0.12) 88%, rgba(255,255,255,0) 100%);
      mask-image: radial-gradient(circle 260px at var(--spot-x, 50%) var(--spot-y, 50%),
          rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,0.75) 60%,
          rgba(255,255,255,0.40) 75%, rgba(255,255,255,0.12) 88%, rgba(255,255,255,0) 100%);
      -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
    These are the source's exact falloff stops (1, 1, 0.75, 0.40, 0.12, 0 at 0 / 40 / 60 / 75 / 88 /
    100%). The revealed disc is solid through its first 40% and dissolves softly to nothing at
    260px, which is the "soft circular mask" the design is named for. Because the gradient's last
    stop is fully transparent, EVERY pixel more than 260px from the spotlight centre has mask alpha
    0: the reveal plate is completely invisible there and only the cold base plate shows.

D.3 The single loop
    One `requestAnimationFrame` loop drives the entire page. Every tick, in this order:
      1. `smooth.x += (mouse.x - smooth.x) * LERP;`  (then y)
      2. write the spotlight position (D.4)
      3. `window.__DEMO__.frames += 1;`
      4. `requestAnimationFrame(frame);`
    The loop keeps running when the pointer is still — that is what lets the light settle with
    weight instead of freezing, and what keeps the telemetry honest. Never start a second loop.

D.4 Writing the position — cheap, and never layout
    Write exactly two custom properties on `#layer-reveal` itself:
      reveal.style.setProperty('--spot-x', x.toFixed(1) + 'px');
      reveal.style.setProperty('--spot-y', y.toFixed(1) + 'px');
    Skip the write entirely when both values changed by less than 0.1px since the previous frame
    (cache `lastX` / `lastY`) — that keeps a still page at zero paint cost. Never write `left`,
    `top`, `width`, `height`, `margin` or `background-position`; never call
    `getBoundingClientRect` inside the loop. `transform` and custom properties only.

D.5 The rim — `.spot-ring`
    One 520px x 520px (2 x SPOTLIGHT_R) absolutely positioned div at `top:0; left:0`,
    `border-radius:50%`, `pointer-events:none`, z-index 4, with
      background: radial-gradient(circle, rgba(255,168,88,0) 62%, rgba(255,168,88,0.12) 80%, rgba(255,168,88,0) 92%);
    Its default CSS transform is `translate3d(calc(50vw - 260px), calc(50vh - 260px), 0)` so it is
    already centred before the script runs, and the loop then overwrites it with
    `transform: translate3d(Xpx, Ypx, 0)` where X = smooth.x - SPOTLIGHT_R and Y = smooth.y - SPOTLIGHT_R.
    Transform only. It lives inside <main>, which is `overflow:hidden`, so its 520px box can never
    create a scrollbar at 390px.

D.6 Coarse pointers and resize
    - Wrap the `mousemove` listener in a `window.matchMedia('(pointer: fine)').matches` guard. On a
      touch device nothing is attached and the spotlight simply stays parked at the centre — the
      page must look deliberate, not broken.
    - One `resize` listener clamps `mouse` and `smooth` into the new `innerWidth` / `innerHeight`.
      No ResizeObserver, no scroll listener, no IntersectionObserver.

E. THE COMPOSITION — copy is fixed, use these exact strings

E.1 <header class="site-header">
    `position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center;
    justify-content:space-between; padding:18px 24px;` and at >=768px `padding:22px 40px`.
    - Left — `<a class="brand" href="#top">`: `display:inline-flex; align-items:center; gap:12px;
      color:#fff; text-decoration:none;` containing
        · an inline `<svg width="26" height="26" viewBox="0 0 256 256" aria-hidden="true"
          focusable="false">` with exactly one path:
          `<path fill="#ffffff" d="M 256 256 L 128 256 L 0 128 L 128 128 Z M 256 128 L 128 128 L 0 0 L 128 0 Z"/>`
          (the source's two-diamond mark, kept verbatim);
        · `<span class="brand-word">Lithos</span>` — 24px, weight 400, italic, colour #ffffff,
          `font-family:var(--font-display)`.
    - Centre — `<nav aria-label="Primary">`, `position:absolute; left:50%; transform:translateX(-50%);`
      `display:none` below 768px, otherwise `display:flex; align-items:center; gap:2px; padding:6px;`
      with `background:rgba(255,255,255,0.16); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
      border:1px solid rgba(255,255,255,0.28); border-radius:999px;`.
      Exactly five `<button type="button">` children, in this order and with these exact labels:
        **Course** (the active one — `background:rgba(255,255,255,0.92); color:#0a0b0d;` and
        `aria-current="page"`), then **Field Guides**, **Geology**, **Plans**, **Live Tour**
        (`color:rgba(255,255,255,0.80)`; hover `background:rgba(255,255,255,0.20); color:#ffffff`).
      Every one of the five: `padding:7px 16px; border:0; border-radius:999px; font-size:13.5px;
      font-weight:500; cursor:pointer; white-space:nowrap; font-family:inherit;
      transition:background .25s ease, color .25s ease`.
    - Right — `<a class="btn-signup" href="#signup">Sign Up</a>`: `background:#ffffff; color:#111318;
      border-radius:999px; padding:10px 24px; font-size:13.5px; font-weight:600; text-decoration:none;
      white-space:nowrap;`, hover `background:#e9ecef`. `display:none` below 768px.
    - Below 768px a `<button class="burger" type="button" aria-label="Open menu"
      aria-expanded="false" aria-controls="mobile-menu">` is shown in the right slot (40x40, 1px
      `rgba(255,255,255,0.28)` border, radius 10px, transparent background) holding three 1px x 16px
      white <span> bars. This is the source's lucide hamburger, redrawn by hand.
      `#mobile-menu` is a `<div class="mobile-menu" id="mobile-menu" hidden>` at
      `position:fixed; inset:0; z-index:90; background:rgba(5,6,10,0.84);
      backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); display:flex;
      flex-direction:column; align-items:center; justify-content:center; gap:18px;`
      containing the same five labels as `<a class="menu-link" href="#course">`-style links (22px,
      white) plus `<a class="menu-signup" href="#signup">Sign Up</a>` (solid white pill, dark text).
      `.mobile-menu[hidden] { display:none }` — without that rule the `hidden` attribute loses to
      the `display:flex` above. Opening sets `aria-expanded="true"`; the menu closes on a click on
      any link, on Escape, and on a resize to >=768px.

E.2 <main class="hero">
    `position:absolute; inset:0; overflow:hidden; isolation:isolate; background:#05060a;` — the
    layer stack from C, the rim from D.5, and the copy below all live here. The base plate bleeds
    behind the fixed header, exactly as the source's background image did.

E.3 The copy — inside `<div class="hero-copy">` at `position:absolute; inset:0; z-index:10;
    pointer-events:none;` (its links re-enable `pointer-events:auto` so the masked plates never
    swallow a click):
    - `<h1 class="hero-title">` — `position:absolute; top:14%; left:0; right:0; margin:0;
      padding:0 20px; text-align:center; color:#ffffff; line-height:0.95; font-weight:400;`
      containing EXACTLY two `display:block` spans and nothing else:
        · `<span class="line-1">Layers hold</span>` — `font-family:var(--font-display);
          font-style:italic; font-weight:400; font-size:var(--h1); letter-spacing:-0.05em;`
        · `<span class="line-2">tales of time</span>` — `font-family:var(--font-sans);
          font-weight:400; font-size:var(--h1); letter-spacing:-0.08em; margin-top:-4px;`
      The two lines are the whole headline. Nothing else may be inside the <h1>.
    - `<p class="lede-left">` — `position:absolute; bottom:104px; left:40px; max-width:260px;
      margin:0; font-size:14px; line-height:1.65; color:rgba(255,255,255,0.80);`, exact text:
      "Every layer of sediment records a chapter of our planet, from ancient seabeds to drifting
      ash, layered across millions of years beneath us." It is `display:none` below 640px.
    - `<div class="cta-block">` — `position:absolute; bottom:96px; right:40px; max-width:260px;
      display:flex; flex-direction:column; align-items:flex-start; gap:20px;` containing
        · `<p class="lede-right">` — `margin:0; font-size:13.5px; line-height:1.65;
          color:rgba(255,255,255,0.80);`, exact text: "Our interactive maps let you peel back the
          crust to trace how stones, fossils, and deep time combine to shape the ground beneath
          your feet."
        · `<a class="btn-dig" href="#dig">Start Digging</a>` — `background:#e8702a; color:#ffffff;
          font-size:13.5px; font-weight:500; padding:12px 28px; border-radius:999px;
          text-decoration:none; white-space:nowrap; font-family:inherit;
          transition:background .25s ease, transform .25s ease, box-shadow .25s ease;`.
          Hover: `background:#d2611f; transform:scale(1.03); box-shadow:0 10px 30px rgba(232,112,42,0.30)`.
          Active: `transform:scale(0.95)`.

E.4 <footer class="site-footer">
    `position:absolute; left:0; right:0; bottom:0; z-index:100; display:flex; align-items:center;
    justify-content:space-between; gap:16px; padding:14px 24px;
    border-top:1px solid rgba(255,255,255,0.10); color:rgba(255,255,255,0.55);
    font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;` with two non-interactive
    spans: left "Lithos Field Institute", right "Deep Time Atlas / 2026". The source had no footer;
    the house contract requires the landmark, so it is one hairline row that never collides with
    the bottom-left paragraph (bottom:104px) or the CTA block (bottom:96px).

F. THE SYSTEM

F.1 Token table — declare every one of these on `:root` and use them rather than untracked values:
      --bg:#05060a;          --ink:#ffffff;        --muted:rgba(255,255,255,0.80);
      --muted-dim:rgba(255,255,255,0.55);
      --accent:#e8702a;      --accent-hi:#d2611f;  --line:rgba(255,255,255,0.10);
      --line-strong:rgba(255,255,255,0.28);        --glass:rgba(255,255,255,0.16);
      --spot-r:260px;
      --font-sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      --font-display:'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
      --h1:clamp(38px, 6.4vw, 92px);
      --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
      --duration-reveal:1100ms;  --duration-fade:1000ms;  --duration-zoom:1800ms;

F.2 Reset — `*, *::before, *::after { box-sizing:border-box }`; `html, body { margin:0; padding:0 }`;
    `body { background:#05060a; color:var(--ink); font-family:var(--font-sans);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-width:320px }`.

F.3 Fonts — exactly two preconnects and one stylesheet, nothing else:
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@1,400;1,500&display=swap">
    If that request fails, the system stacks above must still look intentional.

F.4 Focus — `:focus-visible { outline:2px solid #ffffff; outline-offset:3px; border-radius:inherit }`.
    Never remove an outline without replacing it. The contrast of every visible string must clear
    4.5:1 against what is behind it.

G. MOTION — the source's entrance system, with the house anti-blank guard

G.1 Keyframes (these exact names and values):
      @keyframes heroReveal { 0% { opacity:0; transform:translateY(28px); filter:blur(12px) }
                              100% { opacity:1; transform:translateY(0); filter:blur(0) } }
      @keyframes heroFadeUp { 0% { opacity:0; transform:translateY(20px) }
                              100% { opacity:1; transform:translateY(0) } }
      @keyframes heroZoom   { 0% { transform:scale(1.12) } 100% { transform:scale(1) } }

G.2 Classes:
      .hero-anim  { opacity:1; animation-duration:1000ms; animation-fill-mode:both;
                    animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
      .hero-reveal{ animation-name:heroReveal; animation-duration:1100ms; }
      .hero-fade  { animation-name:heroFadeUp; animation-duration:1000ms; }
      .hero-zoom  { animation:heroZoom 1800ms cubic-bezier(0.16, 1, 0.3, 1) both; }
      .is-in      { animation:none !important; opacity:1 !important; transform:none !important;
                    filter:none !important; }
    The resting state is opacity 1 and the animation only ever animates FROM 0 — the source wrote
    `.hero-anim { opacity:0 }`, which blanks the page if an animation never runs. That is the one
    source rule you must NOT copy. Use `animation-fill-mode:both` so a delayed element is hidden by
    its own 0% keyframe during the delay, not by its base style.

G.3 Stagger table (element -> class -> animation-delay):
      .site-header      hero-anim hero-fade    100ms
      .brand            hero-anim hero-fade    160ms
      .hero-title .line-1  hero-anim hero-reveal  250ms
      .hero-title .line-2  hero-anim hero-reveal  420ms
      .lede-left        hero-anim hero-fade    700ms
      .cta-block        hero-anim hero-fade    850ms
      .site-footer      hero-anim hero-fade   1000ms
      #layer-base       hero-zoom              (no delay — the Ken Burns zoom-out, scale 1.12 -> 1)

G.4 Settlement — for every element carrying .hero-anim or .hero-zoom, add a listener for its own
    `animationend` that adds `.is-in`; then, after two nested requestAnimationFrames, add `.is-in`
    to any of them whose `getAnimations()` (guarded with `typeof el.getAnimations === 'function'`)
    reports nothing running or finished. That is the "page is never blank" guard: if animations are
    unsupported or suppressed, every element is already in its final, visible state.

G.5 `@media (prefers-reduced-motion: reduce)` must contain:
      *, *::before, *::after { animation:none !important; transition:none !important; }
      .hero-anim, .hero-zoom, #layer-base { opacity:1 !important; transform:none !important;
                                            filter:none !important; }
    and the script must then attach no pointer listener and park the spotlight at the viewport
    centre (see I). The page stays completely readable and completely static — no zoom, no blur
    rise, no trailing light — while the telemetry loop keeps counting frames with zero visual
    change.

H. RESPONSIVE TABLE — every step is a token override

  >=1600px           --h1:96px;  header padding 26px 56px;  .lede-left/.cta-block offset 56px;
                     .lede-left max-width 280px; .cta-block max-width 280px
  1280px – 1599px    --h1:80px
  1024px – 1279px    --h1:68px;  header padding 20px 32px;  .lede-left/.cta-block offset 32px
  901px – 1023px     --h1:56px;  nav pill buttons 12.5px with padding 6px 12px

  <=900px  (phone + small tablet — vertical scrolling IS allowed here)
    html, body { height:auto; overflow-x:hidden }
    .page { height:auto; min-height:100dvh; overflow:visible }
    .hero { position:relative; inset:auto; min-height:100dvh; overflow:hidden;
            display:flex; flex-direction:column; justify-content:flex-end;
            padding:104px 24px 88px; }
    .hero-copy { position:static; inset:auto; pointer-events:auto;
                 display:flex; flex-direction:column; gap:22px; }
    .hero-title, .lede-left, .cta-block { position:static; inset:auto; text-align:left;
                                          max-width:420px; }
    .hero-title { padding:0; margin:0 0 4px }
    .lede-left { display:block }
    .site-footer { position:static }
    The plate layers, the grain, the rim and the vignette stay `position:absolute; inset:0` inside
    the hero, so they still cover the whole hero however tall it becomes. Nothing may extend past
    100vw: keep every padding inside the box and every max-width below the viewport.

  <=560px
    --h1:38px;  .brand-word 20px;  .lede-left font-size 13px;  .lede-right font-size 13px;
    .btn-dig padding 11px 22px;  .site-footer font-size 9.5px;  .hero padding 96px 20px 76px

  Below 768px: the centre nav pill and the desktop "Sign Up" pill are `display:none` and the
  burger plus #mobile-menu take over. Below 640px: .lede-left is `display:none` and the CTA block
  becomes the single bottom-anchored block.

I. THE JAVASCRIPT — use this structure, preserving every named constant, guard and telemetry field

  (() => {
    'use strict';
    window.__DEMO__ = {
      name: 'interactive-discovery', ready: false, frames: 0,
      effects: ['strata-layers', 'spotlight-mask', 'cursor-lerp', 'spot-ring',
                'entrance-stagger', 'ken-burns', 'grain'],
      errors: []
    };
    const D = window.__DEMO__;
    window.addEventListener('error', (e) => D.errors.push(String((e && e.message) || 'error')));

    const SPOTLIGHT_R = 260;
    const LERP = 0.10;
    const reveal = document.getElementById('layer-reveal');
    const ring = document.querySelector('.spot-ring');
    const reduce = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
    const fine = !!(window.matchMedia && window.matchMedia('(pointer: fine)').matches);

    let vw = window.innerWidth, vh = window.innerHeight;
    const mouse = { x: vw / 2, y: vh / 2 };
    const smooth = { x: vw / 2, y: vh / 2 };
    let lastX = -1, lastY = -1;

    // entrance settlement + never-blank fallback (G.4)
    const animated = Array.prototype.slice.call(document.querySelectorAll('.hero-anim, .hero-zoom'));
    animated.forEach((el) => el.addEventListener('animationend', () => el.classList.add('is-in')));
    requestAnimationFrame(() => requestAnimationFrame(() => {
      animated.forEach((el) => {
        const running = typeof el.getAnimations === 'function'
          ? el.getAnimations().some((a) => a.playState === 'running' || a.playState === 'finished')
          : false;
        if (!running) el.classList.add('is-in');
      });
      D.ready = true;
    }));

    // mask capability guard — never throw, never go blank
    const maskOk = !!(window.CSS && window.CSS.supports &&
      (window.CSS.supports('mask-image', 'radial-gradient(#000,#000)') ||
       window.CSS.supports('-webkit-mask-image', 'radial-gradient(#000,#000)')));
    if (!maskOk && reveal) { reveal.classList.add('no-mask'); D.effects.push('mask-fallback'); }

    function write(x, y) {
      if (Math.abs(x - lastX) < 0.1 && Math.abs(y - lastY) < 0.1) return;
      lastX = x; lastY = y;
      if (reveal) {
        reveal.style.setProperty('--spot-x', x.toFixed(1) + 'px');
        reveal.style.setProperty('--spot-y', y.toFixed(1) + 'px');
      }
      if (ring) {
        ring.style.transform = 'translate3d(' + (x - SPOTLIGHT_R).toFixed(1) + 'px,' +
                               (y - SPOTLIGHT_R).toFixed(1) + 'px,0)';
      }
    }
    write(smooth.x, smooth.y);            // first paint already shows the centre spotlight

    if (fine && !reduce) {
      window.addEventListener('mousemove', (e) => {
        mouse.x = e.clientX; mouse.y = e.clientY;
      }, { passive: true });
      window.addEventListener('resize', () => {
        vw = window.innerWidth; vh = window.innerHeight;
        mouse.x = Math.min(Math.max(mouse.x, 0), vw);
        mouse.y = Math.min(Math.max(mouse.y, 0), vh);
        smooth.x = Math.min(Math.max(smooth.x, 0), vw);
        smooth.y = Math.min(Math.max(smooth.y, 0), vh);
      });
    }

    function frame() {
      requestAnimationFrame(frame);
      D.frames += 1;
      if (reduce) return;                 // static page, telemetry still counting
      smooth.x += (mouse.x - smooth.x) * LERP;
      smooth.y += (mouse.y - smooth.y) * LERP;
      write(smooth.x, smooth.y);
    }
    requestAnimationFrame(frame);
  })();

  No other JavaScript API. No console output. No unhandled promise. No network request other than
  Google Fonts. Target file size: 18-32 KB, hard ceiling 90 KB.

J. FAILURE GUARDS, collected

  J.1 If CSS animations never run, the entrance elements are already opacity 1 (G.2) and G.4 adds
      .is-in to them — the page is never blank and never unreadable.
  J.2 If `mask-image` is unsupported, `#layer-reveal.no-mask` falls back to
      `opacity:0.45; -webkit-mask-image:none; mask-image:none;` so the deep core still shows as a
      soft full-frame wash. Push 'mask-fallback' into effects and push nothing into errors.
  J.3 If `window.matchMedia` is missing, `reduce` and `fine` are false and the page simply runs
      with motion on. Nothing throws.
  J.4 If the reveal element is missing, `write()` skips it silently; the loop keeps counting frames.
  J.5 Under prefers-reduced-motion the loop still runs so `frames` advances, but it writes nothing:
      the spotlight is parked at the viewport centre, the page is static, readable and error-free.
  J.6 The whole script is one IIFE in a single <script> at the end of <body>. It must not run
      before the DOM it queries exists.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

# Landing Page (35 prompts)

## Scroll Atlas

- Slug: `scroll-atlas`
- Page: https://landingpageprompts.com/prompts/scroll-atlas
- Effect: Pinned scroll-scrubbed cinematic narrative with a progress rail
- Model: `MiniMaxAI/MiniMax-M3` (MiniMax-M3 (MiniMaxAI/MiniMax-M3)) on cmd-code
- Build tokens: 10,955; total with repair and cross-check: 76,598
- Verification: 23/23 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - the pinned stage section is taller than 200vh
  - a sticky element with height ~100vh exists
  - canvas renders non-blank pixels
  - all four beat texts are present in the DOM
  - scroll progress drives a transform: a value changes measurably after scrolling 50% of the stage
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
DESIGN BRIEF — "Scroll Atlas"

Build a one-page scroll-driven narrative for a fictional cartography studio called
"Atlas Nine". The page must feel like scrubbing a film timeline: the user scrolls, and a
pinned stage performs choreographed, reversible motion. Nothing here should be a
"fade in on scroll" — every transform must be *driven* by scroll progress.

A. THE PINNED STAGE
   - Structure: a `<section class="stage">` that is 420vh tall, containing a
     `position: sticky; top: 0; height: 100vh` inner viewport. Do NOT use
     position: fixed. The sticky inner viewport holds the canvas, the type, and the rail.
   - Progress p = clamp(scrollTop_of_section / (sectionHeight - viewportHeight), 0, 1),
     computed in the rAF loop from a cached rect (recompute the rect only on resize and
     on a 250ms debounce of scroll — never call getBoundingClientRect inside rAF).
   - The stage is divided into 4 beats at p = 0.00, 0.25, 0.50, 0.75. Each beat has a
     title, a body line and a colour. Cross-fade beats with a 0.08-wide smoothstep
     window so there is never a hard cut.

B. THE VISUAL — a drawn world, not an image
   - A full-viewport <canvas> renders an abstract "atlas": a slowly rotating globe of
     latitude/longitude arcs (stroke rgba(255,255,255,.14), 1px) drawn with simple
     3D→2D projection maths you write yourself (no library). Only the front hemisphere
     is drawn; back-facing segments are skipped.
   - As p advances, the camera dollies in (radius 1.0 → 0.42), the globe tilts
     (tilt 0 → -0.6 rad), and a set of 12 "survey pins" (small filled circles with a
     1.5px halo) fade in one by one between p = 0.25 and 0.75, each with a thin arc
     connecting it to its predecessor — a route being drawn.
   - The globe stroke colour lerps between the four beat colours. Add a soft radial
     bloom behind the globe whose radius is driven by p.
   - Performance: precompute the sphere point set once (lat rings of 18, lon rings of 36)
     into typed arrays; per frame only rotate + project. Target 60fps at 1440x900.

C. THE RAIL
   - A vertical progress rail fixed to the right edge, 2px wide, 34vh tall, centred:
     track rgba(255,255,255,.12), fill a gradient that grows with p. Four 6px tick
     marks sit at 0/25/50/75% and the active tick grows to 10px and turns solid white.
     The rail is aria-hidden and purely decorative, but the *text* beats must be real
     content in the DOM.

D. TEXT
   - Beat 1 — "Nine degrees of nowhere" / "We began with a blank plate and a
     suspicion that the coastline was lying."
   - Beat 2 — "Survey, then argue" / "Twelve soundings, four disagreements, one
     corrected map."
   - Beat 3 — "The route writes itself" / "Each pin is a decision. The arc is the
     consequence."
   - Beat 4 — "Atlas Nine" / "Maps for places that are still deciding what they are."
   - Beats are absolutely stacked in the same grid cell; opacity and a 24px translateY
     are driven by p (no CSS transitions on them). Text must remain selectable and
     readable when p is 0.

E. FRAME
   - <header> a fixed, translucent, blurred top bar (background rgba(8,8,12,.55),
     backdrop-filter blur(12px), 1px bottom hairline) with the wordmark "ATLAS NINE",
     links "Work", "Studio", "Journal" and a bordered pill button "Start a map".
   - <main> holds the pinned stage, then one closing section (min-height 70vh) with an
     <h2> "Ready to redraw something?" and a large ghost button.
   - <footer> three columns: wordmark + one-line description, "Studio" link list,
     "Contact" link list; bottom row with the copyright.
   - Palette: base #08080c, ink #f2f2f5, muted rgba(242,242,245,.6), accent #c084fc,
     secondary #67e8f9. UI font: system stack. Display font: "Instrument Serif"
     (Google Fonts) for the h1/h2 only.

F. MOTION SAFETY
   - With prefers-reduced-motion: reduce, the section collapses to 100vh (via CSS), the
     sticky behaviour is removed, all four beats are laid out sequentially as static
     blocks, and the globe renders at a fixed camera with no rotation.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Neural Drift

- Slug: `neural-drift`
- Page: https://landingpageprompts.com/prompts/neural-drift
- Effect: Procedural canvas constellation field with depth parallax and pointer repulsion
- Model: `kimi-k3` (Kimi-K3 (kimi-k3)) on Workbuddy proxy
- Build tokens: 32,693; total with repair and cross-check: 45,213
- Verification: 21/21 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - canvas renders non-blank pixels
  - a telemetry strip with monospace font exists
  - at least 3 feature cards exist
  - canvas pixel content changes between two samples 800ms apart
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
DESIGN BRIEF — "Neural Drift"

Build a landing page for a fictional ML infrastructure company called "Cortex" whose hero
is a living constellation field rendered on canvas. The field is the product metaphor:
thousands of small signals, a few strong connections.

A. THE FIELD (canvas, full hero)
   - 3 depth layers of particles: 90 far (radius 0.6px, alpha .18), 55 mid (1.1px, .34),
     26 near (1.9px, .6). Total 171 nodes — enough to look dense, cheap enough to stay
     at 60fps.
   - Each particle has a position, a velocity (0.06–0.22 px/frame, scaled by layer depth)
     and wraps around the edges. Nearer layers move faster and are brighter — that is the
     parallax.
   - Connections: for every pair within 118px, draw a 1px line whose alpha is
     `(1 - d/118)^1.6 * 0.30 * layerAlpha`. Use a spatial hash grid of 118px cells so
     this stays O(n) — do NOT write a naive O(n²) loop.
   - Pointer repulsion: nodes within 150px of the pointer are pushed away with force
     `(1 - d/150)^2 * 1.9`, integrated with a 0.06 lerp back to their base velocity so
     they settle rather than explode.
   - Add 3 "signal pulses": every 4-7 seconds a pulse travels from a random near-node
     outward along its connections, brightening each edge to alpha .85 for 400ms and
     briefly enlarging the nodes it passes. Implement with a queue, not recursion.
   - Bloom: after drawing, composite a scaled-down copy of the canvas onto itself with
     `globalAlpha = 0.28` and `filter: blur(6px)` via an offscreen canvas — a cheap
     two-pass bloom. Cap devicePixelRatio at 2.

B. THE PAGE
   - <header>: sticky, blurred, rgba(6,7,9,.6) + backdrop-filter blur(14px). Wordmark
     "CORTEX" with a small canvas-free SVG glyph (three connected dots). Nav: "Platform",
     "Docs", "Pricing", "Careers". Right: "Sign in" + a solid #34d399 pill "Deploy".
   - Hero, over the field, centred, with a subtle dark scrim so text always wins:
       * Eyebrow pill: "SOC 2 TYPE II · 99.99% UPTIME"
       * <h1> clamp(2.6rem, 7.5vw, 5.6rem), weight 600, line-height 1.0,
         letter-spacing -0.03em: "Every signal, / finally connected."
       * Paragraph (max-width 540px): "Cortex ingests 40 billion events a day and turns
         them into the two or three that actually matter."
       * Two buttons: solid "Start free" and bordered "Read the docs →".
       * A live-looking telemetry strip: three monospace figures in a glass card that
         update every 1.4s with plausible jitter — "INGEST  41.2k/s",
         "P99  18ms", "NODES  1,284" — each value ticking with a 200ms count-up.
         Mark this card aria-live="off" so it does not spam screen readers.
   - A features section (3 cards, grid → 1 col under 720px), each with an inline SVG
     icon drawn with strokes only: "Streaming ingest", "Sub-20ms queries",
     "Zero-copy pipelines". Cards lift 2px and gain a 1px #34d399/40 border on hover.
   - A closing CTA band with an <h2> "Ship the pipeline, not the plumbing." and one
     button.
   - <footer>: four columns (Product / Developers / Company / Legal) plus a bottom row
     with "© 2026 Cortex Systems, Inc." and a status pill with a pulsing green dot
     reading "All systems normal".

C. SYSTEM
   - Palette: base #060709, surface #0d1013, ink #eef2f4, muted rgba(238,242,244,.6),
     accent #34d399, line rgba(255,255,255,.09).
   - Fonts: system sans for UI; "JetBrains Mono" via Google Fonts for the telemetry
     strip ONLY, with ui-monospace fallback.

D. REDUCED MOTION
   - Render the field once, statically (no rAF loop, no pulses, no repulsion), and
     disable the telemetry ticking. The page must not look empty.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stack Deck

- Slug: `stack-deck`
- Page: https://landingpageprompts.com/prompts/stack-deck
- Effect: Pinned 3D card deck that stacks and expands on scroll, with animated stat counters
- Model: `gpt-5.5` (GPT-5.5 (gpt-5.5)) on Workbuddy proxy
- Build tokens: 7,752; total with repair and cross-check: 54,192
- Verification: 20/20 automated checks passed
- Independent cross-check: confirmed (confidence high)
- Acceptance criteria:
  - exactly 5 deck cards exist
  - a sticky stage exists inside a section taller than 300vh
  - card transforms change after scrolling into the deck
  - four stat counters exist and end at 12400 / 38 / 99.98 / 0
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
DESIGN BRIEF — "Stack Deck"

Build a product landing page for a fictional release-engineering platform called
"Harbour". The centrepiece is a pinned deck of five cards that physically stack as you
scroll, then fan out into a bento grid at the end.

A. THE DECK
   - Structure: `<section class="deck-wrap">` at 500vh containing a
     `position: sticky; top: 0; height: 100vh` inner stage. Progress
     p = clamp(scrolled / (wrapHeight - viewportHeight), 0, 1).
   - Five cards, each 460x300 (max-width 88vw), absolutely centred, with
     `transform-style: preserve-3d` and `perspective: 1400px` on the stage.
   - Choreography, driven by p, all via transform (never top/left):
       * For card i (0-indexed), its "arrival" happens in the window
         [i*0.16, i*0.16 + 0.16]. Before arrival it sits at translateY(60vh) scale(.92)
         rotateX(18deg) with opacity 0. On arrival it eases to translateY(-i*14px)
         scale(1 - i*0.012) rotateX(0) opacity 1 — so each new card lands slightly
         above and slightly smaller than the one before, forming a visible deck edge.
       * Cards already landed recede: their brightness drops by 5% per card stacked on
         top of them (use filter: brightness()).
       * Between p = 0.82 and 1.0 the deck "deals": the five cards fan out to a bento
         layout of preset final positions (a 3+2 arrangement) with a 2deg alternating
         rotation, using a smoothstep on the last window.
   - Each card has: a coloured top hairline, a small index label "01"–"05", an <h3>,
     two lines of body copy, and a distinct inline-SVG diagram drawn with strokes only
     (a pipeline, a branch tree, a gauge, a timeline, a shield). Cards are glass:
     rgba(255,255,255,.045), 1px rgba(255,255,255,.09) border, border-radius 18px,
     backdrop-filter blur(10px), and a soft 40px shadow.
   - Add a small "1 / 5" progress readout pinned to the bottom of the stage whose number
     is the index of the most recently landed card.

B. STAT COUNTERS
   - Below the deck, a 4-up stat row: "12,400  deploys a day", "38s  median release",
     "99.98%  success rate", "0  rollback surprises". Counters animate 0 → target with
     easeOutExpo over 1.8s on first intersection, formatted with thousands separators.
     The "%" and "s" suffixes are separate <span>s so the number can animate cleanly.

C. THE REST OF THE PAGE
   - <header>: sticky blurred bar. Wordmark "HARBOUR" with an inline SVG anchor glyph.
     Nav "Product", "Pricing", "Changelog", "Docs". Right: "Sign in" + solid #6366f1
     pill "Start free".
   - Hero above the deck: <h1> clamp(2.5rem, 7vw, 5.2rem) weight 650 letter-spacing
     -0.03em: "Ship on Friday. / Sleep on Saturday." with the second line in
     rgba(237,238,244,.42). Paragraph max-width 560px: "Harbour turns your release
     process into a pipeline you can actually read." Two buttons: solid "Start free",
     bordered "Watch the 2-min tour".
   - A closing CTA band: <h2> "Your next release is already written." and one button.
   - <footer>: wordmark + description, three link columns, a bottom row with
     "© 2026 Harbour Labs" and a status pill "All systems operational" with a green dot.

D. SYSTEM
   - Palette: base #08090f, surface #101223, ink #edeef4, muted rgba(237,238,244,.58),
     accent #6366f1, secondary #22d3ee, plus five card hues
     (#6366f1, #22d3ee, #f472b6, #facc15, #34d399).
   - Fonts: system sans for UI; "Instrument Serif" via Google Fonts for the h1 second
     line and the h2s only.

E. ROBUSTNESS
   - Recompute the deck rect on resize (debounced 150ms) and on orientationchange.
   - With prefers-reduced-motion: reduce: the deck-wrap collapses to auto height, the
     sticky stage becomes static, all five cards render in a plain vertical stack at
     their final fan-out positions, and the counters jump straight to their targets.
   - Guard the whole scroll engine so that if IntersectionObserver is unavailable the
     page still renders everything in final state.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Aurora Freight

- Slug: `aurora-freight`
- Page: https://landingpageprompts.com/prompts/aurora-freight
- Effect: A procedural aurora light-field behind a bottom-anchored hero and liquid-metal nav
- Model: `hy4-preview-f` (Hy4 preview (hy4-preview-f)) on Workbuddy proxy
- Build tokens: 47,432; total with repair and cross-check: 148,261
- Verification: 20/20 automated checks passed
- Independent cross-check: confirmed (confidence high)
- Acceptance criteria:
  - the <h1> is split into exactly 2 .headline-line elements, each with overflow:hidden
  - a #aurora canvas exists with non-zero width and paints non-blank pixels, and __DEMO__.frames advances by >= 20 in 1.2s
  - the footer contains exactly 3 .stat items and the page contains exactly one <h1>
  - no element overflows the viewport horizontally at 390, 768, 1440 and 1920 widths
  - __DEMO__.effects includes 'aurora-canvas' and 'palette-crossfade', and __DEMO__.errors is empty
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
DESIGN BRIEF — "Aurora Freight"

A. WHAT IS BEING BUILT

Build ONE complete, valid, self-contained `index.html`: a single-viewport dark landing page for
a fictional logistics-AI company called **Aurora Freight**. Document title (exact):
`Aurora Freight — Freight Intelligence, Orchestrated`. `<html lang="en">`.

The page is: pure black (`#000000`) ground; a full-bleed PROCEDURAL aurora rendered on a
<canvas> as the cinematic backdrop; a fixed header with a liquid-metal pill nav; a
bottom-anchored (NOT vertically centred) hero with a two-line masked <h1>; and a three-item
stats footer. That is the whole page. One frame. No scroll on desktop.

DO NOT BUILD — every one of these is a failure:
- No video, no WebGL, no Three.js, no Lottie, no GSAP, no jQuery, no React, no Tailwind CDN.
- No remote images, no .mp4/.webm/.gif, no base64 photo blobs, no third-party CDN of any kind.
  Google Fonts (preconnect + stylesheet) is the ONLY network request.
- No extra sections, no feature cards, no logo strip, no pricing table, no testimonial, no FAQ,
  no form, no newsletter input, no cookie banner, no footer beyond the three stats.
- No scroll indicator, no mouse-follow parallax, no cursor blob, no custom scrollbar.
- No vertical scrolling on desktop: at >=901px `html, body { height:100%; overflow:hidden }`
  and `.page { height:100dvh; overflow:hidden }`. Scroll is permitted ONLY at <=900px.
- No text-shadow glows, no neon outlines on type, no drop shadows under the headline.
- No animated counters, no typing effect, no marquee.

B. THE BACKDROP — PROCEDURAL AURORA LIGHT FIELD

B.1 The canvas element
  <canvas id="aurora" class="aurora-canvas" aria-hidden="true"></canvas>
  CSS: position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0;
  pointer-events:none; background:#000;
  It is fixed, not absolute, so it never moves during layout.

B.2 The resolution trick (implement exactly)
  const DPR = Math.min(window.devicePixelRatio || 1, 2);   // cap DPR at 2
  const SCALE = 0.5;                                        // render at half resolution
  canvas.width  = Math.max(1, Math.round(innerWidth  * DPR * SCALE));
  canvas.height = Math.max(1, Math.round(innerHeight * DPR * SCALE));
  CSS keeps it at 100% x 100%, so the browser upscales the soft field with bilinear smoothing.
  Because the content is pure blur, 0.5x is visually identical to 1x and costs 4x less fill.
  Also set once after sizing: ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = 'low';  (cheap, and smoothing is what we want).
  Recompute on resize with a debounce of 150ms, and on orientationchange. Clamp: never let
  canvas.width * canvas.height exceed 2,600,000 device pixels; if it does, lower SCALE to fit
  (SCALE = Math.min(SCALE, Math.sqrt(2600000 / (w*h*DPR*DPR)))).

B.3 The sprite approach — ZERO allocation in the hot loop
  Do NOT call createRadialGradient inside the rAF loop. Instead pre-render sprites once:
  For each of the 3 palettes (18 sprites total, 6 bands x 3 palettes), create an offscreen
  canvas SPRITE = 256 x 256 (document.createElement('canvas')) and paint into it ONE radial
  gradient centred at (128,128) with radius 128, stops:
      0.00 -> rgba(r,g,b,1.00)
      0.35 -> rgba(r,g,b,0.42)
      0.62 -> rgba(r,g,b,0.14)
      0.82 -> rgba(r,g,b,0.04)
      1.00 -> rgba(r,g,b,0.00)
  Store in a flat array `sprites[paletteIndex * 6 + bandIndex]`. 18 x 256 x 256 x 4 bytes =
  4.7 MB of offscreen memory — acceptable, allocated once at boot.
  Per frame the only draw call is ctx.drawImage(sprite, dx, dy, dw, dh) — no gradient object,
  no array, no string, no closure is created per frame.

B.4 The six bands — exact parameters
  Geometry helpers (w,h = canvas backing-store size in device px):
    maxDim = Math.max(w, h)
    cx_i = 0.50 * w + ampX_i * w * Math.sin(t * fx_i + phaseX_i)
    cy_i = 0.46 * h + ampY_i * h * Math.sin(t * fy_i + phaseY_i)
    r_i  = radius_i * maxDim                      // sprite half-width
    dw   = 2 * r_i
    dh   = 2 * r_i * aspect_i                     // squashed vertically -> a band, not a ball
  These are independent Lissajous paths (different x and y frequencies per band => the paths
  never repeat inside a session).

  i | role      | radius_i | aspect_i | ampX_i | ampY_i | fx_i (rad/s) | fy_i (rad/s) | phX | phY | alpha
  0 | cyan core | 0.62     | 0.58     | 0.30   | 0.20   | 0.0532       | 0.0411       | 0.0 | 1.7 | 0.62
  1 | teal      | 0.54     | 0.64     | 0.26   | 0.24   | 0.0648       | 0.0480       | 2.1 | 0.4 | 0.55
  2 | violet    | 0.70     | 0.50     | 0.34   | 0.18   | 0.0439       | 0.0861       | 4.0 | 3.2 | 0.40
  3 | blue      | 0.48     | 0.70     | 0.22   | 0.28   | 0.0757       | 0.0576       | 5.6 | 2.6 | 0.34
  4 | magenta   | 0.66     | 0.54     | 0.36   | 0.16   | 0.0376       | 0.1030       | 1.2 | 5.0 | 0.28
  (fx 0.0532 rad/s = a 118 s period; fy 0.1030 rad/s = a 61 s period. Slow and cinematic.)

  5 | AMBER SWEEP — a warm band that crosses the frame every ~30 s. It is NOT a Lissajous drift;
  it is a scripted traversal, so it reads as an event:
      cycle   = 30 s
      p       = (t % cycle) / cycle                     // 0..1
      window  = p in [0.10, 0.62]                       // visible for 15.6 s of the 30 s
      u       = clamp((p - 0.10) / 0.52, 0, 1)
      ease    = 0.5 - 0.5 * Math.cos(Math.PI * u)       // easeInOutSine: no velocity jump
      ax      = (-0.35 + 1.70 * ease) * w               // enters left, exits right
      ay      = (0.62 - 0.10 * Math.sin(Math.PI * u)) * h
      aEnv    = Math.pow(Math.sin(Math.PI * u), 0.8)    // fade in/out at the edges
      alpha   = 0.42 * aEnv
      radius_5 = 0.40, aspect_5 = 0.46

B.5 Compositing order inside one frame (all in canvas, no CSS filters)
  1. ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 1;
     ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, w, h);        // hard black ground each frame
  2. ctx.globalCompositeOperation = 'screen';                     // light adds, never subtracts
  3. for each band i = 0..5:
       draw palette A sprite with globalAlpha = alpha_i * aEnv_i * (1 - mix)
       draw palette B sprite with globalAlpha = alpha_i * aEnv_i * mix
       (aEnv_i is 1 for bands 0-4, and the envelope from B.4 for band 5)
     Order 0,1,2,3,4,5 — largest, softest first is not required because 'screen' is commutative.
  4. ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 1;
  Note: 'screen' on black means the field can never darken the page below #000000, and no band
  can ever clip to white — the sum stays under ~0.78 luminance because the peak alphas are low.

B.6 Palette cross-fade every 20 s (rAF, cancellable, never snapping)
  Three palettes, index cycled 0 -> 1 -> 2 -> 0:
    P0 Nordic      : #22d3ee, #12a89a, #7c5cff, #2a6bd8, #a855f7, #f0a24a
    P1 Ion         : #35e0d0, #0f8fbf, #5b6cff, #1b4fd8, #c678f7, #ffb066
    P2 Ember drift : #4de3c1, #17997f, #8b5cf6, #2563eb, #d946ef, #f59e0b
  State: { fromA, fromB, mix, fading:false, fadeT0:0, fadeDur:2600 }
  Every 20.0 s of accumulated time (timer measured in the same rAF, using the clamped dt), start
  a fade: set toB = next palette, fadeT0 = now, fading = true.
  Each frame while fading: mix goes from the value it had when the fade started (mixStart) to 1
  using easeInOutCubic over fadeDur; when done: fromA = fromB; fromB = next(fromB); mix = 0;
  fading = false.
  CANCELLATION RULE (the important part): if a new fade is requested while `fading === true`,
  do NOT restart from 0. Snapshot the CURRENT blended colour as the new starting point:
    fromA = currentBlendRgb (computed by lerping P[fromA] and P[fromB] by the live mix,
            per channel, rounded to integers, then used as a palette slot of its own),
    mixStart = 0, fadeT0 = now, fromB = requested target.
  This makes interruptions continuous — the field never snaps.

B.7 Frame budget and dt clamp
  - dt = Math.min((now - last) / 1000, 0.05);   // clamp so a tab switch cannot teleport bands
  - Draw at most ~60 fps: if (now - lastDraw < 15.5) { rAF again; return; }
  - Target: the whole frame must cost under 4 ms on a 2019 laptop. With 12 drawImage calls on a
    0.5x backing store this is easily met. If `document.hidden` is true, cancel the rAF and
    restart it on visibilitychange; never draw while hidden.
  - Every rAF tick increments window.__DEMO__.frames (see J) — including when a draw is skipped.

B.8 Grain: SVG feTurbulence at 4%, static (zero per-frame cost)
  Inline (NOT a data URI, NOT remote):
    <svg class="grain-svg" aria-hidden="true" focusable="false">
      <filter id="auroraGrain" x="0" y="0" width="100%" height="100%">
        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3"
                      stitchTiles="stitch" seed="7" result="n"/>
        <feColorMatrix type="saturate" values="0"/>
      </filter>
      <rect width="100%" height="100%" filter="url(#auroraGrain)"/>
    </svg>
  CSS: .grain-svg { position:fixed; inset:-4%; width:108%; height:108%; z-index:100;
       opacity:0.04; mix-blend-mode:soft-light; pointer-events:none; }
  A wrapper drift so it does not look like a static plate — compositor-only, 6 discrete steps:
    .grain-svg { animation: grain-drift 6s steps(6, end) infinite; will-change: transform; }
    @keyframes grain-drift {
      0%   { transform: translate3d(0,0,0) }      16.6% { transform: translate3d(-1.2%, 0.8%, 0) }
      33.3%{ transform: translate3d(0.9%, -1.1%, 0) } 50% { transform: translate3d(-0.7%, -0.6%, 0) }
      66.6%{ transform: translate3d(1.1%, 0.5%, 0) }  83.3%{ transform: translate3d(-0.5%, 1.2%, 0) }
      100% { transform: translate3d(0,0,0) } }

B.9 Vignette + scrim (CSS, above canvas, below content)
  .aurora-scrim is a fixed div at z-index:1 with pointer-events:none and:
    background:
      radial-gradient(120% 90% at 50% 62%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 46%,
                      rgba(0,0,0,0.78) 78%, rgba(0,0,0,0.94) 100%),
      linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.62) 22%,
                      rgba(0,0,0,0.18) 46%, rgba(0,0,0,0.32) 72%, rgba(0,0,0,0.72) 100%);
  The bottom-to-top ramp is the load-bearing part: the bottom 22% of the viewport (where the
  hero copy sits) is knocked down to ~92% black, so the headline and lede ALWAYS win, no matter
  how bright the aurora is. The top ramp protects the header. Values are not adjustable upward.

C. THE LAYER STACK (back -> front), with z-index

  z 0    html, body            background:#000000 (see failure guards)
  z 0    #aurora               fixed canvas, the light field
  z 1    .aurora-scrim         fixed vignette/scrim gradient
  z 2    .page                 position:relative; display:grid; grid-template-rows:auto 1fr auto;
                               min-height:100dvh; (desktop lock: height:100dvh; overflow:hidden)
  auto   header / main / footer  children of .page, no z-index of their own
  z 100  .grain-svg            feTurbulence grain, 4%, soft-light
  Nothing else may create a stacking context above 2. The mobile menu overlay, when open, sits at
  z-index:90 (below grain, above .page).

D. TOKEN TABLE (declare all of these on :root; default values are the ~1440px design)

  Colour
    --bg: #000000
    --text: #ffffff
    --muted: #9a9a9a              (7.5:1 on #000 — safe for the lede)
    --stat: #d8d8d8
    --accent: #22d3ee
    --border: rgba(255,255,255,0.16)
    --border-soft: rgba(255,255,255,0.12)
    --pill-line: rgba(198,198,198,0.55)
    --pill-line-hover: rgba(235,235,235,0.9)
    --grain-opacity: 0.04
    --focus: rgba(120,231,255,0.9)

  Type
    --logo: 15.5px
    --logo-mark: 22px
    --nav: 14px
    --nav-h: 40px
    --btn: 13.5px
    --btn-h: 40px
    --h1: 48px
    --lede: 15.5px
    --badge: 12.5px
    --stat-size: 13.5px

  Space / geometry
    --header-y: 22px
    --header-x: 40px
    --stats-x: 72px
    --stats-y: 36px
    --hero-gap: 85px
    --copy-max: 860px
    --lede-max: 470px
    --pill-radius: 7px
    --pill-pad: 18px
    --nav-gap: 10px
    --cta-gap: 14px
    --hero-btn-gap: 12px
    --stat-gap: 36px

  Fonts
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif
    --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino,
                  Georgia, serif
  Load with <link rel="preconnect" href="https://fonts.googleapis.com">,
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>, and one
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Instrument+Serif:ital@1&display=swap">.
  If the request fails the system fallbacks above must still look intentional.

E. THE COMPOSITION — build order

E.1 <body style="background:#000;color:#fff"> (inline attribute, belt and braces).

E.2 <header class="site-header">
    padding: var(--header-y) var(--header-x); display:flex; align-items:center; gap:16px;
    .brand { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none }
      .brand-mark { width:var(--logo-mark); height:var(--logo-mark); flex:0 0 auto }
        An INLINE SVG: a 22x22 viewBox="0 0 22 22" aurora mark — three stacked arcs
        (path d="M2 15 C6 7, 10 19, 14 8 S18 12, 20 6" style curves) stroked with
        stroke="url(#markGrad)" stroke-width="1.6" fill="none" stroke-linecap="round", where
        #markGrad is a linearGradient from #22d3ee to #a855f7, plus a 2.2r circle at (20,6)
        filled #f0a24a. aria-hidden="true" (the wordmark carries the name).
      .brand-word { font-size:var(--logo); letter-spacing:0.14em; text-transform:uppercase;
                    font-weight:500; white-space:nowrap }   -> text "Aurora Freight"
    nav.nav-desktop { margin-left:auto; display:flex; align-items:center; gap:var(--nav-gap) }
      ul { display:flex; align-items:center; gap:var(--nav-gap); list-style:none; margin:0; padding:0 }
      Four <a class="pill appear"> links, in this order and with these EXACT strings:
        "Platform"  "Network"  "Pricing"  "Docs"
      Then <a class="btn btn-ghost btn-sm appear"> with the string "Request access", separated
      from the last pill by var(--cta-gap).
    button.burger (hidden at >=901px): 40x40, aria-label="Open menu", aria-expanded="false",
      aria-controls="mobile-menu", border:1px solid var(--border), border-radius:var(--pill-radius),
      background:transparent; three 1px x 16px white bars (spans) at 6px vertical spacing.

E.3 <main class="hero">
    CSS: .hero { display:flex; align-items:flex-end; justify-content:center;
                 padding:8px 24px var(--hero-gap); min-height:0 }
    .hero-inner { width:100%; max-width:var(--copy-max); margin:0 auto; text-align:center }
    Children, in order:
      1. p.badge.appear
           inline-flex; align-items:center; gap:8px; margin:0 0 26px;
           font-size:var(--badge); letter-spacing:0.08em; text-transform:uppercase;
           color:var(--muted);
           .badge-dot { width:5px; height:5px; border-radius:50%; background:var(--accent);
                        box-shadow:0 0 10px rgba(34,211,238,0.75) }
           Copy (exact): "New — the Aurora Route Graph"
      2. h1.hero-title  (the ONLY h1 on the page)
           font-size:var(--h1); font-weight:500; letter-spacing:-0.045em; line-height:1.12;
           margin:0 0 22px; color:var(--text);
           Exactly TWO <span class="headline-line"> children, each display:block;
           overflow:hidden; padding:0.06em 0.15em 0.14em; (the padding stops the italic serif
           and the descenders from being clipped by the mask):
             Line 1:  Move <em>freight</em> with an AI that
             Line 2:  already knows the road.
           em { font-family:var(--font-serif); font-style:italic; font-weight:400;
                font-size:1.08em; letter-spacing:-0.03em; color:var(--muted) }   <-- NOT white
      3. p.lede.appear
           max-width:var(--lede-max); margin:0 auto 30px; font-size:var(--lede);
           line-height:1.62; color:var(--muted);
           Copy (exact): "Aurora plans, books and tracks every load across 340+ carriers — learning your lanes and your rates in weeks, not quarters."
      4. div.hero-actions { display:flex; gap:var(--hero-btn-gap); justify-content:center;
                            align-items:center; flex-wrap:wrap }
           a.btn.btn-solid.appear -> "Request access"
           a.btn.btn-line.appear  -> "Watch the 2-min tour"

E.4 <footer class="stats">
    padding:0 var(--stats-x) var(--stats-y);
    ul { display:flex; align-items:center; justify-content:center; gap:var(--stat-gap);
         flex-wrap:wrap; list-style:none; margin:0; padding:0 }
    Exactly THREE <li class="stat appear"> items:
      <b>340+</b> carriers connected
      <b>1.2M</b> loads routed monthly
      <b>18%</b> lower freight spend
    .stat { font-size:var(--stat-size); color:var(--stat); letter-spacing:0.01em;
            display:inline-flex; gap:7px; align-items:baseline; white-space:nowrap }
    .stat b { color:#ffffff; font-weight:500; font-variant-numeric:tabular-nums }

E.5 Mobile menu (<=900px only)
    div#mobile-menu.mobile-menu[hidden] — position:fixed; inset:0; z-index:90;
    background:rgba(0,0,0,0.72); backdrop-filter:blur(18px) saturate(1.2);
    -webkit-backdrop-filter:blur(18px) saturate(1.2);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    Contains the same four links at font-size:22px plus "Request access" as a solid button.
    Toggled by .burger; closed by: clicking any link, pressing Escape, or a resize to >=901px.
    When open: body gets .menu-open { overflow:hidden } and aria-expanded flips to "true".

F. THE UI LANGUAGE

F.1 Liquid-metal pill (.pill) — the nav links
    display:inline-flex; align-items:center; justify-content:center;
    height:var(--nav-h); padding:0 var(--pill-pad); border-radius:var(--pill-radius);
    overflow:hidden; position:relative; isolation:isolate;
    border:1px solid var(--pill-line);
    background:linear-gradient(105deg, #050505 0%, #2a2a2a 48%, #4a4a4a 100%);
    color:#e9e9e9; font-size:var(--nav); font-weight:500; letter-spacing:0.005em;
    text-decoration:none; transition:border-color .35s ease, background .35s ease,
                                  box-shadow .35s ease, color .35s ease;
    .pill::before { content:""; position:absolute; inset:-1px; z-index:-1;
      background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 50%,
                                 transparent 70%);
      transform:translateX(-120%); transition:transform .6s ease }
    .pill:hover::before { transform:translateX(120%) }
    .pill:hover { border-color:var(--pill-line-hover); color:#ffffff;
      background:linear-gradient(105deg, #111111 0%, #3a3a3a 45%, #6a6a6a 100%);
      box-shadow:0 0 18px rgba(200,210,230,0.18) }
    .pill:focus-visible { outline:2px solid var(--focus); outline-offset:3px }

F.2 Buttons (.btn)
    display:inline-flex; align-items:center; justify-content:center;
    height:var(--btn-h); padding:0 20px; border-radius:var(--pill-radius);
    font-size:var(--btn); font-weight:500; letter-spacing:0.01em;
    text-decoration:none; cursor:pointer; border:1px solid transparent;
    transition:transform .3s ease, background .3s ease, border-color .3s ease,
               box-shadow .3s ease, color .3s ease;
    .btn-solid { background:linear-gradient(105deg, #e8ecf2 0%, #ffffff 52%, #d3d9e2 100%);
                 color:#06070a; border-color:rgba(255,255,255,0.5) }
    .btn-solid:hover { transform:translateY(-1px);
                 box-shadow:0 8px 26px rgba(160,190,220,0.20) }
    .btn-line  { background:rgba(255,255,255,0.02); color:#ffffff;
                 border-color:var(--border) }
    .btn-line:hover { border-color:rgba(255,255,255,0.42);
                 background:rgba(255,255,255,0.06) }
    .btn-ghost { background:linear-gradient(105deg, rgba(255,255,255,0.06) 0%,
                 rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.10) 100%);
                 color:#ffffff; border-color:var(--pill-line) }   // header CTA, matches the pills
    .btn-sm { height:var(--btn-h); padding:0 16px; font-size:var(--btn) }
    Hover lift is translateY(-1px) ONLY — nothing bounces, nothing scales on hover.

F.3 Focus ring, global
    :focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:inherit }
    Never remove outlines; never set outline:0 without a replacement.

F.4 Anti-flash rule (first three rules of the stylesheet, in this order)
    1) html, body { background:#000000 !important; color:#ffffff; }
    2) (the inline body attribute from E.1)
    3) html, body { background:#000000; background:var(--bg, #000000); margin:0; padding:0;
                    font-family:var(--font-sans); -webkit-font-smoothing:antialiased;
                    text-rendering:optimizeLegibility; }

G. MOTION

G.1 Entrance system
    .appear { opacity:1 }                        // RESTING STATE IS VISIBLE — see I
    .appear { animation-duration:1.05s; animation-fill-mode:both;
              animation-timing-function:cubic-bezier(0.16,1,0.3,1);
              animation-delay:var(--d, 0.08s); }
    .is-in { animation:none !important; opacity:1 !important; transform:none !important;
             clip-path:none !important; filter:none !important; }

G.2 Stagger table (element -> animation -> --d)
    brand            in-scale   0.08s
    nav pill 1       in-scale   0.16s
    nav pill 2       in-soft    0.28s
    nav pill 3       in-scale   0.40s
    nav pill 4       in-soft    0.52s
    header CTA       in-scale   0.34s
    badge            in-pop     0.22s
    h1 line 1        in-mask    0.42s
    h1 line 2        in-mask    0.62s
    lede             in-soft    0.82s   (animation-duration:1.25s)
    solid CTA        in-btn     0.96s
    line CTA         in-side    1.10s
    stat 1           in-stat    1.12s
    stat 2           in-stat    1.28s
    stat 3           in-stat    1.44s
    (the canvas has no entrance animation; it fades in once via .aurora-canvas
     { animation:in-fade 2.2s ease both } with --d 0s)

G.3 Keyframes — every one ends at opacity 1 and the identity transform
    @keyframes in-fade { from { opacity:0 } to { opacity:1 } }
    @keyframes in-scale{ from { opacity:0; transform:scale(0.84) }
                         to   { opacity:1; transform:scale(1) } }
    @keyframes in-soft { from { opacity:0; transform:translateY(14px) }
                         to   { opacity:1; transform:translateY(0) } }
    @keyframes in-mask { from { opacity:0; transform:translateY(40%) }
                         to   { opacity:1; transform:translateY(0) } }   // clipped by .headline-line
    @keyframes in-pop  { 0%   { opacity:0; transform:scale(0.90) }
                         70%  { opacity:1; transform:scale(1.03) }
                         100% { opacity:1; transform:scale(1) } }
    @keyframes in-btn  { from { opacity:0; transform:translateY(18px) scale(0.94) }
                         to   { opacity:1; transform:translateY(0) scale(1) } }
    @keyframes in-side { from { opacity:0; transform:translateX(22px) }
                         to   { opacity:1; transform:translateX(0) } }
    @keyframes in-stat { from { opacity:0; transform:translateY(20px) }
                         to   { opacity:1; transform:translateY(0) } }

H. RESPONSIVE TABLE — every breakpoint is a token override table

  >=1600px
    --logo:17px; --logo-mark:24px; --nav:15px; --nav-h:44px; --btn:15px; --btn-h:44px;
    --hero-btn-h:48px; --h1:64px; --lede:18px; --badge:13.5px; --stat-size:15px;
    --header-y:28px; --header-x:64px; --stats-x:96px; --stats-y:44px;
    --copy-max:980px; --lede-max:540px

  >=1920px
    --h1:76px; --lede:19px; --badge:14px; --stat-size:15.5px; --header-y:30px; --header-x:72px;
    --stats-x:120px; --stats-y:52px; --copy-max:1060px; --lede-max:580px; --hero-gap:96px

  1280px – 1599px
    --h1:54px; --header-x:48px; --copy-max:900px

  901px – 1279px
    --h1:42px; --nav-h:36px; --hero-gap:64px; --copy-max:760px; --lede-max:440px;
    --stats-x:48px; --stat-gap:28px

  >=901px AND (max-height:850px)
    --h1:40px; --hero-gap:48px; --header-y:18px; --stats-y:28px

  >=901px AND (max-height:720px)
    --h1:34px; --hero-gap:32px; --lede:15px; --header-y:14px; --stats-y:22px; --stat-gap:24px

  >=901px DESKTOP LOCK (apply in the same block)
    html, body { height:100%; overflow:hidden }
    .page { height:100dvh; overflow:hidden }
    ONE FRAME, NO SCROLL.

  <=900px  (phone + small tablet — scrolling IS allowed here)
    Remove the vh lock: html, body { height:auto; overflow:auto } .page { height:auto; min-height:100dvh }
    .nav-desktop { display:none }  .burger { display:inline-flex }
    --h1:40px; --header-y:18px; --header-x:24px; --hero-gap:56px; --stats-x:24px;
    --stats-y:32px; --stat-gap:18px; --copy-max:640px; --lede-max:420px
    .hero { padding:16px 20px var(--hero-gap) }
    .stats ul { justify-content:center }
    Menu overlay per E.5.

  <=560px
    --h1:34px; --lede:15px; --badge:12px; --stat-size:12.5px; --hero-gap:44px;
    --header-x:18px; --stats-x:18px
    .hero-actions { flex-direction:column; align-items:stretch; width:100% }
    .hero-actions .btn { width:100% }
    .headline-line { padding:0.06em 0.10em 0.14em }
    .stats ul { flex-direction:column; align-items:center; gap:10px }   // three stacked lines
  No horizontal overflow at 390px, 768px, 1440px or 1920px: never set a width wider than
  100vw, keep --copy-max inside a 20px gutter, and let .headline-line shrink (it is a block,
  so it wraps rather than overflows).

I. FAILURE GUARDS

  I.1 Resting opacity 1. `.appear { opacity:1 }` is the base rule; the animation only ever
      animates FROM 0. If CSS animations are unsupported, disabled, or interrupted, every
      element is already in its final state. The page is NEVER blank.
  I.2 animationend settlement. On each element's own `animationend`, add `.is-in` so the
      element drops the animation and keeps its end state (prevents any post-animation
      repaint from re-running the keyframe, and frees compositor layers).
  I.3 Two-rAF fallback. After two nested requestAnimationFrames from DOMContentLoaded, for
      every `.appear`: if `el.getAnimations().some(a => a.playState === 'running' ||
      a.playState === 'finished')` is false, add `.is-in`. Guard with
      `typeof el.getAnimations === 'function'` — if absent, add `.is-in` to all.
  I.4 Canvas fallback. If `canvas.getContext('2d')` returns null, or sprite creation throws,
      hide #aurora, keep the black ground + scrim, set `__DEMO__.ready = true`, push
      'aurora-canvas-fallback' into effects, and push nothing into errors. The page must still
      look finished (it is a black page with a gradient scrim — acceptable).
  I.5 prefers-reduced-motion: reduce
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { transition:none !important; animation:none !important; }
        .appear, .headline-line, .badge-dot, h1 em { opacity:1 !important; transform:none !important;
          clip-path:none !important; filter:none !important; }
        .grain-svg { animation:none !important }
      }
      Canvas under reduced motion: build the sprites, draw ONE static frame at t = 0 with the
      amber band parked off-frame, then keep the rAF loop running ONLY to increment
      __DEMO__.frames (no dt advance, no draw). The visual result is a completely static,
      fully readable page; telemetry still advances.

J. THE JAVASCRIPT — exactly this much, nothing more

  (function () {
    'use strict';
    window.__DEMO__ = { name: 'aurora-freight', ready: false, frames: 0, effects: [], errors: [] };
    var D = window.__DEMO__;
    window.addEventListener('error', function (e) {
      D.errors.push(String((e && e.message) || 'error'));
    });

    // --- 1. entrance settlement + fallback (I.2, I.3) ---
    var appear = Array.prototype.slice.call(document.querySelectorAll('.appear'));
    appear.forEach(function (el) {
      el.addEventListener('animationend', function () { el.classList.add('is-in'); });
    });
    requestAnimationFrame(function () {
      requestAnimationFrame(function () {
        appear.forEach(function (el) {
          var running = false;
          if (typeof el.getAnimations === 'function') {
            running = el.getAnimations().some(function (a) {
              return a.playState === 'running' || a.playState === 'finished';
            });
          }
          if (!running) { el.classList.add('is-in'); }
        });
      });
    });

    // --- 2. mobile menu (E.5) ---
    var burger = document.querySelector('.burger');
    var menu = document.getElementById('mobile-menu');
    function setMenu(open) {
      if (!burger || !menu) { return; }
      menu.hidden = !open;
      burger.setAttribute('aria-expanded', open ? 'true' : 'false');
      document.body.classList.toggle('menu-open', open);
    }
    if (burger && menu) {
      burger.addEventListener('click', function () {
        setMenu(menu.hidden === true);
      });
      menu.addEventListener('click', function (e) {
        if (e.target.closest('a')) { setMenu(false); }
      });
      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') { setMenu(false); }
      });
      window.addEventListener('resize', function () {
        if (window.innerWidth >= 901) { setMenu(false); }
      });
    }

    // --- 3. aurora canvas (B) ---
    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var canvas = document.getElementById('aurora');
    var ctx = canvas && canvas.getContext ? canvas.getContext('2d') : null;

    if (!ctx) {                                  // I.4
      if (canvas) { canvas.style.display = 'none'; }
      D.ready = true; D.effects.push('aurora-canvas-fallback');
      return;
    }

    var PALETTES = [
      [[34,211,238],[18,168,154],[124,92,255],[42,107,216],[168,85,247],[240,162,74]],
      [[53,224,208],[15,143,191],[91,108,255],[27,79,216],[198,120,247],[255,176,102]],
      [[77,227,193],[23,153,127],[139,92,246],[37,99,235],[217,70,239],[245,158,11]]
    ];
    var BANDS = [
      { r:0.62, a:0.58, ax:0.30, ay:0.20, fx:0.0532, fy:0.0411, px:0.0, py:1.7, al:0.62 },
      { r:0.54, a:0.64, ax:0.26, ay:0.24, fx:0.0648, fy:0.0480, px:2.1, py:0.4, al:0.55 },
      { r:0.70, a:0.50, ax:0.34, ay:0.18, fx:0.0439, fy:0.0861, px:4.0, py:3.2, al:0.40 },
      { r:0.48, a:0.70, ax:0.22, ay:0.28, fx:0.0757, fy:0.0576, px:5.6, py:2.6, al:0.34 },
      { r:0.66, a:0.54, ax:0.36, ay:0.16, fx:0.0376, fy:0.1030, px:1.2, py:5.0, al:0.28 }
    ];
    var SPRITE = 256, sprites = [];
    function buildSprites() {
      for (var p = 0; p < PALETTES.length; p++) {
        for (var i = 0; i < 6; i++) {
          var c = PALETTES[p][i];
          var cv = document.createElement('canvas');
          cv.width = SPRITE; cv.height = SPRITE;
          var g = cv.getContext('2d');
          var grd = g.createRadialGradient(128, 128, 0, 128, 128, 128);
          var rgb = c[0] + ',' + c[1] + ',' + c[2];
          grd.addColorStop(0.00, 'rgba(' + rgb + ',1)');
          grd.addColorStop(0.35, 'rgba(' + rgb + ',0.42)');
          grd.addColorStop(0.62, 'rgba(' + rgb + ',0.14)');
          grd.addColorStop(0.82, 'rgba(' + rgb + ',0.04)');
          grd.addColorStop(1.00, 'rgba(' + rgb + ',0)');
          g.fillStyle = grd; g.fillRect(0, 0, SPRITE, SPRITE);
          sprites.push(cv);
        }
      }
    }
    buildSprites();

    var DPR = Math.min(window.devicePixelRatio || 1, 2), SCALE = 0.5;
    var W = 0, H = 0, maxDim = 0;
    function resize() {
      W = Math.max(1, Math.round(window.innerWidth  * DPR * SCALE));
      H = Math.max(1, Math.round(window.innerHeight * DPR * SCALE));
      var cap = Math.sqrt(2600000 / (W * H));
      if (cap < 1) { W = Math.round(W * cap); H = Math.round(H * cap); }
      canvas.width = W; canvas.height = H;
      maxDim = Math.max(W, H);
      ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'low';
      draw(0);                                    // repaint immediately after a resize
    }

    var pa = 0, pb = 1, mix = 0, fading = false, fadeT0 = 0, mixStart = 0;
    var FADE_EVERY = 20000, FADE_DUR = 2600, sinceFade = 0;
    var CYCLE = 30;

    function startFade() {
      mixStart = mix; fading = true; fadeT0 = now;         // B.6: never restart from 0
    }
    function tickFade(now, dt) {
      sinceFade += dt * 1000;
      if (!fading && sinceFade >= FADE_EVERY) { sinceFade = 0; pb = (pb + 1) % 3; startFade(); }
      if (fading) {
        var k = Math.min(1, (now - fadeT0) / FADE_DUR);
        var e = k < 0.5 ? 4 * k * k * k : 1 - Math.pow(-2 * k + 2, 3) / 2;   // easeInOutCubic
        mix = mixStart + (1 - mixStart) * e;
        if (k >= 1) { pa = pb; pb = (pb + 1) % 3; mix = 0; fading = false; }
      }
    }

    function draw(t) {
      ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 1;
      ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, W, H);
      ctx.globalCompositeOperation = 'screen';
      for (var i = 0; i < 5; i++) {
        var b = BANDS[i];
        var cx = 0.50 * W + b.ax * W * Math.sin(t * b.fx + b.px);
        var cy = 0.46 * H + b.ay * H * Math.sin(t * b.fy + b.py);
        var rr = b.r * maxDim, dw = 2 * rr, dh = 2 * rr * b.a;
        var dx = cx - rr, dy = cy - dh / 2;
        var al = b.al;
        ctx.globalAlpha = al * (1 - mix);
        ctx.drawImage(sprites[pa * 6 + i], dx, dy, dw, dh);
        ctx.globalAlpha = al * mix;
        ctx.drawImage(sprites[pb * 6 + i], dx, dy, dw, dh);
      }
      // amber sweep, band 5 (B.4)
      var p = (t % CYCLE) / CYCLE;
      if (p >= 0.10 && p <= 0.62) {
        var u = (p - 0.10) / 0.52;
        var ease = 0.5 - 0.5 * Math.cos(Math.PI * u);
        var ax = (-0.35 + 1.70 * ease) * W;
        var ay = (0.62 - 0.10 * Math.sin(Math.PI * u)) * H;
        var env = Math.pow(Math.sin(Math.PI * u), 0.8);
        var rr5 = 0.40 * maxDim, dw5 = 2 * rr5, dh5 = 2 * rr5 * 0.46;
        var al5 = 0.42 * env;
        ctx.globalAlpha = al5 * (1 - mix);
        ctx.drawImage(sprites[pa * 6 + 5], ax - rr5, ay - dh5 / 2, dw5, dh5);
        ctx.globalAlpha = al5 * mix;
        ctx.drawImage(sprites[pb * 6 + 5], ax - rr5, ay - dh5 / 2, dw5, dh5);
      }
      ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 1;
    }

    var now = 0, last = 0, lastDraw = 0, t = 0, raf = 0;
    function frame(ts) {
      raf = requestAnimationFrame(frame);
      D.frames++;
      if (!last) { last = ts; lastDraw = ts; now = ts; return; }
      var dt = Math.min((ts - last) / 1000, 0.05);
      last = ts; now = ts;
      if (reduce) { return; }                       // I.5: static image, frames still count
      t += dt;
      tickFade(ts, dt);
      if (ts - lastDraw < 15.5) { return; }
      lastDraw = ts;
      draw(t);
      if (!D.ready) { D.ready = true; }
    }

    function boot() { resize(); draw(0); D.ready = true; raf = requestAnimationFrame(frame); }
    var rt = 0;
    window.addEventListener('resize', function () {
      clearTimeout(rt); rt = setTimeout(resize, 150);
    });
    window.addEventListener('orientationchange', function () { resize(); });
    document.addEventListener('visibilitychange', function () {
      if (document.hidden) { cancelAnimationFrame(raf); raf = 0; }
      else if (!raf) { last = 0; raf = requestAnimationFrame(frame); }
    });

    boot();
    D.effects.push('aurora-canvas', 'palette-crossfade', 'amber-sweep', 'grain', 'entrance-stagger', 'pill-shine');
  })();

  No console.log anywhere. No unhandled promise. No network request other than Google Fonts.
  File size target: under 90 KB (this page should land around 22-30 KB).


---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Basalt

- Slug: `basalt`
- Page: https://landingpageprompts.com/prompts/basalt
- Effect: A light sweep recalculates the three faces of sixty SVG basalt columns, creating a rippling geothermal field.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 51,075; total with repair and cross-check: 85,304
- Verification: 18/18 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - The generated document is one index.html with exactly one h1, semantic header/nav/main/footer elements, no external media, and no framework or bundler dependency.
  - At 1440x900, the page has height 100dvh with overflow hidden, no horizontal overflow, and the visible copy reads “POWER, BUILT FROM THE EARTH.”
  - The inline field contains exactly 60 column groups and 180 face paths, each column has one top, one left, and one right face, and the background uses no canvas or external images.
  - window.__DEMO__ exists with name basalt, ready true after first paint, a frames counter incremented once per animation frame, the five listed effect names, and an errors array; console output remains empty.
  - At prefers-reduced-motion: reduce, the sweep is absent, all animated content is readable and static, no continuous rAF loop runs, and the page still exposes ready true with no uncaught exceptions.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
WHAT IS BEING BUILT

Build one complete standalone index.html for a single-viewport cinematic landing page titled “Basalt — Geothermal Energy From Deep Ground.” The document language is en. The document title is “Basalt — Geothermal Energy From Deep Ground.” Include one <header>, one <nav> with an accessible name, one <main>, and one <footer>. Include exactly one <h1> reading “POWER, BUILT FROM THE EARTH.” Do not build a second heading, article, application shell, form, cookie panel, modal, card carousel, dashboard, pricing section, login flow, video, image gallery, or additional page.

Use semantic HTML, plain CSS, and vanilla JavaScript only. Do not use React, Tailwind, GSAP, Three.js, Lottie, a framework, a bundler, a build step, external JavaScript, external images, remote fonts other than Google Fonts, MP4, WebM, GIF, base64 media, or any third-party CDN URL. Every visual pixel must be produced by HTML, CSS gradients, inline SVG, or CSS transforms. Google Fonts is the only permitted network request. Load Inter from https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap and provide the exact system fallback stack.

At viewport widths of 901px and above, set html, body, and the page shell to height: 100dvh and overflow: hidden. The page itself does not scroll. At widths of 900px and below, allow vertical document scrolling while preventing horizontal scrolling. The composition must fit without clipping at 390x844, 768x1024, 1440x900, and 1920x1080. The page must remain readable with JavaScript disabled except for the decorative light sweep.

THE BACKDROP

Create a full-viewport geothermal scene using one inline SVG field containing exactly 60 hexagonal prisms. The field is not a flat honeycomb: every prism has a top rhombus/hex face, one lower-left side face, and one lower-right side face. Use 60 <g class="column"> elements and exactly 180 child face paths: 60 .top, 60 .left, and 60 .right. Generate the complete SVG in JavaScript at startup from numeric geometry; do not include 180 handwritten path elements.

Use a flat-top hex grid with horizontal spacing of 92 SVG units and row staggering of 78 SVG units. Start at x=220, y=250. The field occupies an SVG viewBox of 0 0 1600 1000. Generate rows 0 through 8 with row counts of 6, 7, 7, 7, 7, 7, 7, 7, and 5, totalling 60. Offset every odd row by 46 SVG units. Each top hexagon has radius 46 SVG units, with vertices at angles 0, 60, 120, 180, 240, and 300 degrees. The top face uses points at x±46, y+23, and x, y−39 around its center. Extrude each column downward by a height from 34 to 214 SVG units according to depth. The left face connects the top’s lower-left, bottom, and lower-right vertices to their translated counterparts. The right face uses the lower-right, bottom, and translated lower-center geometry. Use fill-rule="evenodd" where required, but keep all three faces individually addressable.

Make nearer columns taller. Compute depth with a fixed column index-based formula: minimumDepth = 34, maximumDepth = 214, and depth = 214 − round(((row / 8) * 108) + ((columnIndex % 5) * 12)). Add no randomness. Apply a perspective scale from 0.58 in the rear to 1.08 in the front, centered at x=800,y=565. Apply a 6 degree skewX(-6) to the SVG field. Do not use SVG filters on individual columns.

The background is a CSS radial gradient centered at 50% 58%: #17252a at 0%, #0d171b at 48%, #070d10 at 100%. Overlay one linear-gradient(115deg, rgba(16,35,39,.92) 0%, rgba(5,12,15,.18) 44%, rgba(18,31,35,.74) 100%). Add one absolutely positioned .grain layer using a repeating-radial-gradient at 0.34px radius, 7px spacing, rgba(226,232,240,.025) 0, rgba(226,232,240,0) 1px. The grain must be static and pointer-events:none.

Add a moving .light-sweep element across the field. It is a 720px-wide, 1400px-high rotated rectangle with opacity 0, background linear-gradient(90deg, rgba(226,232,240,0) 0%, rgba(226,232,240,.025) 35%, rgba(226,232,240,.10) 50%, rgba(226,232,240,.02) 67%, rgba(226,232,240,0) 100%), transform translate3d(-900px,-80px,0) rotate(18deg), and will-change: transform,opacity. The light is a visual only; it must not intercept pointer events.

The SVG is rendered once with width:100%; height:100%; display:block. Do not use canvas. No canvas resolution is required; state this explicitly in implementation: canvas resolution is not applicable, and there is no canvas element. The per-frame budget is 60 columns, 180 fill updates maximum, one transform update, one opacity update, and zero layout reads. Update only SVG fill values and opacity or CSS custom properties. Do not call getBoundingClientRect, getComputedStyle, querySelector, querySelectorAll, classList manipulation, or DOM creation during an animation frame. Cache all nodes, geometry, colors, and previous values before the rAF loop. Precompute the three face RGB values for 24 light-angle samples in JavaScript before animation begins.

Use no per-item SVG filter, no blur filter on the moving light, and no shadowBlur equivalent. Add foreground haze with two static CSS pseudo-elements: .haze-near is a 760px by 280px radial ellipse at 12% 104% with blur(34px), opacity .22; .haze-far is a 1100px by 260px radial ellipse at 92% 70% with blur(58px), opacity .14. These are the only blur radii used by the backdrop.

THE LAYER STACK

Build the visual stack back to front with these exact z-index values. The fixed page shell has z-index:0 and position:relative; isolation:isolate. The .backdrop has z-index:-5 and position:absolute; inset:0. The .backdrop-gradient has z-index:-4. The .grain has z-index:-3. The #field has z-index:-2. The .haze-far has z-index:-1. The .light-sweep has z-index:0. The .vignette has z-index:1. The header has z-index:10. The main has z-index:5. The footer has z-index:10. The focus treatment must remain above every layer, use outline rather than z-index, and be visible on all controls. No stacking context may put the hero text behind the field.

THE TOKEN TABLE

Define these exact custom properties on :root and use them rather than untracked sizes or colors:

--page-bg: #070d10
--ink: #f4f7f8
--muted: #9aa9ad
--accent: #e2e8f0
--accent-soft: rgba(226,232,240,.14)
--line: rgba(226,232,240,.22)
--panel: rgba(12,23,27,.72)
--panel-solid: #0c171b
--black: #05090b
--teal-deep: #17252a
--teal-mid: #0d171b
--teal-low: #070d10
--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
--page-pad-x: clamp(24px, 5.55vw, 120px)
--page-pad-y: 28px
--header-height: 48px
--header-row-height: 32px
--nav-gap: 26px
--hero-max-width: 720px
--hero-top: clamp(104px, 15vh, 160px)
--hero-grid-gap: 26px
--eyebrow-size: 11px
--eyebrow-tracking: .18em
--h1-size: clamp(44px, 5.25vw, 86px)
--h1-line-height: .96
--h1-weight: 600
--body-size: 15px
--body-line-height: 1.6
--body-max-width: 430px
--body-gap: 24px
--action-row-gap: 18px
--button-height: 46px
--button-padding-x: 22px
--button-radius: 2px
--button-font-size: 12px
--button-tracking: .12em
--footer-height: 42px
--footer-gap: 24px
--field-opacity: .92
--field-blur-far: 0px
--field-blur-near: 0px
--vignette-alpha: .34
--sweep-duration: 12s
--sweep-delay: -2.4s
--ease-out: cubic-bezier(.16,1,.3,1)
--ease-in-out: cubic-bezier(.65,0,.35,1)
--ease-sweep: cubic-bezier(.45,0,.55,1)
--duration-page: 900ms
--duration-stagger: 760ms
--duration-sweep: 12000ms

Set box-sizing:border-box on every element. Set body margin:0, min-width:320px, color:var(--ink), background:var(--page-bg), font-family:var(--font-sans), and text-rendering:optimizeLegibility.

THE COMPOSITION

Header is a 100% width flex row with padding:var(--page-pad-y) var(--page-pad-x), height:var(--header-height), align-items:center, justify-content:space-between, and border-bottom:1px solid rgba(226,232,240,.11). The brand is an anchor with aria-label="Basalt home", display:flex, align-items:center, gap:12px, color:var(--ink), text-decoration:none, font-size:14px, font-weight:700, letter-spacing:.2em. Its mark is a 24px square inline SVG with a 14px basalt-colored hexagon and a 2px accent diagonal line. The navigation contains exactly three links: “Approach”, “Systems”, and “Contact”. Each link has a visible accessible name, color:var(--muted), text-decoration:none, font-size:11px, font-weight:600, letter-spacing:.14em, text-transform:uppercase, and a hover color of var(--accent). The right-side header status is a 9px dot plus the exact text “GEOTHERMAL / ACTIVE”, with dot color #8ba8a1.

Main is positioned absolute with inset:var(--header-height) var(--page-pad-x) var(--footer-height), display:grid, align-items:center, pointer-events:none. Main content is pointer-events:auto. The hero is a 7-column grid with the copy block spanning columns 1 through 5 and a 2-column technical readout occupying columns 6 through 7. The hero has max-width:1440px, width:100%, margin:0 auto, transform:translateY(calc(var(--hero-top) * -.16)), and gap:var(--hero-grid-gap).

The hero copy is stacked with gap:var(--body-gap). The eyebrow is one line reading “BASALT / DEEP-HEAT INFRASTRUCTURE”, color:var(--accent), font-size:var(--eyebrow-size), font-weight:600, letter-spacing:var(--eyebrow-tracking), line-height:1.2, text-transform:uppercase. Place a 24px horizontal accent rule before it. The h1 is max-width:720px, color:var(--ink), font-size:var(--h1-size), font-weight:var(--h1-weight), line-height:var(--h1-line-height), letter-spacing:-.055em, text-wrap:balance, and contains one highlighted span using color:var(--accent) and font-weight:400. The exact h1 content is “POWER, BUILT FROM THE EARTH.”

The body paragraph is max-width:var(--body-max-width), margin:0, color:var(--muted), font-size:var(--body-size), line-height:var(--body-line-height), and contains exactly: “Basalt turns the earth’s stable heat into precise, continuous power. We build the systems that make deep geothermal energy dependable at grid scale.” The action row contains two visible controls. The primary anchor text is “EXPLORE THE FIELD” and href="#field". The secondary anchor text is “OUR APPROACH” and href="#approach". Both have height:var(--button-height), padding:0 var(--button-padding-x), border-radius:var(--button-radius), font-size:var(--button-font-size), font-weight:700, letter-spacing:var(--button-tracking), line-height:var(--button-height), text-decoration:none, text-transform:uppercase.

The technical readout is a 2-column grid, align-self:end, padding:18px 0 18px 24px, border-left:1px solid var(--line), gap:18px. It contains four exact labels and values: “DEPTH / 4.8 KM”, “OUTPUT / 120 MW”, “UPTIME / 99.97%”, and “STATUS / COMMISSIONED”. Labels use 9px, 600 weight, .15em tracking, uppercase, and var(--muted). Values use 12px, 600 weight, .06em tracking, and var(--ink). The readout is decorative information, not a control.

Footer is a flex row with padding:0 var(--page-pad-x), height:var(--footer-height), align-items:center, justify-content:space-between, border-top:1px solid rgba(226,232,240,.11), color:var(--muted), font-size:10px, font-weight:500, letter-spacing:.12em, text-transform:uppercase. The left text is “BASALT ENERGY SYSTEMS”. The center text is “BUILT BELOW / DISTRIBUTED EVERYWHERE”. The right text is “© 2025 BASALT”. Each text item has a visible focus state only when interactive; these footer items are not interactive.

THE UI LANGUAGE

The primary control uses background:linear-gradient(135deg,#f4f7f8 0%,#cbd5d9 100%), color:#071015, border:1px solid #f4f7f8, box-shadow:0 8px 24px rgba(0,0,0,.18). Its resting transform is translateY(0), opacity:1. On hover, background:linear-gradient(135deg,#ffffff 0%,#dce5e8 100%), transform:translateY(-2px), box-shadow:0 12px 28px rgba(0,0,0,.26). On active, transform:translateY(0), box-shadow:0 5px 14px rgba(0,0,0,.2). The secondary control uses background:rgba(226,232,240,.04), color:var(--accent), border:1px solid rgba(226,232,240,.42). Its resting transform is translateY(0), opacity:1. On hover, background:rgba(226,232,240,.11), border-color:var(--accent), transform:translateY(-2px). On active, transform:translateY(0). Every visible anchor has a focus-visible outline:2px solid #ffffff, outline-offset:4px, border-radius:2px. The brand and navigation links use a 1px transparent underline at rest and a 1px var(--accent) underline on hover, with focus-visible outline as specified.

MOTION

Use these named keyframes:

@keyframes basalt-rise { from { opacity:0; transform:translate3d(0,22px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes basalt-fade { from { opacity:0; } to { opacity:1; } }
@keyframes basalt-scan { 0% { opacity:0; transform:translate3d(-900px,-80px,0) rotate(18deg); } 16% { opacity:.82; } 68% { opacity:.5; } 100% { opacity:0; transform:translate3d(2350px,-80px,0) rotate(18deg); } }
@keyframes basalt-pulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }

Apply the initial page sequence with these exact delays. Header: basalt-fade, duration 760ms, delay 0ms. Brand: basalt-fade, duration 620ms, delay 80ms. Nav links: basalt-fade, duration 620ms, delay 140ms, 170ms, 200ms for Approach, Systems, Contact. Eyebrow: basalt-rise, duration 760ms, delay 260ms. h1: basalt-rise, duration 900ms, delay 340ms. Paragraph: basalt-rise, duration 760ms, delay 460ms. Primary button: basalt-rise, duration 760ms, delay 560ms. Secondary button: basalt-rise, duration 760ms, delay 620ms. Technical readout: basalt-fade, duration 820ms, delay 700ms. Footer: basalt-fade, duration 760ms, delay 820ms. The status dot uses basalt-pulse, duration 1800ms, delay 900ms, iteration-count:infinite.

Animate the light sweep with basalt-scan, duration 12s, delay -2.4s, iteration-count:infinite, timing-function:cubic-bezier(.45,0,.55,1). The field is static in layout; its face colors change through the JavaScript light-angle loop. The loop is the only continuous color animation. In JavaScript, calculate normalizedTime as ((now - startTime) / 12000) % 1, angle as -72 + normalizedTime * 144 degrees, and sampleIndex as round(((angle + 72) / 6) % 24). Interpolate between sample 0 and sample 1 with t equal to the fractional sample position. Set each top, left, and right fill from the cached sample arrays. Set column opacity from a cached depth lookup: rear .42, middle .68, front .92. Do not animate SVG geometry, transform, or filter in the rAF loop.

RESPONSIVE TABLE

Apply the following exact overrides:

At 1920px and wider: --page-pad-x:120px; --page-pad-y:32px; --h1-size:86px; --hero-top:160px; --body-size:15px; --field-opacity:.94.

At 1440px and wider: --page-pad-x:80px; --page-pad-y:28px; --h1-size:76px; --hero-top:136px; --body-size:15px; --field-opacity:.92.

At 901px through 1439px: --page-pad-x:56px; --page-pad-y:24px; --h1-size:64px; --hero-top:112px; --body-size:14px; --field-opacity:.86.

At 768px through 900px: set height:auto, min-height:100dvh, overflow-x:hidden; --page-pad-x:32px; --page-pad-y:20px; --header-height:44px; --footer-height:38px; --h1-size:52px; --hero-top:0px; --hero-grid-template:1fr; --field-opacity:.72; --vignette-alpha:.24. Main is position:relative, inset:auto, min-height:calc(100dvh - 82px), padding:64px 0 48px, align-items:start. The hero is one column, gap:36px. The technical readout becomes a horizontal 4-column row with padding:16px 0 0, border-left:0, border-top:1px solid var(--line), gap:16px. The nav gap is 18px. The footer center text is hidden only through a semantic visually-hidden class, not display:none, so the accessible footer structure remains intact.

At 390px through 767px: set height:auto, min-height:100dvh, overflow-x:hidden; --page-pad-x:22px; --page-pad-y:18px; --header-height:42px; --footer-height:36px; --h1-size:44px; --hero-top:0px; --body-size:14px; --body-line-height:1.55; --field-opacity:.58; --vignette-alpha:.2; --nav-gap:12px; --button-height:44px; --button-padding-x:16px; --button-font-size:10px. Hide the header navigation links and the header status text from layout with a 1px visually-hidden utility, preserving their accessible names and keyboard order; do not use display:none or visibility:hidden. Main has padding:52px 0 36px, min-height:calc(100dvh - 78px). The hero is one column. The technical readout is a 2-column grid with padding-top:18px and border-top:1px solid var(--line). The footer displays only the left and right text with gap:10px; center text is visually hidden. The field remains 1600x1000 viewBox with width:160%; height:100%; left:-30%; top:0%; opacity:var(--field-opacity). The light sweep remains 720px wide and is clipped by overflow:hidden.

At height 760px and below, including 1440x760: --page-pad-y:20px; --header-height:42px; --footer-height:36px; --hero-top:76px; --h1-size:54px; --body-size:13px; --body-line-height:1.45; --body-gap:18px; --action-row-gap:12px. Reduce technical readout padding-top to 12px and padding-bottom to 12px. At height 680px and below, including 390x680: --page-pad-y:16px; --header-height:38px; --footer-height:32px; --h1-size:40px; --hero-top:56px; --body-size:13px; --body-gap:14px; --button-height:40px; --button-padding-x:14px; --footer-font-size:9px. The h1 may wrap to three lines; the hero must not overlap the footer.

FAILURE GUARDS

Set every animated foreground element to opacity:1 and transform:none as its resting CSS state. JavaScript must not make copy disappear. If JavaScript does not execute, the inline SVG field, background, copy, and controls remain visible and static. Initialize telemetry before any other script work with exactly:

window.__DEMO__ = { name: 'basalt', ready: false, frames: 0, effects: [], errors: [] };

Register one window error listener that pushes String(event.message || 'window error') into window.__DEMO__.errors. Do not call console.log, console.warn, console.error, alert, or debuggers. After the first paint, use requestAnimationFrame(() => { window.__DEMO__.ready = true; }); Mark ready only after the first frame has been composited.

Use a two-rAF fallback before starting continuous animation. The first rAF validates the viewport and caches measurements; the second rAF sets ready and starts the loop. If the second rAF is unavailable, set ready true on the first rAF and use a 50ms setTimeout to start the loop. If requestAnimationFrame is missing, set ready true and do not run a continuous loop; retain the static composition. If an individual face update throws, catch the error once outside the loop, push the message to telemetry.errors, stop the loop, and set all face fills to their cached fallback values. Never throw asynchronously.

Under prefers-reduced-motion: reduce, remove the sweep animation, set .light-sweep to display:none, remove all page entrance animations, set all animated foreground elements to opacity:1 and transform:none, set #field opacity:var(--field-opacity), and use one static light angle of 0 degrees for all faces. The reduced-motion static state must be readable, have no continuous JavaScript loop, and retain telemetry ready=true after first paint. The reduced-motion CSS block must include all entrance selectors and the light-sweep selector.

THE EXACT JS

Use this JavaScript structure, preserving the named constants, cached references, geometry, telemetry, guards, and loop semantics:

(() => {
  'use strict';
  window.__DEMO__ = { name: 'basalt', ready: false, frames: 0, effects: ['basalt-rise','basalt-fade','basalt-scan','basalt-pulse','face-light'], errors: [] };
  window.addEventListener('error', event => window.__DEMO__.errors.push(String(event.message || 'window error')));
  const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const svg = document.getElementById('field');
  const namespace = 'http://www.w3.org/2000/svg';
  if (!svg) return;
  const columns = [];
  const faces = { top: [], left: [], right: [] };
  const rowCounts = [6,7,7,7,7,7,7,7,5];
  const hex = radius => Array.from({length:6}, (_, i) => {
    const angle = Math.PI * i / 3;
    return [radius * Math.cos(angle), radius * Math.sin(angle)];
  });
  const make = (tag, className, points) => {
    const node = document.createElementNS(namespace, tag);
    node.setAttribute('class', className);
    node.setAttribute('d', points.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(2) + ' ' + p[1].toFixed(2)).join(' ') + ' Z');
    return node;
  };
  let index = 0;
  rowCounts.forEach((count, row) => {
    for (let col = 0; col < count; col++) {
      const x = 220 + col * 92 + (row % 2 ? 46 : 0);
      const y = 250 + row * 78;
      const depth = 214 - Math.round((row / 8) * 108 + (col % 5) * 12);
      const radius = 46;
      const vertices = hex(radius).map(p => [x + p[0], y + p[1]]);
      const bottom = vertices.map(p => [p[0], p[1] + depth]);
      const group = document.createElementNS(namespace, 'g');
      group.setAttribute('class', 'column');
      const leftPoints = [vertices[4], vertices[5], bottom[5], bottom[4], bottom[3]];
      const rightPoints = [vertices[5], vertices[0], bottom[0], bottom[5]];
      const top = make('path', 'top', vertices);
      const left = make('path', 'left', leftPoints);
      const right = make('path', 'right', rightPoints);
      group.append(top, left, right);
      svg.appendChild(group);
      const opacity = .42 + (row / 8) * .50;
      group.setAttribute('opacity', opacity.toFixed(3));
      columns.push(group);
      faces.top.push(top); faces.left.push(left); faces.right.push(right);
      index++;
    }
  });
  const samples = Array.from({length:25}, (_, i) => {
    const angle = -72 + (i / 24) * 144;
    const radians = angle * Math.PI / 180;
    const lightX = Math.cos(radians);
    const lightY = Math.sin(radians);
    const top = [94 + Math.round(24 * (lightY + 1)), 113 + Math.round(25 * (lightY + 1)), 119 + Math.round(27 * (lightY + 1))];
    const left = [35 + Math.round(21 * (1 - lightX)), 56 + Math.round(24 * (1 - lightX)), 61 + Math.round(26 * (1 - lightX))];
    const right = [55 + Math.round(26 * (1 + lightX)), 78 + Math.round(29 * (1 + lightX)), 83 + Math.round(31 * (1 + lightX))];
    return {top,left,right};
  });
  const applySample = sample => {
    faces.top.forEach(node => node.setAttribute('fill', 'rgb(' + sample.top.join(',') + ')'));
    faces.left.forEach(node => node.setAttribute('fill', 'rgb(' + sample.left.join(',') + ')'));
    faces.right.forEach(node => node.setAttribute('fill', 'rgb(' + sample.right.join(',') + ')'));
  };
  if (reduced) {
    applySample(samples[12]);
    requestAnimationFrame(() => { window.__DEMO__.ready = true; });
    return;
  }
  const start = performance.now();
  let lastIndex = -1;
  const render = now => {
    try {
      window.__DEMO__.frames += 1;
      const time = ((now - start) / 12000) % 1;
      const position = time * 24;
      const current = Math.floor(position);
      const next = Math.min(24, current + 1);
      const amount = position - current;
      if (current !== lastIndex) {
        const a = samples[current], b = samples[next];
        const mix = (x,y) => Math.round(x + (y - x) * amount);
        const sample = {top:a.top.map((v,i)=>mix(v,b.top[i])),left:a.left.map((v,i)=>mix(v,b.left[i])),right:a.right.map((v,i)=>mix(v,b.right[i]))};
        applySample(sample);
        lastIndex = current;
      }
      requestAnimationFrame(render);
    } catch (error) {
      window.__DEMO__.errors.push(String(error.message || error));
    }
  };
  const first = requestAnimationFrame(() => {
    const second = requestAnimationFrame(() => {
      window.__DEMO__.ready = true;
      startLoop();
    });
    if (!second) {
      window.__DEMO__.ready = true;
      startLoop();
    }
  });
  function startLoop() {
    if (typeof requestAnimationFrame === 'function') requestAnimationFrame(render);
  }
})();

Do not use any other JavaScript API in the animation loop. Do not add a resize observer, pointer listener, scroll listener, canvas, or media-query listener. The implementation must remain below 90 KB, produce zero console output, have no uncaught exceptions, sustain at least 20 frames per 1.2 seconds at 1440x900, and expose the exact telemetry object.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Bracket

- Slug: `bracket`
- Page: https://landingpageprompts.com/prompts/bracket
- Effect: A measured editorial landing page whose headings are progressively marked by hand-drawn dashed brackets, corner dots, and one looping red correction.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 58,247; total with repair and cross-check: 91,203
- Verification: 18/18 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - At 1440x900, the document has one nav, one header, one main, one footer, exactly one h1, and no horizontal or vertical page overflow; at 390x844 it has no horizontal overflow and body vertical scrolling is enabled.
  - The page contains one visible Marginalia navigation, the exact h1 text “Keep the useful part.”, the four workflow rows, the exact evidence quote, and the exact footer copy; every visible button or link has a non-empty accessible name.
  - The workflow contains one annotation SVG with viewBox="0 0 200 95", preserveAspectRatio="none", path data beginning M5 5 L195 5 L195 88 L5 72 Z, stroke-dasharray 6 4, eight annotation circles, and a group rotation of -0.5deg.
  - window.__DEMO__ exists with name "bracket", ready becomes true after first paint, frames increases during a 1.2 second desktop run, effects includes box-draw, corner-dots, and red-correction, and errors remains empty during normal interaction.
  - With prefers-reduced-motion:reduce, reveal text, annotation strokes, dots, and the red correction are visible and static, the rAF loop does not run, and the page remains readable at 390x844, 768x1024, 1440x900, and 1920x1080.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT

Build a single-file, single-viewport desktop landing page for Marginalia, a research-capture product whose primary action is marking up source material. The page must feel like a clean research document that has acquired four intelligent annotations: a product promise, three workflow headings, a testimonial, and one final call to action. It must not feel like a conventional SaaS hero with a centered headline, floating glass cards, decorative blobs, or a dashboard mock-up.

Create one complete index.html document with lang="en", charset UTF-8, an exact document title of "Marginalia — Keep the useful part", and a responsive viewport declaration of width=device-width, initial-scale=1. The semantic page structure must contain one nav, one header, one main, and one footer. There must be exactly one h1: "Keep the useful part." All other section titles are h2. Every visible control must be a native button or anchor with explicit accessible text. Use a visible 2px focus-visible outline in #C2452D with a 3px offset.

At widths of 901px and above, html, body, and the .page shell must be height: 100dvh; body must use overflow:hidden and the page must fit without vertical scrolling. At widths through 900px, the page may scroll vertically. No horizontal overflow is allowed at any width. The content column is flush-left, its desktop left gutter is exactly 72px, and its desktop text measure is 68ch. Annotation geometry may extend into the right margin but must remain inside the viewport.

Do NOT build a split hero, centered hero, card grid, pricing table, feature icon row, testimonial carousel, dashboard screenshot, map, video, image, photograph, illustration unrelated to annotation, floating blobs, grain image, glassmorphism, neon gradient, dark theme, 3D object, cursor follower, text scramble, parallax, or second looping animation. Do not use external media, remote images, third-party CDNs, base64 assets, framework code, React, Tailwind, GSAP, Three.js, or Lottie. Google Fonts is the only permitted network request. Use IBM Plex Mono at weights 400, 500, and 600; if the font request fails, use ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, and monospace. Load the permitted font stylesheet with preconnect links to fonts.googleapis.com and fonts.gstatic.com. Keep the complete file under 90 KB.

B. THE BACKDROP

The backdrop is a flat #F4F1EA bone field, not a canvas and not a video. Create 5 absolutely positioned ambient layers inside a .backdrop element with pointer-events:none:

1. One 1180px by 820px radial gradient at left:-180px, top:-240px, using rgba(26,24,21,0.035) at 0%, rgba(26,24,21,0.012) at 48%, and transparent at 72%.
2. One 900px by 640px radial gradient at right:-260px, bottom:-300px, using rgba(176,169,158,0.12) at 0% and transparent at 68%.
3. One 1px vertical line at left:71px, top:0, bottom:0, color rgba(26,24,21,0.08).
4. One 1px vertical line at right:71px, top:0, bottom:0, color rgba(26,24,21,0.06).
5. One 26px by 26px repeating-linear-gradient cross-paper texture positioned at right:104px, top:42px, with 1px lines in rgba(26,24,21,0.035), opacity:0.5, and background-size:13px 13px.

The two margin boxes are semantic decorative spans, not controls. Place .margin-note.margin-note--one at left:18px, top:220px, width:24px, height:116px, border:1px dashed rgba(176,169,158,0.7), and opacity:0.06. Place .margin-note.margin-note--two at right:18px, bottom:118px, width:24px, height:84px, the same border, and opacity:0.06. Both are empty, aria-hidden="true", contain no text, and exist visually as quote placeholders.

Every visible annotation is inline SVG with viewBox="0 0 200 95" and preserveAspectRatio="none". The base path is exactly M5 5 L195 5 L195 88 L5 72 Z, fill="none", stroke="#B0A99E", stroke-width="2", vector-effect="non-scaling-stroke", stroke-linecap="round", stroke-linejoin="round", and stroke-dasharray="6 4". Place four corner circles at (5,5), (195,5), (195,88), and (5,72) with r="3.5"; place four midpoint circles at (100,5), (195,46.5), (100,80), and (5,38.5) with r="3"; all eight circles use fill="#B0A99E" and vector-effect="non-scaling-stroke". Wrap the path and circles in a group with transform-origin:50% 50% and transform:rotate(-0.5deg).

Position each annotation overlay as position:absolute around the measured bounds of its target heading. On initial layout and on every ResizeObserver delivery, use the target heading getBoundingClientRect() and the document or shell origin to calculate x,y,width,height. Expand the SVG by 9px horizontally and 17px vertically with the left edge at target.left - 9, top at target.top - 8, width equal to target.width + 18, and height equal to target.height + 16. This single initial/resize measurement is permitted. Never call getBoundingClientRect() inside the rAF loop. The SVG is aria-hidden="true", focusable="false", and pointer-events:none.

Use a transparent SVG line of length 240 from 0,0 to 240,0 as a pathLength source for dash drawing. Animate the visible path from stroke-dashoffset:240 to 0 over 640ms with a custom cubic-bezier(0.16,1,0.3,1). The dots begin after 360ms. Dot scale progresses 0 to 1 in 200ms each with a 40ms stagger, using transform-box:fill-box and transform-origin:center.

The one red correction is a position:absolute 2px-high #C2452D line crossing the word "useful" in the h1. Place it from 4px below the h1’s top to the measured width of the inline text range for "useful" plus 5px. Its transform-origin:left center. Animate scaleX from 0 to 1 over 320ms using cubic-bezier(0.2,0.8,0.2,1), hold for 5.68s, then reset instantly at the end of a 6s cycle. It must be paused under reduced motion and displayed at scaleX:1.

There is no canvas. Therefore there is no canvas resolution trick, device-pixel-ratio handling, pixel buffer, filter, or shadow operation. The rAF work budget is no more than 6 style writes per frame, no more than 2 class toggles, no layout reads, and no allocation of DOM nodes. A frame updates only a cached document timestamp, the global frames counter, and the correction element’s CSS custom property --strike-progress. Pause the loop with document.hidden. Restart it on visibilitychange.

C. THE LAYER STACK

Use this exact front-to-back z-index contract:

1. body and page base: z-index:auto.
2. .backdrop gradients and guide lines: z-index:0.
3. .margin-note placeholders: z-index:1.
4. nav: z-index:5.
5. main: z-index:10.
6. inline heading annotation SVGs: z-index:11.
7. the h1 red correction line: z-index:12.
8. footer: z-index:20.
9. .sr-only utility: z-index:100, but it remains 1px by 1px and visually hidden.

The .page element is position:relative; min-height:100dvh; isolation:isolate. All positioned annotation SVG elements are children of their associated .marked section, not of body. Each .marked section is position:relative and must not create a stacking context. Each annotation overlay’s parent section can receive z-index:11 only if it is also position:relative; the SVG itself must remain z-index:11. Header, main, and footer must never overlap at desktop.

D. TOKEN TABLE

Define every recurring size and color in :root. Do not replace these decisions with inline repeated values:

--bone: #F4F1EA
--ink: #1A1815
--ink-soft: #4A463F
--pencil: #B0A99E
--red-pencil: #C2452D
--paper-line: rgba(26,24,21,0.10)
--paper-rule: rgba(176,169,158,0.34)
--focus: #C2452D
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
--page-gutter: 72px
--content-max: 1120px
--measure: 68ch
--nav-height: 76px
--footer-height: 72px
--header-space: 52px
--hero-space: 68px
--section-gap: 28px
--section-rule: 1px
--annotation-x-inset: 9px
--annotation-y-inset: 8px
--annotation-x-expand: 18px
--annotation-y-expand: 16px
--annotation-stroke: 2px
--annotation-rotation: -0.5deg
--dash-array: 6 4
--dash-length: 240
--draw-duration: 640ms
--dot-duration: 200ms
--dot-stagger: 40ms
--strike-duration: 320ms
--strike-period: 6000ms
--ease-draw: cubic-bezier(0.16,1,0.3,1)
--ease-strike: cubic-bezier(0.2,0.8,0.2,1)
--radius-pill: 999px
--radius-card: 2px
--button-height: 44px
--button-padding-x: 20px
--focus-ring: 2px
--focus-offset: 3px
--desktop-line: 0.72
--small-line: 0.82
--body-size: 15px
--small-size: 11px
--micro-size: 10px
--nav-size: 12px
--hero-size: clamp(56px,5.2vw,92px)
--h2-size: clamp(24px,2.2vw,34px)
--testimonial-size: clamp(20px,1.8vw,27px)

E. THE COMPOSITION

The nav uses height:var(--nav-height), padding:0 var(--page-gutter), display:grid, grid-template-columns:1fr auto 1fr, align-items:center. The left link contains the wordmark "MARGINALIA / 01". The center navigation contains two links, "How it works" and "Field notes". The right action is an anchor button with exact copy "Start marking". On widths through 760px, the center navigation is display:none; the grid remains 1fr auto and the right action remains visible.

The header sits directly below nav with padding:52px 72px 0. Its left edge matches the main column. Place a 10px uppercase eyebrow with exact copy "RESEARCH CAPTURE / BETA". Under it, place the only h1 with exact copy "Keep the useful part." The h1 uses font-size:var(--hero-size), line-height:0.96, font-weight:500, letter-spacing:-0.055em, max-width:68ch, and color:var(--ink). The phrase "useful" must be wrapped in span#useful-word. Beneath the h1, place a 2-column grid with grid-template-columns:minmax(0,68ch) 180px, column-gap:48px, align-items:end. The left paragraph exact copy is "Marginalia turns research into a marked-up record. Capture the line, add the reason, and return later to the thought that changed your work." The right meta block uses exact copy "NO / LOGIN REQUIRED" and "BUILT FOR / CLOSE READING". The paragraph is font-size:15px, line-height:1.7, max-width:68ch.

Main contains a workflow region with padding:52px 72px 0. Its top rule is 1px solid var(--paper-rule). Use a 3-row single-column grid, gap:20px, and each row is min-height:82px. Each marked row contains a numbered mono label and an h2. Exact row copy is:

01 / CAPTURE
"Mark the sentence, not the screen."

02 / INTERRUPT
"Add the objection while it is sharp."

03 / RETURN
"Leave a trail your future self can follow."

Only every third heading is wrapped by an SVG overlay. Therefore annotate row 03 only: the heading "Leave a trail your future self can follow." gets the standard bracket overlay. Rows 01 and 02 remain unmarked, creating a deliberate cadence rather than making every heading decorative.

The main also contains a 2-column evidence band with margin-top:38px, padding-top:22px, border-top:1px solid var(--paper-rule), and grid-template-columns:minmax(0,1.7fr) minmax(220px,0.8fr), gap:54px. The left block is a blockquote with exact copy: “The best notes are not transcripts. They are arguments with the source.” The attribution below is "ANIKA SEN / INDEPENDENT RESEARCHER". The right block uses exact copy "01 SOURCE / 02 REASON / 03 CONSEQUENCE" with 13px line-height:1.75 and color var(--ink-soft). This is text, not a card.

The footer uses height:72px, padding:0 72px, display:grid, grid-template-columns:1fr auto 1fr, align-items:center, border-top:1px solid var(--paper-rule). Left copy is "MARGINALIA / RESEARCH TOOL". Center link exact copy is "hello@marginalia.work". Right copy is "© 2025 / BETA 01". The center and right items are right-aligned. The footer is real and visible; it is not a fixed overlay.

F. THE UI LANGUAGE

Primary button and all action links use height:44px, min-width:132px, padding:0 20px, border:1px solid var(--ink), border-radius:999px, background:linear-gradient(135deg, #1A1815 0%, #1A1815 72%, #302C27 100%), color:#F4F1EA, font:500 12px/1 var(--font-mono), letter-spacing:0.02em, display:inline-flex, align-items:center, justify-content:center, gap:10px, cursor:pointer, transition:transform 180ms var(--ease-draw), background 180ms ease, color 180ms ease. Add a 6px by 6px red-pencil dot using a pseudo-element. On hover, transform:translateY(-2px), background:linear-gradient(135deg, #C2452D 0%, #A93825 100%), and the dot changes to #F4F1EA. On active, transform:translateY(0) scale(0.98). On focus-visible, outline:2px solid var(--focus), outline-offset:3px.

Secondary text links have no button fill, no underline, and color:var(--ink). Their hover state changes color to var(--red-pencil). Focus-visible receives the same ring. The nav center links use 12px uppercase mono text with 24px gap. Do not add hover animation to body text or headings.

G. MOTION

Use CSS custom-property delays on annotation SVGs. The stroke keyframes are bracket-draw: from stroke-dashoffset:240 to 0 over 640ms. The dot keyframes are bracket-dot: 0% opacity:0; transform:scale(0); 100% opacity:1; transform:scale(1). The correction keyframes are correction-strike: 0% transform:scaleX(0); 5.33% transform:scaleX(1); 100% transform:scaleX(1), with animation-duration:6000ms. At animation iteration boundary, the next iteration begins at 0. The red line is the only looping animation.

Stagger table:

- header eyebrow: fade-up, 0ms delay, 420ms.
- h1: fade-up, 80ms delay, 620ms.
- hero paragraph and meta: fade-up, 180ms delay, 520ms.
- workflow row 01: fade-up, 240ms delay, 460ms.
- workflow row 02: fade-up, 300ms delay, 460ms.
- workflow row 03 text: fade-up, 360ms delay, 460ms.
- workflow row 03 annotation path: bracket-draw, IntersectionObserver activation, 640ms.
- workflow row 03 corner dot 1: bracket-dot, activation +360ms, 200ms.
- workflow row 03 corner dot 2: bracket-dot, activation +400ms, 200ms.
- workflow row 03 corner dot 3: bracket-dot, activation +440ms, 200ms.
- workflow row 03 corner dot 4: bracket-dot, activation +480ms, 200ms.
- workflow row 03 midpoint dot 1: bracket-dot, activation +520ms, 200ms.
- workflow row 03 midpoint dot 2: bracket-dot, activation +560ms, 200ms.
- workflow row 03 midpoint dot 3: bracket-dot, activation +600ms, 200ms.
- workflow row 03 midpoint dot 4: bracket-dot, activation +640ms, 200ms.
- evidence block: fade-up, 520ms delay, 520ms.
- footer: fade-in, 620ms delay, 420ms.

Use opacity and transform only for non-SVG text motion. Define .reveal with opacity:0, transform:translateY(14px), and .reveal.is-visible with opacity:1, transform:translateY(0). The final resting state of all text is opacity:1, not opacity:0. Do not animate SVG x, y, width, or height in rAF.

IntersectionObserver uses threshold:0.2 and rootMargin:"0px 0px 0px 0px". It adds .is-visible to .reveal elements and .is-drawn to annotation SVG elements. An annotation is drawn once. Disconnect each observed element after activation. If IntersectionObserver is unavailable, add the active classes synchronously after first paint.

H. RESPONSIVE TABLE

Desktop, minimum width:901px: --page-gutter:72px; --nav-height:76px; --footer-height:72px; --header-space:52px; --hero-space:68px; --section-gap:28px; body overflow:hidden; html, body, .page height:100dvh; nav, header, main, footer use the 72px horizontal gutter; content max-width:1120px; the workflow has 3 rows; annotation overlays remain 18px wider and 16px taller than their target.

Tablet, 901px through 1199px: --page-gutter:48px; --nav-height:68px; --footer-height:64px; --header-space:38px; --hero-space:48px; --hero-size:clamp(52px,6.4vw,72px); body overflow:hidden; nav, header, main, footer use 48px gutters; evidence gap:36px; annotation rotation remains -0.5deg.

Small, 601px through 900px: --page-gutter:32px; --nav-height:64px; --footer-height:auto; --header-space:32px; --hero-space:40px; --section-gap:24px; body overflow-y:auto; .page min-height:100dvh and height:auto; nav, header, main, footer use 32px gutters; header’s 2-column hero grid becomes one column; evidence band becomes one column with gap:24px; workflow rows use min-height:96px; margin notes remain in viewport edges at 12px.

Phone, 390px through 600px: --page-gutter:20px; --nav-height:60px; --footer-height:auto; --header-space:24px; --hero-space:34px; --hero-size:clamp(42px,12vw,58px); --h2-size:25px; --body-size:14px; --small-size:10px; body overflow-y:auto; nav padding:0 20px; nav center links display:none; header, main, footer padding-left:20px and padding-right:20px; nav wordmark is 10px; primary button is 40px high and min-width:112px; hero meta moves below the paragraph with 16px gap; workflow grid uses 1fr; row number occupies 72px; row h2 max-width:calc(100vw - 112px); evidence block uses 1fr; footer uses 1fr auto and places copyright on a second line; .margin-note--one is 7px from the left, and .margin-note--two is 7px from the right.

Short-height breakpoint, max-height:760px and min-width:901px: --header-space:28px; --hero-space:28px; --section-gap:14px; --nav-height:64px; --footer-height:56px; workflow row min-height:58px; evidence margin-top:20px; footer line remains 1px.

Short-height mobile breakpoint, max-height:700px and max-width:900px: --header-space:20px; --hero-space:26px; --section-gap:16px; workflow row min-height:76px; evidence margin-top:22px. These two max-height rules must not disable scroll.

At every breakpoint, clamp annotation SVG widths to calc(100vw - 32px) on small screens and keep its left coordinate at or above 8px. Never allow the annotation SVG to create horizontal scroll.

I. FAILURE GUARDS

All content has a resting opacity of 1. If JavaScript does not run, remove the .js class from html and the reveal selectors must default to visible; initialize reveal styles only after the first successful script setup. All annotation paths begin fully drawn only if their class is never added? No: the visual resting state must be readable, so SVG path default stroke-dashoffset:0 and dot default opacity:1. When JavaScript is active and the annotation has not been observed, add .is-armed, which sets stroke-dashoffset:240 and dot opacity:0 with transform:scale(0). On activation, .is-drawn restores the final state. The red correction default is visible at scaleX:1 and only becomes animated after the two-rAF fallback has completed.

Use a two-rAF fallback before animation: requestAnimationFrame(() => requestAnimationFrame(() => { document.documentElement.classList.add("motion-ready"); syncAllAnnotations(); setReady(); })). If the second frame does not execute within 1200ms, a setTimeout fallback marks all reveal elements visible, marks all annotations drawn, marks motion-ready, and sets ready:true. This fallback is cleared after either path completes.

Under prefers-reduced-motion:reduce, html, body, and every component must be static and readable. Disable reveal transforms, SVG stroke drawing, dot scaling, and the correction loop. Set .reveal to opacity:1 and transform:none; set annotation path stroke-dashoffset:0; set every dot opacity:1 and transform:scale(1); set the correction to scaleX(1). Do not start the rAF loop. Mark all annotation overlays visible immediately and set ready:true after first paint.

J. THE EXACT JS

Use one inline script after the closing footer. Create this exact telemetry object first:

window.__DEMO__ = { name: 'bracket', ready: false, frames: 0, effects: [], errors: [] };

Register window error and unhandledrejection listeners. Each error handler pushes the string form of event.reason or event.message into window.__DEMO__.errors, without console output. Register a resize listener only when ResizeObserver is unavailable; otherwise observe every .marked and the .page shell. Cache all elements once in arrays: reveals, annotations, annotationPaths, annotationDots, strike, and strikeWord. Cache document.documentElement and document.body references.

Define measureAnnotation(annotation) with these operations: read annotation.dataset.target, resolve that target, read target.getBoundingClientRect(), read page.getBoundingClientRect() once, compute left as target.left - page.left - 9, top as target.top - page.top - 8, width as target.width + 18, height as target.height + 16, clamp left to 8 and width to the page clientWidth minus left minus 8, then assign annotation.style.transform and annotation.style.width and annotation.style.height. Set the SVG viewBox, preserveAspectRatio, path, and circles in the HTML; JS only positions the overlay. The path must use pathLength="240" and style stroke-dasharray:6 4, stroke-dashoffset:240 when armed.

Define syncStrike once: read usefulWord.getBoundingClientRect(), read h1.getBoundingClientRect(), cache strikeLeft, strikeTop, and strikeWidth, then set strike.style.transformOrigin="left center". The first measurement is outside rAF and is repeated only on resize and ResizeObserver delivery. The rAF loop never reads layout.

The rAF callback is function frame(now) { if (document.hidden) { rafId = 0; return; } window.__DEMO__.frames += 1; const phase = ((now - startedAt) % 6000) / 6000; const progress = phase < 0.0533333333 ? phase / 0.0533333333 : 1; strike.style.setProperty("--strike-progress", String(progress)); rafId = requestAnimationFrame(frame); }. It writes only the cached strike custom property and increments telemetry. Do not toggle classes or measure anything in this callback. Start it only after motion-ready and only when !prefersReduce. On visibilitychange, cancel the current rAF when hidden and restart it with a fresh startedAt when visible. Push each initialized effect name exactly once into effects as "box-draw", "corner-dots", and "red-correction".

After first paint, set ready:true, begin the rAF loop, and disconnect the 1200ms fallback. All event handlers use passive listeners where applicable. The script must contain no console calls, no throw statements, no async dependencies, and no external module imports.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Cadence

- Slug: `cadence`
- Page: https://landingpageprompts.com/prompts/cadence
- Effect: A metronome pendulum sweeping a tick-marked arc while a hairline beat grid pulses and concentric rings burst from the pivot on every beat
- Model: `xiaomi/mimo-v2.6-pro` (Xiaomi MiMo v2.6 Pro (xiaomi/mimo-v2.6-pro)) on cmd-code
- Build tokens: 31,903; total with repair and cross-check: 56,105
- Verification: 20/20 automated checks passed
- Independent cross-check: confirmed (confidence high)
- Acceptance criteria:
  - the document contains exactly one h1 built from exactly two .line > .line-inner masked lines with the visible copy 'Every surface' and 'on the beat.', semantic header, nav, main and footer landmarks, exactly 4 nav links, and exactly 3 footer stat items
  - canvas#stage paints non-blank pixel content that changes across frames at 1440x900 (the pendulum sweeps), and the script never calls ctx.filter, ctx.shadowBlur or getBoundingClientRect inside the animation loop
  - window.__DEMO__ is initialized with name 'cadence', ready becomes true after the first painted frame, frames increments once per requestAnimationFrame tick (>= 20 per 1.2s at 1440x900), effects contains metronome-arc, beat-grid, pivot-rings, beat-meter and film-grain, and errors stays empty in the happy path
  - the meter shows '96.0' and 'BPM' in tabular monospace with exactly 4 .beat-seg bars whose .on class rotates once per 625ms and a .beat-num cycling 1-4, matching the 1.25s pendulum sweep drawn on the canvas
  - no horizontal overflow at 390px, 768px, 1440px or 1920px; at >= 901px body has overflow:hidden and .page height is 100dvh; a prefers-reduced-motion: reduce block paints exactly one static frame and leaves every text element at opacity 1
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
## A. WHAT IS BEING BUILT

One complete, valid index.html — single-viewport cinematic landing page for **Cadence**, a live-music tech company locking stage lighting, LED walls and cameras to a band's live tempo. Document title: "Cadence — Every Surface on the Beat". html lang="en". ONE file: plain HTML + one style block + one vanilla script at end of body. No build step, no framework, no bundler.

**Viewport rule:** at width >= 901px the page is exactly one frame: html, body { height:100%; overflow:hidden } and .page { height:100dvh; overflow:hidden }. NO SCROLL on desktop. At width <= 900px it may scroll vertically. No horizontal overflow at 390, 768, 1440, 1920.

**Do NOT build:** no video, mp4/webm/gif, remote images, base64 photo blobs, third-party CDN URLs, WebGL, Three.js, GSAP, Lottie, jQuery, Tailwind, React, audio, forms, pricing, testimonials, blog, cookie banner, scroll indicator, modals, waveform galleries, nothing beyond header / hero / meter / stats footer, desktop hamburger (burger <= 900px only). Google Fonts is the ONLY network request.

**The single visual idea:** a black rehearsal room, one machine — a room-sized metronome. A weighted rod sweeps a smooth arc from a pivot near the top of frame, ticking at each extreme. Behind it a hairline beat grid pulses per beat and concentric rings emit from the pivot (heavier downbeat). Bottom-right: a monospace BPM readout (96.0 BPM, 4/4) with a four-bar beat meter. Nearly monochrome — graphite, bone white — one warm accent (#ff8a3d) for the beat only: rings, measure lines, active meter bar, pivot core.

**Beat clock (one clock, all of it obeys):** BPM = 96. BEAT = 60/96 = 0.625 s. BAR (4/4) = 2.5 s. Pendulum sweep T = 2 beats = 1.25 s. Beats fire at the swing extremes (tick at the ends); the downbeat is the right extreme.

---

## B. THE BACKDROP — the metronome stage (counts, gradient stops, blur radii, drift periods)

One fixed .backdrop (inset:0; overflow:hidden; pointer-events:none; z-index:0) holds:

1. **.bg** (z 0): radial-gradient(circle at 50% 7.5%, rgba(255,138,61,0.13) 0%, rgba(255,138,61,0.05) 26%, transparent 52%); linear-gradient(180deg, #0a0a0b 0%, #101013 44%, #0c0c0e 74%, #08080a 100%).
2. **.glow** (z 1) pivot halo: left:50%; top:7.5%; 720x720px; translate(-50%,-50%); radial-gradient(circle, rgba(255,170,96,0.22) 0%, rgba(255,138,61,0.09) 34%, transparent 68%); filter:blur(44px); opacity:0.8; animation glow-breathe 11s ease-in-out infinite (opacity 0.62 <-> 0.92, scale 1 <-> 1.06).
3. **canvas#stage** (z 2) fixed inset:0; width:100%; height:100%. Repainted EVERY frame, never static; draws back to front: beat grid, pivot rings, pendulum.
4. **.scrim** (z 3) fixed inset:0: linear-gradient(180deg, rgba(8,8,10,0.58) 0%, rgba(8,8,10,0.10) 26%, rgba(8,8,10,0.52) 64%, rgba(8,8,10,0.90) 100%) — also fades the grid hairlines at top and bottom.
5. **.grain** (z 30) fixed inset:-50%; 200%x200%; opacity:0.05; SVG feTurbulence data-URI (fractalNoise, baseFrequency 0.8, numOctaves 2, stitchTiles, then saturate 0), tile 160px; animation grain 0.9s steps(4) infinite, translating among (0,0) (-2%,1%) (1%,-2%) (-1%,2%).

**Geometry (canvas 2D, no libraries).** Cached { w, h } read once per resize. Pivot P = (w * 0.5, h * 0.075; h * 0.06 at <=900). Rod L = h * 0.52 (>=1600) / h * 0.50 (1280-1599) / h * 0.48 (901-1279) / h * 0.44 (max-height 850) / h * 0.38 (max-height 720) / min(h * 0.34, 300px) (<=900) / min(h * 0.28, 220px) (<=560). Weight 44x64px default; 48x70 (>=1600), 52x76 (>=1920), 38x54 (max-height 850), 32x46 (max-height 720), 34x50 (<=900), 28x40 (<=560). Amplitude A = 26deg (24deg <=900, 22deg at max-height 720). theta(t) = A * cos(2 * PI * t / 1.25); at t = 0.625 * k the angle is exactly +/- A — the beat tick.

**1. Beat grid:** hairlines x_i = i * PITCH, i = 0..ceil(w/PITCH). PITCH = 30 (>=1600) / 26 (1280-1599) / 22 (901-1279) / 18 (<=900) / 14 (<=560) px — 56 lines at 1440x900. Weak lines (i % 8 !== 0): rgba(226,226,222, a_i), 1px. Measure lines (i % 8 === 0; 7 at 1440x900): rgba(255,138,61, a_i * 0.85), 1.4px. Full height (.scrim fades the ends). Alpha:
  - p = (t / 0.625) mod 1; beatEnv = exp(-5.2 * p) (1.000 at the tick, 0.006 at the next).
  - shimmer = 0.05 * (0.5 + 0.5 * sin(i * 0.45 - t * 1.7)).
  - a_i = 0.045 + 0.22 * beatEnv + shimmer + (i % 8 === 0 ? 0.10 : 0).
  Batch into 6 alpha buckets, ONE beginPath() per bucket — 6 draw calls for 56 lines.

**2. Pivot rings:** 4 pre-allocated slots (NO allocation in the loop), slot beatIndex % 4; on each beat boundary store born = t, down = (beatIndex % 4 === 0). Age a = t - born <= 1.6s: r = 14 + 300 * a px (494px at death); stroke rgba(255,138,61, 0.30 * pow(1 - a / 1.6, 1.7) * (down ? 1.4 : 1)); lineWidth = down ? 2 : 1.2. Housing circle at P: r = 22px, rgba(226,226,222,0.14), 1px.

**3. Pendulum:** pivot cap: filled r=7px #0a0a0b, 1.5px rgba(226,226,222,0.55) ring, accent core dot r=2.5px rgba(255,138,61,0.95). Rod: 3px line (2px <=900) P -> tip at L, rgba(232,232,228,0.92), round caps. Weight: rounded rect centred at 0.70 L, rotated with the rod — fill #d9d9d5, 1px rgba(255,138,61,0.55) stroke, radius 5px, one 1px rgba(10,10,11,0.5) groove. Tip cap r=5px rgba(255,138,61,0.9). Trail: 4 ghost rods at t - 0.024 / 0.048 / 0.072 / 0.096 s, 2px, alphas 0.07 / 0.05 / 0.035 / 0.02. Scale arc: 11 ticks -A..+A (step 5.2deg), radius L*1.02 -> L*1.06, 1px rgba(226,226,222,0.22), extremes rgba(255,138,61,0.55); hairline arc at L*1.02 across 52deg, rgba(226,226,222,0.12).

**Resolution trick:** dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = cssW * dpr; canvas.height = cssH * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0). getBoundingClientRect only inside resizeCanvas(). Resize: one boolean resizeQueued + requestAnimationFrame.

**Per-frame cost budget (1440x900):** 1 clearRect + 6 batched grid paths (56 strokes) + 3 ring arcs + 5 rods + 11 ticks + 1 arc + 5 fills = 12 draw calls. ZERO ctx.filter / ctx.shadowBlur anywhere, ZERO DOM writes. Under 2 ms/frame; >= 20 frames per 1.2s headless. document.hidden: keep loop and counter, skip the paint.

**Drift periods (non-harmonic on purpose):** pendulum 1.25s, beat 0.625s, bar 2.5s, glow-breathe 11s, grain 0.9s.

---

## C. THE LAYER STACK (back -> front, z-index)

1. html, body — #0a0a0b, forced twice (Failure Guards).
2. .backdrop — z 0, fixed inset:0, pointer-events:none, overflow:hidden. Inside: .bg 0, .glow 1, canvas#stage 2, .scrim 3, .grain 30.
3. .page — z 40; position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:100dvh (height:100dvh inside the desktop lock).
4. main.hero — z 50.
5. header.site-header, footer.stats-footer — z 60.
6. .menu (mobile, open) — fixed inset:0, z 80.

---

## D. TOKEN TABLE (defaults at 1440x900)

```
--bg:            #0a0a0b
--bg-2:          #101013
--text:          #f2f2f0
--text-soft:     #d6d6d2
--muted:         #9a9a96
--dim:           #6a6a66
--accent:        #ff8a3d
--accent-hot:    #ffc38a
--accent-soft:   rgba(255,138,61,0.55)
--accent-line:   rgba(255,138,61,0.32)
--grid-line:     rgba(226,226,222,0.22)
--border:        rgba(242,242,240,0.14)
--border-soft:   rgba(242,242,240,0.08)
--focus:         #ffc38a
--sans:          "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
--mono:          "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
--logo:          16px
--logo-track:    0.20em
--nav:           13.5px
--nav-h:         38px
--btn:           13.5px
--btn-h:         44px
--chip-h:        30px
--eyebrow:       11.5px
--h1:            76px
--lead:          18px
--bpm:           64px
--bpm-unit:      13px
--meter-label:   11px
--meter-h:       26px
--stat-val:      26px
--stat-label:    12px
--header-y:      26px
--header-x:      44px
--hero-x:        44px
--hero-bottom:   56px
--copy-max:      700px
--meter-w:       300px
--radius-pill:   999px
--radius-sm:     5px
--focus-w:       2px
--focus-offset:  3px
--grain-op:      0.05
--glow-blur:     44px
--ease-out:      cubic-bezier(0.16,1,0.3,1)
--enter-dur:     0.95s
```

Fonts: Google Fonts ONLY — Inter 400;500;600, JetBrains Mono 400;500 — one preconnect to https://fonts.gstatic.com (crossorigin) + one stylesheet link with display=swap, fallbacks as above. BPM digits use font-variant-numeric: tabular-nums.

---

## E. THE COMPOSITION — exact build order

**.page** holds <header class="site-header">, <main class="hero">, <footer class="stats-footer"> in grid rows auto / 1fr / auto.

**HEADER** — display:flex; align-items:center; justify-content:space-between; gap:24px; padding:var(--header-y) var(--header-x).

- a.brand (href "#", accessible name "Cadence home"): inline SVG mark 22x22 — metronome glyph <path d="M11 2.5 L19 19.5 L3 19.5 Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/> plus rod <path d="M11 17 L15.4 7.2" stroke="#ff8a3d" stroke-width="1.6" stroke-linecap="round"/> — then "CADENCE" (var(--sans), var(--logo), weight 600, letter-spacing var(--logo-track), color var(--text)) and a 6px square .beat-dot (background var(--accent); radius 1px; margin-left:10px), opacity written per beat by JS (1 -> 0.25).
- nav, exactly 4 links — "Engine", "Rigs", "Pricing", "Docs" — href "#", var(--sans), var(--nav), weight 500, color var(--muted), flex; gap:30px; height:var(--nav-h). Hover: color var(--text), 0.18s.
- a.cta (href "#", "Get the SDK"): height var(--btn-h); padding 0 20px; inline-flex; radius var(--radius-pill); var(--btn) weight 600; color var(--accent-hot); border 1px solid var(--accent-line); background linear-gradient(180deg, rgba(255,138,61,0.16) 0%, rgba(255,138,61,0.05) 100%).

**MAIN (hero, bottom-anchored)** — display:flex; align-items:flex-end; justify-content:space-between; gap:48px; padding:0 var(--hero-x) var(--hero-bottom). Left .hero-copy (max-width:var(--copy-max); flex column; align-items:flex-start); right aside.meter (width:var(--meter-w); flex:0 0 auto). Copy hugs the LEFT padding.

1. .chip (a <p>, not interactive): height var(--chip-h); padding 0 14px; inline-flex; align-items:center; radius var(--radius-pill); border 1px solid var(--border); background rgba(255,138,61,0.06); var(--mono) at var(--eyebrow), letter-spacing 0.18em, uppercase, color var(--accent). Copy: "LIVE TEMPO SYNC ENGINE".
2. h1 — EXACTLY ONE <h1>, var(--sans), weight 600, var(--h1), line-height 0.98, letter-spacing -0.045em, color var(--text), margin: 20px 0 0. Two masked lines (Motion): "Every surface" / "on the beat." with <em>beat</em> in var(--mono), font-style normal, weight 500, font-size 0.94em, letter-spacing -0.03em, color var(--accent-hot).
3. .lead — var(--sans), var(--lead), line-height 1.55, letter-spacing -0.012em, color var(--text-soft), max-width 560px, margin: 22px 0 0. Copy: "Cadence locks lighting, LED walls and cameras to the band's live tempo — one shared clock, drifting less than a quarter of a millisecond across a three-hour set."
4. .actions — flex; gap:12px; flex-wrap:wrap; margin-top:30px. .btn--primary "#" "Book a demo"; .btn--ghost "#" "Explore the engine".

**aside.meter (BPM instrument panel, bottom-right)** — flex column; gap:14px; padding:20px 22px; border:1px solid var(--border-soft); radius:var(--radius-sm); background rgba(10,10,11,0.42).

- .meter-top — flex; justify-content:space-between; align-items:baseline: <span class="meter-label">TEMPO</span> left, "4 / 4" right (var(--mono), var(--meter-label), letter-spacing 0.22em, color var(--dim)).
- .bpm-line — flex; align-items:baseline; gap:8px: <span class="bpm-val">96.0</span> (var(--mono), weight 500, var(--bpm), letter-spacing -0.04em, tabular-nums, color var(--text)) + <span class="bpm-unit">BPM</span> (var(--mono), var(--bpm-unit), letter-spacing 0.16em, color var(--dim)).
- .beat-row — flex; align-items:flex-end; gap:8px. Exactly 4 <span class="beat-seg"> bars: flex:1; height:var(--meter-h); radius:2px; background var(--accent-line); transform-origin:50% 100%; transform:scaleY(0.22); opacity:0.28; transition transform/opacity 220ms var(--ease-out). .on: background var(--accent); transform:scaleY(1); opacity:1. Then <span class="beat-count">BEAT <span class="beat-num">1</span> / 4</span> (var(--mono), var(--meter-label), letter-spacing 0.16em, color var(--dim), margin-left:6px).

**FOOTER (three-item stats)** — display:grid; grid-template-columns:repeat(3, 1fr); padding: 22px var(--header-x) 28px; border-top:1px solid var(--border-soft). Exactly one <ul>, three <li>. Each li: display:grid; gap:6px; padding:0 30px; first-child padding-left:0; last-child padding-right:0; li + li border-left:1px solid var(--border-soft); 2nd centred, 3rd right. Each li: <strong class="stat-val"> (var(--mono), var(--stat-val), weight 500, letter-spacing -0.02em, color var(--text)) + <span class="stat-label"> (var(--mono), var(--stat-label), letter-spacing 0.14em, uppercase, color var(--dim)). Pairs: "0.24 ms" / "peak drift over 3 h"; "64" / "DMX universes driven"; "3 h 12 m" / "longest locked set".

---

## F. THE UI LANGUAGE

- **.btn base:** inline-flex; centred; height var(--btn-h); padding 0 22px; radius var(--radius-pill); var(--sans) var(--btn) weight 600; letter-spacing 0.01em; no underline; relative; overflow:hidden; transition transform/border-color/background/color/box-shadow 220ms var(--ease-out).
- **.btn--primary:** color #1c0d02; border 1px solid rgba(255,195,138,0.65); background linear-gradient(180deg, #ffc38a 0%, #ff8a3d 52%, #d96a1e 100%); box-shadow 0 14px 44px rgba(255,138,61,0.20), inset 0 1px 0 rgba(255,255,255,0.55). Hover: background linear-gradient(180deg, #ffd7ae 0%, #ff9a52 48%, #e67526 100%), translateY(-1px), box-shadow 0 18px 54px rgba(255,138,61,0.30).
- **.btn--ghost:** color var(--text-soft); border 1px solid var(--border); background rgba(242,242,240,0.035). Hover: color var(--text), border-color var(--accent-line), background rgba(255,138,61,0.08), translateY(-1px).
- **Tick glint** on .btn and .cta: content ""; absolute; inset:-1px; background linear-gradient(112deg, transparent 0% 36%, rgba(255,195,138,0.20) 50%, transparent 64% 100%); translateX(-140%); transition 680ms var(--ease-out); hover -> translateX(140%).
- **.cta** = .btn base at padding 0 20px with section E's hairline look; hover: border-color var(--accent-soft), background linear-gradient(180deg, rgba(255,138,61,0.24) 0%, rgba(255,138,61,0.08) 100%), box-shadow 0 0 20px rgba(255,138,61,0.18).
- **Nav links** plain, no pills/underline; hover var(--text). **.chip** and **aside.meter** never react — readouts.
- **Focus:** a/button :focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); border-radius: var(--radius-pill) }. ::selection { background: rgba(255,138,61,0.30); color: #140903 }. No default blue ring, no underline anywhere.

---

## G. MOTION — entrance stagger and named keyframes

Entrance animations: duration var(--enter-dur); fill-mode both; timing var(--ease-out); delay var(--d, 0.08s); each element .appear + one modifier + inline --d (resting state = final state).

Stagger table (element -> modifier = class .appear--X -> --d):
```
brand          fade    0.08s
nav 1          fade    0.16s
nav 2          fade    0.24s
nav 3          fade    0.32s
nav 4          fade    0.40s
header cta     chip    0.48s
eyebrow chip   pop     0.60s
h1 line 1      mask    0.74s
h1 line 2      mask    0.90s
lead           soft    1.08s
primary btn    chip    1.22s
ghost btn      chip    1.30s
meter panel    meter   1.42s   (duration 1.1s)
stat 1         stat    1.54s
stat 2         stat    1.62s
stat 3         stat    1.70s
```

Entrance keyframes (end at opacity 1 / identity):
```
in-fade   opacity 0 -> 1
in-soft   opacity 0, translateY(14px), blur(4px) -> 1, none, blur(0)
in-mask   opacity 0, translateY(108%) -> 1, none
in-chip   opacity 0, translateY(10px) scale(0.96) -> 1, none
in-pop    0% 0 scale(0.94) / 68% 1 scale(1.03) / 100% 1, none
in-meter  opacity 0, translateY(16px) scaleY(0.9), origin 50% 100% -> 1, none
in-stat   opacity 0, translateY(12px) -> 1, none
```

Continuous keyframes: glow-breathe 11s ease-in-out infinite — 0%,100% { opacity: 0.62; transform: translate(-50%,-50%) scale(1) }, 50% { opacity: 0.92; transform: translate(-50%,-50%) scale(1.06) }; grain 0.9s steps(4) infinite (offsets per B.5).

H1 masking: .line { display:block; overflow:hidden; padding: 0.06em 0.06em 0.12em } > .line-inner { display:inline-block } carrying .appear--mask — type rising from a hard edge.

Musical periods (pendulum 1.25s, grid 0.625s, rings 1.6s, meter 220ms) obey the ONE JS clock of section J — never CSS — so nothing drifts; glow-breathe (11s) and grain (0.9s) alone are CSS, non-harmonic.

---

## H. RESPONSIVE TABLE — exact token overrides per breakpoint

```
>= 1600px:
  --h1: 90px  --bpm: 74px  --lead: 19px  --logo: 17px  --nav: 14px  --nav-h: 40px
  --btn: 14px  --btn-h: 46px  --stat-val: 30px  --meter-w: 340px  --meter-h: 30px
  --header-y: 30px  --header-x: 56px  --hero-x: 56px  --hero-bottom: 64px  --copy-max: 800px

>= 1920px:
  --h1: 104px  --bpm: 84px  --lead: 20px  --stat-val: 34px  --stat-label: 12.5px
  --header-x: 72px  --hero-x: 72px  --hero-bottom: 72px  --copy-max: 880px  --meter-w: 380px

1280px – 1599px:
  --h1: 72px  --bpm: 60px  --copy-max: 660px  --meter-w: 280px

901px – 1279px:
  --h1: 56px  --bpm: 52px  --lead: 16px  --stat-val: 24px  --nav: 12.5px  --btn: 12.5px
  --header-x: 30px  --hero-x: 30px  --hero-bottom: 44px  --copy-max: 560px  --meter-w: 250px

>= 901px AND max-height 850px:
  --h1: 54px  --bpm: 48px  --lead: 16px  --stat-val: 22px  --chip-h: 28px  --meter-h: 22px
  --header-y: 18px  --hero-bottom: 36px  (h1 margin-top 14px, lead 16px, actions 22px)

>= 901px AND max-height 720px:
  --h1: 44px  --bpm: 42px  --lead: 15px  --eyebrow: 11px  --stat-val: 20px  --stat-label: 11px
  --chip-h: 26px  --btn-h: 38px  --meter-h: 18px  --header-y: 14px  --hero-bottom: 26px
  (footer padding 14px top, 18px bottom)

>= 901px (desktop lock, all heights):
  html, body { height:100%; overflow:hidden }  .page { height:100dvh; overflow:hidden }

<= 900px:
  no viewport lock; vertical scroll; nav + CTA move into a burger menu:
  - header keeps .brand + <button class="burger" aria-label="Open navigation" aria-expanded="false">, three 18x1.5px bars, var(--text), gap 5px
  - .menu { position:fixed; inset:0; z-index:80; background: rgba(10,10,11,0.94); backdrop-filter: blur(14px); flex column; align-items:flex-start; justify-content:center; padding: 0 32px; gap: 26px; transform: translateY(-100%); transition: transform 0.45s var(--ease-out) }  .menu.open { transform: none }
  - menu: the 4 nav links at 22px + the .cta chip; Escape, link click, resize > 900px close it
  - main.hero stacks: flex-direction:column; gap:32px; aside.meter { width:100% }
  --h1: 46px  --bpm: 54px  --lead: 16px  --stat-val: 22px  --meter-w: 100%  --meter-h: 24px
  --header-x: 24px  --hero-x: 24px  --hero-bottom: 40px  --copy-max: 100%

<= 560px:
  --h1: 36px  --bpm: 46px  --lead: 15px  --eyebrow: 11px  --stat-val: 19px  --stat-label: 10.5px
  --header-x: 20px  --hero-x: 20px  --hero-bottom: 32px  --meter-h: 20px
  stats footer stacks: grid-template-columns:1fr; li { padding: 12px 0; text-align:left !important }; li + li { border-left:0; border-top:1px solid var(--border-soft) }
  .actions { width:100% }  .btn { flex: 1 1 100% }
  (canvas L, PITCH, weight and A per section B)
```

---

## I. FAILURE GUARDS — the page is never blank, never broken

1. **Black-first:** the FIRST CSS rule is html, body { background:#0a0a0b !important; color:#f2f2f0 }; body carries style="background:#0a0a0b;color:#f2f2f0"; a later rule restates html, body { background:#0a0a0b; background: var(--bg, #0a0a0b) }.
2. **Resting opacity is 1:** every .appear element's un-animated style is its final state (opacity 1, no transform, no filter); keyframes own the FROM states; fill-mode:both holds them only during delay. Broken CSS or missing JS leaves the page complete.
3. **Two-rAF entrance fallback:** after two nested requestAnimationFrame callbacks, per .appear run el.getAnimations({ subtree:false }); if none reports playState "running"/"finished", add .is-in to ALL .appear. No getAnimations: sweep unconditionally after the two rAFs. .is-in forces animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important.
4. **Canvas fallback:** missing canvas or getContext("2d") -> .no-canvas on <html>, push "canvas-unavailable" into errors, static stage on .backdrop::after: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 26px) grid; two 1px rgba(255,138,61,0.30) circles (border-radius:50%, 220px and 380px, centred at 50% 7.5%) as frozen rings; one static 3px bone-white rod rotated 14deg from P. Type, meter, footer stay visible.
5. **Reduced motion:** @media (prefers-reduced-motion: reduce): *, *::before, *::after { transition:none !important; animation:none !important }, .appear/.is-in forced to opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important. Canvas paints ONE frozen frame at t = 0.22s (theta = 14.3deg, beatEnv 0.32, static ring arcs aged 0.22 / 0.85 / 1.48s, meter bar 1 .on, 2-4 off, .beat-num "1"), then no further rAF: ready = true, frames = 1. .glow rests opacity 0.8 scale 1; .grain display:none. Nothing moves.
6. **Contrast floor:** h1/bpm-val #f2f2f0 on #0a0a0b, lead #d6d6d2 over the scrim, labels #6a6a66 11px uppercase above 4.5:1; text opacity never below 0.86.
7. **Zero console output:** no console calls, no throws, every DOM and canvas call guarded.

---

## J. THE EXACT JS (only this, vanilla, one IIFE at end of body)

1. **Telemetry first:** window.__DEMO__ = { name: 'cadence', ready: false, frames: 0, effects: [], errors: [] }; push once, in order: 'metronome-arc', 'beat-grid', 'pivot-rings', 'beat-meter', 'film-grain'; then window.addEventListener('error', function (e) { window.__DEMO__.errors.push(String(e.message || e)); }).
2. **Clock constants:** BPM = 96, BEAT = 0.625, T_SWING = 1.25, A = 26 (deg), RING_R0 = 14, RING_V = 300, RING_LIFE = 1.6. theta(t), beatEnv, a_i exactly as section B; beatIndex = Math.floor(t / BEAT); p = t / BEAT - beatIndex; beatInBar = beatIndex % 4.
3. **Canvas stage loop:** cache documentElement, canvas#stage, the 2D context (null -> .no-canvas path, push "canvas-unavailable"), cached { w, h } + geometry from resizeCanvas(), and 4 pre-allocated ring slots { born, down } (born = -10). drawStage(t): clearRect; beat grid via B.1 batching; on a NEW beatIndex (vs lastBeat) write slot lastBeat % 4 = { born: t, down: beatInBar === 0 } and move the meter DOM (4 .on moves, .beat-num textContent = String(beatInBar + 1), .beat-dot style.opacity = '1'); rings by B.2; rods, weight, caps, 11-tick arc by B.3. Each rAF tick increments window.__DEMO__.frames by exactly 1 then paints; FIRST completed paint sets ready = true. NEVER ctx.filter, ctx.shadowBlur, getBoundingClientRect in the loop; zero DOM reads beyond cached handles. document.hidden: skip paint, keep loop and counter.
4. **Resize:** resizeCanvas() reads canvas.getBoundingClientRect() ONCE (the only permitted call), recomputes { w, h } + geometry, dpr = Math.min(window.devicePixelRatio || 1, 2), canvas.width = w * dpr, canvas.height = h * dpr, ctx.setTransform(dpr, 0, 0, dpr, 0, 0), repaints. One boolean resizeQueued + requestAnimationFrame — no timers.
5. **Entrance fallback:** Guard 3's two nested rAFs + getAnimations .is-in sweep.
6. **Mobile menu (<= 900px):** burger toggles .menu.open + aria-expanded; Escape, link click, resize > 900px close.
7. **prefers-reduced-motion:** matchMedia('(prefers-reduced-motion: reduce)') once; if matched: drawStage(0.22) once (Guard 5), meter beat 1, ready on that paint, frames = 1, no further rAF.

No other JS. No libraries. No timers. No console calls.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Camber

- Slug: `camber`
- Page: https://landingpageprompts.com/prompts/camber
- Effect: Two colliding typographic planes sweep with a moving gilt specular while a restrained paper field rotates behind them.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 42,702; total with repair and cross-check: 92,121
- Verification: 19/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - At 1440x900, the document has one h1, one header, one main, one footer, and one nav; document.documentElement.scrollHeight is no greater than document.documentElement.clientHeight, and document.documentElement.scrollWidth is no greater than document.documentElement.clientWidth.
  - The h1 contains the exact visible strings “Holdings,” and “held in balance.”, the second line uses a 100deg linear-gradient with the gilt stop at 50%, and the rendered second line has a negative top overlap relative to the first line.
  - window.__DEMO__ exists with name “camber”, ready is true after 1200ms, frames increases by at least 20 over a 1200ms measurement window, effects contains “specular-sweep”, and errors has length 0 after load.
  - At 390x844, 768x1024, 1440x900, and 1920x1080, document.documentElement.scrollWidth is no greater than document.documentElement.clientWidth; the primary control and all three navigation links have non-empty accessible names.
  - With prefers-reduced-motion set to reduce, the orbit animation is absent, the second headline line is visible, the navigation rule is visible at full opacity, and the page remains readable without horizontal overflow.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT

Build one self-contained, single-file landing page for Ledger & Vane, a private bank serving families with inherited holdings. The page is titled “Ledger & Vane — Private Banking for Inherited Holdings”. Set the HTML language to lang="en", include a UTF-8 charset, and include the responsive viewport declaration width=device-width, initial-scale=1. The document must use semantic header, nav, main, section, and footer elements.

At viewport widths of 901px and wider, html, body, and the .page shell must be exactly 100dvh high, body must use overflow:hidden, and the layout must not scroll. At widths of 900px and narrower, use the normal document flow, retain overflow-x:hidden, and allow vertical scrolling. The desktop composition must remain visible inside 100dvh at 1440x900 and 1920x1080. Do not create a second page, route, modal, card carousel, dashboard, account login, onboarding sequence, or multi-step application.

Use exactly one h1. Its accessible text must read “Holdings, held in balance.” The h1 must contain two span.line elements: the first reads “Holdings,” and the second reads “held in balance.” Do not create additional h1 elements in the header, footer, hidden templates, or fallback markup.

Do NOT build:
- A centred hero, centred navigation, centred balance column, or centred footer.
- A conventional card grid, floating glass panels, gradient blobs, neon glow, glassmorphism, or a generic fintech dashboard.
- A video, image, GIF, icon font, third-party icon package, Lottie animation, WebGL scene, framework, bundler, build tool, or external media.
- More than the specified two typographic headline planes.
- A second CTA, “Book a demo” control, hamburger menu, cookie panel, chat widget, newsletter form, account portal, or decorative control.
- A horizontal page scrollbar, viewport-scaled body text, simulated cursor movement, scroll hijacking, pointer-following elements, or layout measurement inside the animation frame.
- Any visible text not explicitly specified in section E.
- Any animation that changes layout dimensions, top, left, right, bottom, width, height, filter, box-shadow, or colour during the rAF loop.

The only permitted network request is an optional Google Fonts stylesheet for Inter and Manrope. Use font-display:swap through the Google Fonts request. The CSS fallback stack must be Inter, “Helvetica Neue”, Helvetica, Arial, sans-serif for all text. If the request fails or is offline, the system fallback must render the complete page without reflow that causes horizontal overflow.

B. THE BACKDROP

Create three backdrop layers inside a fixed .backdrop element with position:fixed, inset:0, z-index:0, pointer-events:none, and overflow:hidden.

Layer one is a solid #EFEDE8 field. Layer two is one .orbit element, centred at 50% 50%, with width:82vmax, height:82vmax, border-radius:50%, opacity:0.08, mix-blend-mode:multiply, and transform-origin:50% 50%. Its background must be conic-gradient(from 22deg at 50% 50%, #0B0C0E 0deg, rgba(11,12,14,0) 46deg, #8A8F98 92deg, rgba(11,12,14,0) 164deg, #0B0C0E 224deg, rgba(11,12,14,0) 304deg, #0B0C0E 360deg). Animate orbit from rotate(0deg) to rotate(360deg) over 36000ms linear infinite. This is exactly one degree per second. Do not scale this layer.

Layer three is one canvas#grain with CSS width:100%, height:100%, opacity:0.17, and mix-blend-mode:multiply. Generate a 96x96 procedural paper tile on an OffscreenCanvas when available; otherwise use a detached HTMLCanvasElement. Draw 1,152 fixed marks from a seeded PRNG: 72% use rgba(11,12,14,0.035), 20% use rgba(138,143,152,0.030), and 8% use rgba(11,12,14,0.018). Each mark is a 1px horizontal or vertical line with length from 1px to 3px. Do not use ctx.filter, ctx.shadowBlur, globalCompositeOperation changes, gradients, or image smoothing. The canvas export is 96x96. The displayed CSS layer stretches that 96x96 export across the viewport, which is the canvas resolution trick: one low-resolution source avoids a full-screen backing store while preserving a paper-grain texture.

For a second, wider grain response, create a second 96x96 tile with the same 1,152-mark recipe and a different deterministic seed. Maintain exactly two tile objects in JavaScript. The rAF loop alternates tiles every 1400ms, applies integer translation offsets from the fixed sequence 0,0; 7,5; 13,2; 19,8; 25,4; 31,10; 37,6; 43,11, then repeats. Reset the index to zero after 37,11. Draw the active tile twice per axis at offsets -96, 0 and 0, 96 so translation never reveals an uncovered edge. Clear with setTransform(1,0,0,1,0,0), fill the 192x192 working canvas with rgba(239,237,232,0), and draw four tile copies. Do not scale the context.

The canvas backing store is exactly 192x192, independent of viewport size. Do not multiply by devicePixelRatio. Set the canvas element’s intrinsic width and height attributes to 192. The paper background and all typography remain fully readable if canvas rendering is blocked.

The CSS .grain-sheen element is optional only if it uses opacity and transform. If present, make it position:absolute, inset:-12%, background:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.34), rgba(255,255,255,0) 42%), and animate translate3d(-1.5%, 0.8%, 0) to translate3d(1.5%, -0.8%, 0) over 18000ms ease-in-out infinite alternate. It must not use blur, blend mode, or a filter.

The combined per-frame cost budget is: zero DOM reads, zero getBoundingClientRect calls, zero computed-style reads, zero canvas allocation, zero gradient creation, zero text measurement, one 192x192 clearRect, and at most four 96x96 drawImage calls only when the 1400ms grain interval expires. On other rAF ticks, perform only the telemetry frame increment. CSS animations run on the compositor. At 1440x900, this design must sustain at least 20 rAF frames per 1.2 seconds and target 55 or more frames per 1.2 seconds on the reference headless browser.

C. THE LAYER STACK

Build the visual stack back to front with these exact z-index values:

- body background: the default stacking context, colour #EFEDE8.
- .backdrop: position:fixed, z-index:0.
- .orbit: z-index:1 within .backdrop.
- canvas#grain: z-index:2 within .backdrop.
- .grain-sheen: z-index:3 within .backdrop, if used.
- .page: position:relative, z-index:10.
- header.site-header: z-index:30.
- nav.site-nav: position:relative, z-index:31.
- .nav-rule: z-index:32.
- main#main: z-index:20.
- section.hero: z-index:20.
- .eyebrow: z-index:21.
- h1#camber-title: z-index:22.
- .balance-rail: z-index:23.
- .hero-actions: z-index:24.
- .proof-line: z-index:25.
- footer.site-footer: z-index:40.

The headline must physically sit above the rotating conic field. Do not apply mix-blend-mode to either headline line. Only .orbit may use mix-blend-mode:multiply. The canvas may also use mix-blend-mode:multiply, but it must remain behind .page.

D. TOKEN TABLE

Define every recurring size, colour, spacing, font, line-height, duration, and easing value in :root. Use these exact tokens:

--paper: #EFEDE8;
--ink: #0B0C0E;
--graphite: #8A8F98;
--gilt: #C9A227;
--white: #FFFFFF;
--line: rgba(11,12,14,0.18);
--muted-line: rgba(11,12,14,0.10);
--focus: #8A6D0B;
--font-sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
--gutter: 64px;
--header-top: 28px;
--header-bottom: 24px;
--nav-height: 44px;
--hero-top: 24px;
--hero-bottom: 30px;
--footer-top: 22px;
--footer-bottom: 24px;
--nav-rule: 1px;
--type-display: clamp(72px, 11vw, 168px);
--display-leading: 0.82;
--display-overlap: -0.14em;
--display-weight: 700;
--display-tracking: -0.065em;
--body-size: 15px;
--body-leading: 1.5;
--label-size: 11px;
--label-leading: 1.2;
--label-tracking: 0.16em;
--balance-width: 240px;
--headline-max: 1180px;
--button-height: 46px;
--button-padding-x: 22px;
--button-radius: 999px;
--header-rule-duration: 900ms;
--header-rule-delay: 500ms;
--line-one-duration: 500ms;
--line-one-delay: 0ms;
--line-two-duration: 700ms;
--line-two-delay: 150ms;
--sweep-duration: 9000ms;
--ease-rise: cubic-bezier(.25,.1,.25,1);
--ease-ui: cubic-bezier(.2,.8,.2,1);
--orbit-duration: 36000ms;
--grain-interval: 1400ms;
--motion-distance: 24px;
--mobile-gutter: 20px;
--tablet-gutter: 36px;
--narrow-desktop-gutter: 48px;
--short-heading-size: 86px;
--short-balance-width: 190px;
--short-footer-top: 14px;
--short-footer-bottom: 14px;

Use box-sizing:border-box on html, body, and every descendant. Set body margin:0, min-width:320px, overflow-x:hidden, background:var(--paper), color:var(--ink), font-family:var(--font-sans), font-size:var(--body-size), line-height:var(--body-leading), text-rendering:optimizeLegibility, and -webkit-font-smoothing:antialiased. Set button and a font:inherit.

E. THE COMPOSITION

The .page element is a CSS grid with grid-template-rows:96px minmax(0,1fr) 72px, width:100%, height:100dvh, padding:0 var(--gutter), and overflow:hidden at widths above 900px.

Build the header first. header.site-header is display:grid, grid-template-columns:minmax(220px,1fr) auto, align-items:center, height:96px, padding:var(--header-top) 0 var(--header-bottom), border-bottom:var(--nav-rule) solid transparent, and position:relative. Place the wordmark link at grid-column:1 and the navigation at grid-column:2. The wordmark exact copy is “LEDGER & VANE”. It must be an anchor with href="#main", aria-label="Ledger & Vane home", color:var(--ink), font-size:13px, font-weight:800, letter-spacing:0.18em, text-decoration:none, and white-space:nowrap.

nav.site-nav must use display:flex, align-items:center, gap:28px, height:var(--nav-height), margin:0, padding:0. It contains exactly three visible links in this order: “Our approach” with href="#approach”, “Stewardship” with href="#stewardship”, and “Contact” with href="#contact”. Each link uses color:var(--ink), font-size:12px, font-weight:600, letter-spacing:0.02em, text-decoration:none. The links must not be buttons styled as pills. Add a 1px vertical divider using border-left:1px solid var(--muted-line) to the “Contact” link and padding-left:28px. The nav-rule is a separate .nav-rule element positioned at the bottom of the header: left:0, right:0, bottom:0, height:var(--nav-rule), background:var(--ink), transform:scaleX(0), transform-origin:left center. It must animate to scaleX(1) over 900ms with a 500ms delay.

Build main#main as the second grid row, min-height:0, position:relative, display:grid, place-items:stretch. section.hero is the only child, position:relative, display:grid, grid-template-columns:minmax(0,1fr) var(--balance-width), grid-template-rows:1fr auto auto, column-gap:44px, row-gap:18px, padding:var(--hero-top) 0 var(--hero-bottom), min-height:0, overflow:hidden.

Place .eyebrow in row 1, column 1, align-self:start, margin:0. Its exact copy is “PRIVATE BANKING / FAMILY CAPITAL / EST. 1998”. Use color:var(--graphite), font-size:var(--label-size), line-height:var(--label-leading), letter-spacing:var(--label-tracking), font-weight:700, text-transform:uppercase.

Place h1#camber-title in row 2, column 1, align-self:end, width:min(100%,var(--headline-max)), margin:0 0 0 calc(var(--gutter) * -0.10), font-size:var(--type-display), line-height:var(--display-leading), font-weight:var(--display-weight), letter-spacing:var(--display-tracking), text-transform:none, white-space:nowrap. The h1 is position:relative. The first .line display:block, color:var(--graphite), transform:translateY(0), opacity:1 at rest. The first line exact copy is “Holdings,”. The second .line display:block, color:var(--ink), margin-top:var(--display-overlap), transform:translateY(0), opacity:1 at rest. The second line exact copy is “held in balance.”. Apply the second-line gradient with background-image:linear-gradient(100deg, #0B0C0E 42%, #C9A227 50%, #0B0C0E 58%), background-size:300% 100%, background-position:0% 0, background-repeat:no-repeat, -webkit-background-clip:text, background-clip:text, -webkit-text-fill-color:transparent, and color:transparent only to .line.two. The gilt must appear only in this moving sweep and in no other visible element. Animate background-position from 0% 0 to 300% 0 over 9s linear infinite. Do not animate the gradient angle.

Place .balance-rail in row 2, column 2, align-self:end, justify-self:end, width:var(--balance-width), padding:0 0 2px, border-top:1px solid var(--ink), color:var(--ink), text-align:right. It must contain a definition-style list with three rows. The exact visible copy is:
“Assets under stewardship”
“$4.8B”
“Across 126 family offices”
“Relationship-led since 1998”
“London · Geneva · Singapore”
Use dl, dt, and dd elements. The dt copy is 10px, uppercase, line-height:1.25, letter-spacing:0.12em, and color:var(--graphite). The dd copy is 12px, line-height:1.4, font-weight:650, and color:var(--ink). The first dd uses font-size:24px, line-height:1.05, letter-spacing:-0.03em, and margin-top:7px. Set list rows to margin:0 0 17px. The last row has margin-bottom:0.

Place .hero-actions in row 3, column 1, display:flex, align-items:center, gap:16px, margin:0, align-self:end. The primary visible control is an anchor with href="#contact", exact copy “Arrange a private conversation”, class .button-primary, and accessible name supplied by its visible text. Place a non-interactive .proof-line after it with exact copy “Independent advice. One accountable relationship.” Use color:var(--graphite), font-size:12px, line-height:1.4, letter-spacing:0.01em.

Do not place any control in .balance-rail. The balance column is informational, right-aligned, and aligned to the same bottom edge as the h1.

Build footer.site-footer as the third grid row, display:grid, grid-template-columns:1fr auto 1fr, align-items:center, height:72px, padding:var(--footer-top) 0 var(--footer-bottom), border-top:1px solid var(--muted-line), color:var(--graphite), font-size:10px, line-height:1.3, letter-spacing:0.10em, text-transform:uppercase. The left footer item is “Ledger & Vane / Private bank”. The centre item is “Stewardship, measured in generations.” and must be text-align:center. The right item is an anchor with href="#legal", exact visible copy “Legal & privacy”, and aria-label “Ledger & Vane legal and privacy information”. The right item must be text-align:right and color:var(--graphite). No footer element may be centred vertically as a page-wide CTA; only the centre footer copy has text-align:center.

F. THE UI LANGUAGE

The primary control is a pill with height:var(--button-height), padding:0 var(--button-padding-x), border:1px solid var(--ink), border-radius:var(--button-radius), display:inline-flex, align-items:center, justify-content:center, color:var(--paper), background:linear-gradient(100deg, #0B0C0E 0%, #0B0C0E 68%, #2A2515 100%), font-size:12px, font-weight:700, letter-spacing:0.02em, text-decoration:none, white-space:nowrap, transition:transform 180ms var(--ease-ui), background 180ms var(--ease-ui), color 180ms var(--ease-ui), box-shadow 180ms var(--ease-ui). Its resting box-shadow is 0 0 0 rgba(201,162,39,0). On hover, transform:translateY(-2px), background:linear-gradient(100deg, #1B1C1F 0%, #0B0C0E 72%, #4A3B0E 100%), color:var(--white), box-shadow:0 6px 0 rgba(11,12,14,0.10). On active, transform:translateY(0) and box-shadow:0 2px 0 rgba(11,12,14,0.10). Do not use a gilt fill behind the button.

Navigation links have no pill and no background. On hover, color:var(--graphite). The wordmark changes from var(--ink) to var(--graphite) on hover without changing position. Footer links use a 1px underline with text-underline-offset:3px on hover.

Every visible link, button, and anchor receives a visible :focus-visible ring using outline:2px solid var(--focus), outline-offset:4px, border-radius:inherit. The ring must remain visible over both paper and ink. Do not remove browser focus outlines.

G. MOTION

All motion begins after the two-rAF startup guard. The initial paint must be readable, with line one opacity:1, line two opacity:1, line two transform:translateY(0), and the nav rule at scaleX(1) as the resting state. The entrance animations are one-shot CSS animations that use opacity and transform only.

The exact stagger is:

- header wordmark: opacity 0 to 1 and translateY(8px) to translateY(0), 500ms, ease-out, delay 80ms.
- nav links: opacity 0 to 1 and translateY(8px) to translateY(0), 500ms, ease-out, delays 120ms, 160ms, 200ms respectively.
- .nav-rule: scaleX(0) to scaleX(1), 900ms, cubic-bezier(.2,.8,.2,1), delay 500ms.
- .eyebrow: opacity 0 to 1 and translateY(12px) to translateY(0), 500ms, ease-out, delay 220ms.
- h1 line one: opacity 0 to 1, 500ms, ease-out, delay 0ms.
- h1 line two: opacity 0 to 1 and translateY(24px) to translateY(0), 700ms, cubic-bezier(.25,.1,.25,1), delay 150ms.
- .balance-rail: opacity 0 to 1 and translateY(16px) to translateY(0), 650ms, cubic-bezier(.25,.1,.25,1), delay 300ms.
- .button-primary: opacity 0 to 1 and translateY(12px) to translateY(0), 500ms, ease-out, delay 420ms.
- .proof-line: opacity 0 to 1, 500ms, ease-out, delay 520ms.
- footer items: opacity 0 to 1, 450ms, ease-out, delays 620ms, 680ms, 740ms respectively.

Use these named keyframes exactly or implement equivalent named animations with identical properties:

@keyframes camber-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes camber-rise-line {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes camber-rise-small {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes camber-rail {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes camber-rule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes camber-sweep {
  from { background-position: 0% 0; }
  to { background-position: 300% 0; }
}

@keyframes camber-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

The h1 line two sweep is the only continuously moving text effect. It must run for 9 seconds, linear, infinite, and must not pause on hover. The conic orbit runs for 36 seconds, linear, infinite. The grain translation changes every 1400ms. No infinite entrance animation may repeat.

H. THE RESPONSIVE TABLE

At the base desktop layout, use --gutter:64px, --type-display:clamp(72px, 11vw, 168px), --balance-width:240px, .page grid rows 96px minmax(0,1fr) 72px, and .hero column-gap:44px.

At 1920x1080 or wider, set --gutter:80px, --headline-max:1320px, --balance-width:280px, --hero-top:30px, --hero-bottom:34px, and .hero column-gap:56px. Keep the headline left anchored and the balance rail right aligned. Do not increase the display type above 168px.

At 1440x900, retain --gutter:64px, --type-display:clamp(72px, 11vw, 168px), --balance-width:240px, and --hero column-gap:44px. The h1 width must not exceed 1180px.

At 1200px and below, set --gutter:var(--narrow-desktop-gutter), --balance-width:210px, and .hero column-gap:28px. Set --type-display:clamp(64px, 10.2vw, 124px). Keep one horizontal hero row until 901px.

At 900px and below, change .page to min-height:100dvh, height:auto, overflow:visible; set body overflow-y:auto; set .page grid-template-rows:auto auto auto; set --gutter:var(--tablet-gutter); set --header-top:24px; set --header-bottom:20px; set header.site-header height:auto; set nav.site-nav gap:18px; set .hero grid-template-columns:1fr; set .hero grid-template-rows:auto auto auto auto; set .hero padding-top:36px; set .hero padding-bottom:36px; set .balance-rail justify-self:start; width:100%; max-width:360px; text-align:left; set h1#camber-title white-space:normal; set --type-display:clamp(58px, 10vw, 96px); set --display-overlap:-0.10em; set h1#camber-title margin-left:0; set .hero-actions flex-wrap:wrap; set footer.site-footer grid-template-columns:1fr 1fr; row-gap:12px; height:auto; padding-top:22px; padding-bottom:22px; set footer centre item text-align:right; set footer right item grid-column:2; set footer centre item grid-column:1; set footer right item grid-row:1; set footer centre item grid-row:2. Do not use horizontal scrolling to preserve the original balance-rail position.

At 600px and below, set --gutter:var(--mobile-gutter); set --header-top:20px; set --header-bottom:18px; set .site-header grid-template-columns:1fr; row-gap:16px; set nav.site-nav justify-content:space-between; width:100%; gap:12px; set nav.site-nav a font-size:11px; set nav.site-nav a:last-child padding-left:12px; set .hero padding-top:30px; set .hero padding-bottom:30px; set .eyebrow max-width:280px; line-height:1.45; set --type-display:clamp(54px, 15.3vw, 86px); set --display-leading:0.84; set --display-overlap:-0.08em; set --display-tracking:-0.06em; set .hero-actions align-items:flex-start; flex-direction:column; gap:12px; set .button-primary width:100%; set .proof-line max-width:260px; set .balance-rail max-width:none; set footer.site-footer font-size:9px; letter-spacing:0.08em; set .grain-sheen inset:-20%.

At 480px and below, set --type-display:clamp(50px, 14.5vw, 70px), set .eyebrow font-size:10px, set .balance-rail dd:first-of-type font-size:22px, and set .button-primary font-size:11px, padding-left:16px, padding-right:16px.

Two short-height desktop guards are mandatory. At min-width:901px and max-height:780px, set --hero-top:12px; set --hero-bottom:14px; set --footer-top:10px; set --footer-bottom:10px; set --display-size:var(--short-heading-size); set --type-display:86px; set --balance-width:var(--short-balance-width); set .hero row-gap:10px; set .hero padding-top:12px; set .hero padding-bottom:14px; set .page grid-template-rows:82px minmax(0,1fr) 52px; set header.site-header height:82px; set footer.site-footer height:52px. At min-width:901px and max-height:620px, set --gutter:48px; set --header-top:14px; set --header-bottom:12px; set --hero-top:8px; set --hero-bottom:8px; set --footer-top:8px; set --footer-bottom:8px; set --type-display:72px; set --balance-width:170px; set .balance-rail dt font-size:9px; set .balance-rail dd font-size:10px; set .balance-rail dd:first-of-type font-size:20px; set .hero row-gap:6px; set .page grid-template-rows:68px minmax(0,1fr) 42px; set header.site-header height:68px; set footer.site-footer height:42px. Short-height rules never apply below 901px.

I. FAILURE GUARDS

Every animated element must declare its resting state first: opacity:1, transform:none for normal rise elements, transform:scaleX(1) for .nav-rule, and transform:translateY(0) for the two headline lines. Animation classes are applied by a .motion-ready class on document.documentElement only after two nested requestAnimationFrame callbacks. If JavaScript is disabled, the page must remain fully readable with all content visible, the rule visible, and the second headline in its final position. The CSS animation fallback is allowed to run from the initial paint only when the JavaScript startup guard is unavailable.

If OffscreenCanvas is unavailable, create a normal canvas with width=192 and height=192. If either 2D context creation fails, remove the canvas from the DOM and keep the paper background, orbit, typography, and all content. If canvas drawing throws, remove the canvas, push the error text into window.__DEMO__.errors, disable the rAF loop after recording the error, and set ready=true. Never show a visible error message.

Implement the two-rAF fallback exactly: call requestAnimationFrame(function firstFrame(){ requestAnimationFrame(function secondFrame(){ document.documentElement.classList.add('motion-ready'); startLoop(); window.__DEMO__.ready = true; }); });. If the first rAF is unavailable, use setTimeout(startAndReady, 32). If the second rAF is unavailable, use setTimeout(startAndReady, 32) from inside the first callback. A delayed start must not prevent the page from being readable.

Create window.__DEMO__ before registering the window error listener and before the startup callbacks. The object must use the exact name, properties, initial types, and spelling specified by the contract. Set ready=true only after the first paint and after the two-rAF guard. The error listener must push String(event.message || 'window error') into errors, prevent duplicate insertion of the same message within 1000ms, and never call console methods.

In @media (prefers-reduced-motion: reduce), set *, *::before, and *::after to animation-duration:0.001ms, animation-iteration-count:1, transition-duration:0.001ms, scroll-behavior:auto, and transform:none where a transform is not required for layout. Set .orbit animation:none; set .line.two background-position:50% 0; set canvas#grain opacity:0.11; set the rAF loop to increment frames but do not redraw grain. Keep the rAF loop active for telemetry, with no work other than frames increment. All content must be visible and static.

J. THE EXACT JS

Place this script at the end of body as plain JavaScript. It must not use imports, modules, external libraries, console output, async functions, storage, cookies, service workers, or network requests.

const demo = {
  name: 'camber',
  ready: false,
  frames: 0,
  effects: [],
  errors: []
};
window.__DEMO__ = demo;
demo.effects.push('line-one-fade', 'line-two-rise', 'specular-sweep', 'nav-rule-scale', 'conic-orbit', 'paper-grain-drift');

const errorTimes = new Map();
window.addEventListener('error', function (event) {
  const message = String(event && event.message ? event.message : 'window error');
  const now = Date.now();
  const previous = errorTimes.get(message);
  if (typeof previous !== 'number' || now - previous > 1000) {
    demo.errors.push(message);
    errorTimes.set(message, now);
  }
}, { passive: true });

const canvas = document.getElementById('grain');
let context = null;
let tileA = null;
let tileB = null;
let workingSize = 192;
let grainIndex = 0;
let lastGrainSwap = 0;
let reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let stopped = false;

function makeTile(seed) {
  const tile = typeof OffscreenCanvas === 'function' ? new OffscreenCanvas(96, 96) : document.createElement('canvas');
  tile.width = 96;
  tile.height = 96;
  const tileContext = tile.getContext('2d');
  if (!tileContext) return null;
  let state = seed >>> 0;
  const random = function () {
    state = (1664525 * state + 1013904223) >>> 0;
    return state / 4294967296;
  };
  for (let i = 0; i < 1152; i += 1) {
    const x = Math.floor(random() * 96);
    const y = Math.floor(random() * 96);
    const length = 1 + Math.floor(random() * 3);
    const vertical = random() > 0.5;
    tileContext.fillStyle = i % 10 < 7 ? 'rgba(11,12,14,0.035)' : (i % 10 < 9 ? 'rgba(138,143,152,0.030)' : 'rgba(11,12,14,0.018)');
    if (vertical) tileContext.fillRect(x, y, 1, length);
    else tileContext.fillRect(x, y, length, 1);
  }
  return tile;
}

function removeCanvas() {
  stopped = true;
  if (canvas && canvas.parentNode) canvas.parentNode.removeChild(canvas);
}

function drawGrain() {
  if (!context || reducedMotion || !tileA || !tileB) return;
  const offsets = [[0,0],[7,5],[13,2],[19,8],[25,4],[31,10],[37,6],[43,11]];
  const offset = offsets[grainIndex % offsets.length];
  const tile = grainIndex % 2 === 0 ? tileA : tileB;
  context.clearRect(0, 0, workingSize, workingSize);
  context.drawImage(tile, -96 + offset[0], -96 + offset[1]);
  context.drawImage(tile, offset[0], -96 + offset[1]);
  context.drawImage(tile, -96 + offset[0], offset[1]);
  context.drawImage(tile, offset[0], offset[1]);
}

function frame(timestamp) {
  if (stopped) return;
  demo.frames += 1;
  if (!reducedMotion && timestamp - lastGrainSwap >= 1400) {
    lastGrainSwap = timestamp;
    grainIndex = (grainIndex + 1) % 8;
    drawGrain();
  }
  window.requestAnimationFrame(frame);
}

function startAndReady() {
  if (canvas) {
    try {
      context = canvas.getContext('2d');
      tileA = makeTile(1978);
      tileB = makeTile(2025);
      if (!context || !tileA || !tileB) removeCanvas();
    } catch (error) {
      demo.errors.push(String(error && error.message ? error.message : 'canvas setup failed'));
      removeCanvas();
    }
  }
  document.documentElement.classList.add('motion-ready');
  if (!stopped) window.requestAnimationFrame(frame);
  demo.ready = true;
}

if (typeof window.requestAnimationFrame === 'function') {
  window.requestAnimationFrame(function firstFrame() {
    if (typeof window.requestAnimationFrame === 'function') {
      window.requestAnimationFrame(function secondFrame() {
        startAndReady();
      });
    } else {
      window.setTimeout(startAndReady, 32);
    }
  });
} else {
  window.setTimeout(startAndReady, 32);
}


---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Cant

- Slug: `cant`
- Page: https://landingpageprompts.com/prompts/cant
- Effect: A signal-red freight field where clipped-corner geometry, canted tonnage bars, and a left-to-right loading scan turn operational data into one industrial motion system.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 57,801; total with repair and cross-check: 94,431
- Verification: 18/18 automated checks passed
- Independent cross-check: unparsed (confidence low)
- Acceptance criteria:
  - A headless browser at 1440x900 reports document.body.scrollWidth equal to document.documentElement.clientWidth, document.documentElement.scrollHeight equal to 900, and window.__DEMO__.name equal to "cant" with ready true after two animation frames.
  - A headless browser counts exactly one h1, one header, one main, one nav, one footer, 126 .tonnage-bar elements, and zero img, video, canvas, iframe, or external script elements.
  - At 1440x900, every visible rectangular component using the cut treatment has computed border-radius equal to "0px", no computed box-shadow, and a clip-path beginning with the specified 14px chamfer polygon.
  - The CTA has an accessible name, the route-desk link has an accessible name, both anchors are keyboard focusable with a visible :focus-visible outline, and the reduced-motion media query leaves the h1, CTA, manifest, and footer readable with computed opacity 1.
  - The performance check observes at least 20 telemetry.frames increments during a 1.2 second headless interval at 1440x900, with window.__DEMO__.errors.length equal to 0 and no getBoundingClientRect or getComputedStyle calls in the source.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT

Build one complete, framework-free landing page for Ferrolane, a freight forwarder operating rail and short-sea legs across Northern Europe. The page is a single-screen desktop logistics manifesto and route-manifest viewer, not a scrolling marketing site. Use semantic HTML, plain CSS, and plain JavaScript in one index.html. Set the document title to “Ferrolane — Northern Europe, on the cant” and set the document language to en. The visual thesis is “the cant”: one 14px diagonal chamfer appears on the top-right and bottom-left corners of every rectangular surface, turning a standard logistics interface into a forward-leaning industrial system.

The HTML viewport rule is width=device-width, initial-scale=1. The root is 100dvh. At 901px width and wider, html and body must be exactly 100dvh with overflow:hidden; the main region must fit without internal scrolling. At 900px width and below, the document may scroll vertically, but it must never scroll horizontally. Support 390x844, 768x1024, 1440x900, and 1920x1080. Use one Google Fonts request only, loading Archivo at weights 500, 600, and 700, with the fallback stack Arial, Helvetica, sans-serif. If the font request fails or is blocked, the page must remain correct.

Do NOT build a video, animated GIF, image element, remote asset, base64 asset, SVG illustration, WebGL scene, 3D chart, map, globe, loader screen, cookie panel, authentication form, dashboard sidebar, multi-page navigation, modal, carousel, horizontal scroller, parallax image, stock photograph, or second primary CTA. Do NOT use React, Tailwind, GSAP, Three.js, Lottie, a framework, bundler, build step, icon CDN, analytics service, or any network request other than Google Fonts. Do NOT add border-radius. Do not add box-shadow, text-shadow, drop-shadow, gradients inside text, or decorative pills. Do not use opacity below 0.72 for required text. Do not use JavaScript layout reads, getBoundingClientRect, getComputedStyle, scroll listeners, interval timers, or Web Animations API. Do not make manifest rows keyboard controls unless they perform a real navigation. Do not include more than one h1.

B. THE BACKDROP

The entire viewport is one flat #E03127 signal-red field. There is one body pseudo-element backdrop. It uses a fixed linear gradient from #E03127 at 0% to #E03127 at 100%; the identical stops prevent an unintended visual gradient. Its size is 100% 100%, its position is fixed at inset:0, its z-index is 0, and it has pointer-events:none. Add one fixed 2px vertical near-black registration line at x=48px from top to bottom using a body::after pseudo-element with opacity:0.18. Do not add a second decorative background layer.

Create 126 bar elements in one chart field: 9 visual columns multiplied by 14 vertical positions. Each bar is an empty div with class “tonnage-bar”. The chart uses CSS Grid with 9 equal columns and 14 equal rows. The 126 heights are not random and are not derived at runtime from viewport dimensions. Hard-set every bar using the exact 14-row value array below, repeated in the listed order for each of 9 columns:

Column 1: 34, 46, 58, 42, 66, 52, 74, 61, 78, 69, 83, 72, 88, 76.
Column 2: 38, 50, 62, 47, 71, 56, 79, 66, 84, 73, 87, 76, 91, 81.
Column 3: 42, 55, 65, 51, 74, 60, 82, 70, 87, 77, 90, 80, 94, 84.
Column 4: 46, 59, 68, 55, 77, 64, 85, 73, 89, 80, 92, 83, 96, 87.
Column 5: 50, 63, 71, 59, 80, 68, 88, 77, 91, 83, 95, 86, 98, 90.
Column 6: 54, 66, 74, 63, 82, 72, 90, 80, 93, 86, 97, 89, 100, 93.
Column 7: 58, 70, 77, 67, 85, 76, 93, 84, 95, 89, 99, 92, 100, 96.
Column 8: 62, 73, 80, 71, 87, 79, 95, 87, 97, 92, 100, 95, 100, 98.
Column 9: 66, 77, 84, 75, 90, 83, 98, 91, 99, 95, 100, 98, 100, 100.

Render each value as a percentage height inside a fixed chart cell. The bars use #E03127 as their own fill against the same red field and are separated only by 1px rgba(0,0,0,0.18) inset strokes. Their base cell has the global cut polygon. Each bar is rotated 8deg around its bottom center and skewed -6deg on the X axis, preserving the leaning direction of the cut. The chart occupies the lower two-thirds and extends 72px beyond the right viewport edge; clip the chart wrapper, not the page.

Canvas count is zero. Therefore there is no canvas element, no canvas resolution trick, no getContext call, no ctx.filter, no ctx.shadowBlur, and no per-item canvas compositing. The 126 bars must be transformed by the compositor. A representative 1440x900 performance budget is no more than 1.42 milliseconds of scripting per animation frame, no more than 3.2 milliseconds of style recalculation per frame during the 3.8-second entrance sequence, and no layout-triggering property changes. The post-entrance rAF loop performs only a numeric counter increment and an effect array lookup. Transform and opacity are the only animated CSS properties.

Use three decorative data rules behind the foreground copy. One rule extends from x=0 to 100%, sits at y=67%, and is 1px rgba(0,0,0,0.18). One rule sits at x=48px and spans 38% of viewport height. One rule sits at x=calc(50vw + 12px) and spans 64% of viewport height. Their drift periods are 0 seconds because they remain static. The only continuous background movement is a 7.4-second opacity drift on a 180px soft radial highlight centered at 78% 28%, ranging from opacity:0.035 to opacity:0.07; the highlight never changes position and never resembles a second subject.

C. THE LAYER STACK

Use this back-to-front z-index stack exactly:

z-index:0: body and the fixed flat red backdrop.
z-index:1: the two vertical registration rules and one horizontal data rule in .atmosphere.
z-index:2: .header, the clipped 64px navigation bar.
z-index:3: .manifest, the clipped 3-column route table.
z-index:4: .hero, including eyebrow, h1, deck, CTA, service status, and 9x14 bar field.
z-index:5: the one-time 90-degree white clip sweep.
z-index:6: .footer and its clipped 1px footer rule.
z-index:10: the focus-visible outline layer, created by native :focus-visible with position:relative and z-index:10; never remove it.

The header, manifest, hero, and footer are siblings inside a positioned .stage. The bar field is contained by .chart-window with overflow:hidden. Do not rely on source order to create overlap: set every listed z-index explicitly.

D. TOKEN TABLE

Define these exact custom properties on :root and consume them rather than introducing undocumented sizes:

--red: #E03127;
--ink: #0E0E0E;
--white: #FFFFFF;
--cool: #B9C4CB;
--rule: rgba(0,0,0,0.18);
--paper-line: rgba(255,255,255,0.64);
--field-x: 48px;
--field-y-top: 32px;
--grid-gap: 24px;
--grid-columns: repeat(12,minmax(0,1fr));
--cut: 14px;
--cut-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
--stroke: 1px;
--header-h: 64px;
--footer-h: 44px;
--type-display: clamp(54px,6.2vw,118px);
--type-title: 17px;
--type-body: 14px;
--type-label: 11px;
--type-data: 12px;
--line-tight: 0.88;
--line-title: 1.15;
--line-body: 1.35;
--weight-medium: 500;
--weight-bold: 700;
--letter-label: 0.12em;
--letter-display: -0.055em;
--ease-cant: cubic-bezier(.2,.8,.2,1);
--duration-bars: 520ms;
--duration-sweep: 900ms;
--duration-row: 140ms;
--bar-stagger: 26ms;
--bar-rotation: 8deg;
--bar-shear: -6deg;
--chart-bleed: 72px;
--focus-ring: #FFFFFF;
--focus-offset: 4px;
--status-green: #FFFFFF;
--reduced-duration: 1ms.

All values in the implementation must come from these tokens or from a declared component rule. Do not use a token for border-radius because every computed border-radius must be 0.

E. THE COMPOSITION

The body uses padding:0. The .stage is position:relative; width:100%; height:100dvh; min-height:680px; overflow:hidden; background:#E03127; color:#0E0E0E; font-family:Archivo,Arial,Helvetica,sans-serif.

The header is a semantic nav inside header.header. It is 64px high and starts at top:0 with left:0; width:100%. It has 48px left padding, 48px right padding, border-bottom:var(--stroke) solid var(--rule), and the exact --cut-path. Inside it, use a 12-column grid with 24px gutters. The brand occupies columns 1 through 3, the route statement columns 5 through 9, and the contact link columns 11 through 12. The brand text is “FERROLANE” in 17px, 700 weight, line-height:1, letter-spacing:-0.025em. The route statement is “RAIL / SHORT SEA / NORTHERN EUROPE” in 11px, 600 weight, letter-spacing:0.12em. The contact link is “ROUTE DESK ↗” in 12px, 700 weight and is right aligned. All three are real visible text; the contact link is an anchor with href="mailto:routes@ferrolane.example" and accessible name “Email the Ferrolane route desk”. The nav has aria-label="Primary navigation”.

The main element is .hero and is positioned absolute with top:96px; left:48px; right:48px; bottom:76px. Use a 12-column grid with 24px gutters, grid-template-rows:112px 1fr 92px, and align-items:start. Place .eyebrow at grid-column:1 / 5; grid-row:1. Place the h1 at grid-column:1 / 10; grid-row:2; align-self:start. Place .hero-copy at grid-column:1 / 5; grid-row:3. Place .chart-window at grid-column:5 / 13; grid-row:2 / 4; margin-top:22px; margin-right:-72px. Place .manifest at grid-column:10 / 13; grid-row:1 / 3; align-self:start; margin-top:20px.

The eyebrow exact copy is “WEEK 29 / NORTH SEA CORRIDOR”. It is 11px, 700 weight, line-height:1, letter-spacing:0.12em, and includes a 32px white horizontal line after the text. Use a 7px square, not a circle, as the status marker. The h1 exact copy is “MOVE HEAVY. / KEEP LEANING.” It uses var(--type-display), weight 700, line-height:0.88, letter-spacing:-0.055em, and max-width:980px. It is the only h1. The hero copy exact copy is “Scheduled rail and short-sea capacity from Malmö to the North Sea ports. One operating window. 11,840 tonnes committed.” It is 14px, weight 500, line-height:1.35, max-width:360px. The CTA is an anchor with href="mailto:routes@ferrolane.example?subject=Capacity%20request" and exact copy “REQUEST CAPACITY ↗”. It is the page’s only inverted white CTA and has an accessible name “Request Ferrolane capacity”. A small status block below it reads “NEXT DEPARTURE / 04 SEP / 06:40” in 11px, 600 weight, letter-spacing:0.12em.

The .chart-window is 100% width, 100% height, position:relative, overflow:hidden, and has the exact --cut-path. It has a 1px solid rgba(0,0,0,0.18) stroke through an inset box-shadow? Shadows are forbidden, so use border:var(--stroke) solid var(--rule) and then apply the cut. Inside, .bars is a 9-column by 14-row grid with 1px gaps, width:100%, height:100%, padding:18px, transform-origin:bottom left. Each .bar-cell is a div with position:relative; min-width:0; min-height:0; overflow:hidden; border:var(--stroke) solid var(--rule); and the exact --cut-path. Each .tonnage-bar is position:absolute; inset:auto 0 0; width:100%; height:var(--bar-height); background:#E03127; border-top:var(--stroke) solid rgba(255,255,255,0.64); transform-origin:bottom center; transform:rotate(8deg) skewX(-6deg) scaleY(0). Do not use shadows.

The .manifest is a real section with aria-labelledby="manifest-title". It has a 1px border, the exact cut path, background:transparent, and padding:18px 18px 16px. Its heading is “LIVE MANIFEST” in 11px, 700 weight, letter-spacing:0.12em, and is not an h2 because the document has one h1; use a p with id="manifest-title". The three exact route rows are “MALMÖ → HELSINGBORG”, “GOTHENBURG → OSLO”, and “AARHUS → ESBJERG”. Each row is a 3-column CSS grid: 1fr 74px 58px, 13px row gap, and 16px vertical padding. The route name is 12px, 700 weight. The departure is 11px in --cool. The load is 12px, 700 weight, right aligned. The exact data strings are “04 SEP / 06:40” with “84%”; “05 SEP / 11:15” with “72%”; and “06 SEP / 07:05” with “91%”. Add a 1px rule between rows. The final footer line in the manifest reads “UPDATED 04:12 UTC” in 10px, 600 weight, letter-spacing:0.08em.

The footer is a semantic footer fixed at bottom:0; left:0; right:0; height:44px. It uses --cut-path, border-top:var(--stroke) solid var(--rule), 48px horizontal padding, and a 12-column grid. The left copy in columns 1 through 5 is “FERROLANE FREIGHT FORWARDING / 55.6050° N, 12.9940° E”. The right copy in columns 10 through 12 is “NORTH SEA / 2025”. Use 10px, 600 weight, letter-spacing:0.1em. The page must contain no text that overflows the 12-column grid at 1440px or 1920px.

F. THE UI LANGUAGE

Every rectangular surface with a visible boundary uses the exact --cut-path. This includes header, manifest, chart window, CTA, footer, bar cells, and the footer rule container. Every border-radius declaration is 0. No box-shadow or text-shadow is allowed anywhere. Separation is limited to 1px rgba(0,0,0,0.18) borders and 1px rgba(255,255,255,0.64) bar top rules.

The CTA is a solid #FFFFFF block with #0E0E0E type, no border, 152px minimum width and 42px height, padding:0 18px, display:inline-flex, align-items:center, justify-content:space-between, font-size:12px, font-weight:700, letter-spacing:0.08em, and the exact cut path. Its default background is #FFFFFF. Its hover background is #B9C4CB. Its hover transform is translate(2px,-2px). Its active transform is translate(0,0). The navigation and manifest hover states do not use color inversion; they use a red inset block sliding from left to right, because the CTA is the one inverted control.

Every visible anchor and button must have a visible :focus-visible ring using outline:3px solid var(--focus-ring); outline-offset:var(--focus-offset); border-radius:0. The focus ring is not clipped by an ancestor with overflow:hidden; if a parent must clip visuals, reserve 8px around focusable content. The manifest rows are not links or buttons, so they must not receive a false control treatment.

G. MOTION

Entrance motion is CSS-only for the visual elements. JavaScript only creates the hard-set bar heights and starts the reveal class. The bar sequence uses the following stagger table:

.eyebrow: opacity 0 to 1 and translateY(10px) to translateY(0), duration 420ms, ease var(--ease-cant), delay 80ms.
h1: opacity 0 to 1 and translateY(18px) to translateY(0), duration 620ms, ease var(--ease-cant), delay 140ms.
.hero-copy: opacity 0 to 1 and translateX(-12px) to translateX(0), duration 480ms, ease var(--ease-cant), delay 260ms.
CTA: opacity 0 to 1 and translateY(8px) to translateY(0), duration 420ms, ease var(--ease-cant), delay 360ms.
.manifest: opacity 0 to 1 and translateX(16px) to translateX(0), duration 520ms, ease var(--ease-cant), delay 240ms.
Bar 1: scaleY(0) to scaleY(1), duration 520ms, ease var(--ease-cant), delay 0ms.
Each subsequent bar adds 26ms. Bar 126 therefore begins at 3,250ms and completes at 3,770ms.
.clip-sweep: translateX(-120%) rotate(90deg) to translateX(120%) rotate(90deg), duration 900ms, ease cubic-bezier(.2,.8,.2,1), delay 500ms, iteration-count 1.
Manifest row hover: a ::before block starts at translateX(-100%) opacity:0.18 and ends at translateX(0) opacity:0.18 over 140ms with ease-out.

Name the keyframes exactly “cantBarsGrow”, “cantCopyIn”, “cantSweep”, “cantRowIn”, and “cantDrift”. The .reveal class applies cantCopyIn to non-bars and cantBarsGrow to bars. The sweep has pointer-events:none and is clipped to the stage. The bar transforms must remain composited; never animate width, height, top, left, margin, padding, filter, clip-path, or background-position. The row highlight uses transform and opacity only.

H. THE RESPONSIVE TABLE

At 1440x900, use the desktop tokens exactly: --field-x:48px; --field-y-top:32px; --header-h:64px; --footer-h:44px; --type-display:96px; --type-title:17px; --type-body:14px; --grid-gap:24px. Keep the hero top at 96px, bottom at 76px, and 12 columns. The h1 uses 96px maximum, the chart bleeds 72px, and the manifest is 318px wide.

At 1920x1080, override --field-x:64px; --field-y-top:40px; --header-h:72px; --footer-h:48px; --type-display:118px; --grid-gap:32px. Use top:112px; bottom:80px; left:64px; right:64px. The chart margin-right is 96px and the manifest is 360px wide. The grid remains 12 columns, 32px gutters, and zero optical centring.

At 768x1024, switch the page to scrollable document flow. Override --field-x:28px; --field-y-top:20px; --header-h:60px; --footer-h:42px; --type-display:64px; --type-body:13px; --grid-gap:18px. Set body overflow-x:hidden and body overflow-y:auto. Set .stage min-height:1280px and height:auto. Set .header position:relative. Set .hero position:relative; inset:auto; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:auto auto auto 420px; row-gap:24px; margin:0 28px. Put eyebrow in columns 1 / 7, h1 in columns 1 / 9, copy in columns 1 / 5, CTA in columns 1 / 5, and chart-window in columns 2 / 9. Put manifest in columns 1 / 9 below the chart, with a fixed height of 246px. Footer remains relative after the main.

At 390x844, override --field-x:18px; --field-y-top:16px; --header-h:58px; --footer-h:40px; --type-display:46px; --type-title:14px; --type-body:12px; --type-label:10px; --grid-gap:12px. Use 4 columns in the header and 4 columns in the hero. The header hides the route statement visually with display:none and retains the brand in columns 1 / 3 and the route desk link in columns 3 / 5. The hero uses row-gap:18px and a minimum height of 1460px. The h1 spans all 4 columns. The copy and CTA span all 4 columns. The chart-window spans all 4 columns, is 390px high, and has margin-right:-18px. The manifest follows the chart, uses padding:14px, and has a height of 270px. Route rows use grid-template-columns:1fr 68px 48px. The footer uses two rows of 20px and does not overlap the chart.

Add a max-height:760px breakpoint. At desktop widths, override --header-h:56px; --footer-h:40px; --type-display:clamp(52px,5.2vw,82px); --type-label:10px; --type-body:12px. Set .hero top:76px; bottom:58px; grid-template-rows:88px 1fr 74px. Reduce chart margin-top to 8px and manifest margin-top to 10px. Do not reduce the bar count.

Add a max-height:640px breakpoint. At desktop widths, override --header-h:52px; --footer-h:36px; --type-display:clamp(44px,4.4vw,68px); --type-label:9px; --type-data:10px. Set .hero top:64px; bottom:48px; grid-template-rows:72px 1fr 62px. Set the hero copy line-height:1.2, CTA height:36px, and chart margin-top:4px. The page remains clipped and readable with no vertical scroll at >=901px.

I. FAILURE GUARDS

The resting state of all readable text, links, manifest content, and footer content must be opacity:1. Add a .js-ready class to body only after DOM construction. The initial CSS state uses opacity:0 only for elements that have an .enter class, and the first rAF adds .reveal. If JavaScript does not run, a 1.8s CSS fallback reveals all non-bar copy and displays a 2-column static tonnage sample. The two-rAF fallback is mandatory: requestAnimationFrame is called once to schedule a first paint, then a second requestAnimationFrame is called before adding .reveal and setting ready=true. Never leave the page permanently invisible if either rAF callback is delayed.

Under prefers-reduced-motion:reduce, set animation-duration:1ms, animation-delay:0ms, transition-duration:1ms, transition-delay:0ms, and transform:none on .enter, .tonnage-bar, .clip-sweep, .manifest-row::before, and .atmosphere-glow. Keep opacity:1 for all readable content. Do not run the visual entrance sequence in reduced-motion mode. The telemetry rAF loop may continue at a low-cost counter cadence of one callback per animation frame, but it must not cause layout or paint. All numeric values, labels, and controls must remain readable.

J. THE EXACT JS

Place this JavaScript at the end of body, before the closing body tag, without modules, imports, external scripts, or a framework. It must execute after the complete DOM exists:

(() => {
  "use strict";

  const telemetry = window.__DEMO__ = {
    name: "cant",
    ready: false,
    frames: 0,
    effects: [],
    errors: []
  };

  window.addEventListener("error", event => {
    telemetry.errors.push(String(event.message || "window error"));
  });

  const columns = [
    [34,46,58,42,66,52,74,61,78,69,83,72,88,76],
    [38,50,62,47,71,56,79,66,84,73,87,76,91,81],
    [42,55,65,51,74,60,82,70,87,77,90,80,94,84],
    [46,59,68,55,77,64,85,73,89,80,92,83,96,87],
    [50,63,71,59,80,68,88,77,91,83,95,86,98,90],
    [54,66,74,63,82,72,90,80,93,86,97,89,100,93],
    [58,70,77,67,85,76,93,84,95,89,99,92,100,96],
    [62,73,80,71,87,79,95,87,97,92,100,95,100,98],
    [66,77,84,75,90,83,98,91,99,95,100,98,100,100]
  ];

  const chart = document.querySelector(".bars");
  if (chart) {
    const fragment = document.createDocumentFragment();
    columns.forEach(column => {
      column.forEach(value => {
        const cell = document.createElement("div");
        cell.className = "bar-cell";
        const bar = document.createElement("div");
        bar.className = "tonnage-bar enter";
        bar.style.setProperty("--bar-height", value + "%");
        bar.style.setProperty("--bar-delay", (fragment.childNodes.length * 26) + "ms");
        cell.appendChild(bar);
        fragment.appendChild(cell);
      });
    });
    chart.appendChild(fragment);
  }

  const effects = ["bar-grow", "clip-sweep", "row-highlight"];
  effects.forEach(effect => telemetry.effects.push(effect));

  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const stage = document.querySelector(".stage");
  const body = document.body;

  const first = window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      body.classList.add("js-ready");
      if (stage) stage.classList.add(reduced ? "is-static" : "is-active");
      telemetry.ready = true;
    });
  });

  function frame() {
    telemetry.frames += 1;
    window.requestAnimationFrame(frame);
  }
  window.requestAnimationFrame(frame);
})();

The JavaScript must not write telemetry repeatedly to the DOM, create a timer, inspect geometry, or alter the bar array. The only dynamic style writes are the 126 CSS custom properties --bar-height and --bar-delay assigned while constructing bars. Keep the effect names exactly “bar-grow”, “clip-sweep”, and “row-highlight”.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Carbon

- Slug: `carbon`
- Page: https://landingpageprompts.com/prompts/carbon
- Effect: A dual-direction carbon-fibre weave is traversed by a slow radial light while a graphite wordmark and electric-blue structural seam hold the composition.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 53,910; total with repair and cross-check: 77,589
- Verification: 18/18 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - Loads the standalone page and leaves document.documentElement.scrollWidth equal to document.documentElement.clientWidth at 390x844, 768x1024, 1440x900, and 1920x1080.
  - Contains exactly one h1 with the visible text CARBON plus semantic header, nav, main, and footer landmarks, and every visible link has a non-empty accessible name with a visible focus-visible outline.
  - At a viewport width of 1440 and height of 900, document.body scrollHeight is no greater than 900 and document.documentElement overflow is hidden; the document reports exactly one html element with lang=en and title CARBON — Woven Composites.
  - Within 1200ms window.__DEMO__.ready is true, its name is carbon, effects contains all 12 required effect names, frames increases by at least 20 over a 1200ms sample, and errors remains an array.
  - With prefers-reduced-motion: reduce, all animated foreground elements compute to opacity 1 and the continuously animated backdrop layers compute to animation-name none, with no console messages and no uncaught page errors.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT

Build one complete, standalone index.html for a cinematic single-viewport landing page named “CARBON”. The document language is lang="en", the document title is exactly “CARBON — Woven Composites”, and the page is a real document containing one header, one main landmark, one footer, one nav landmark, exactly one h1, and no duplicate page-level headings. The visible product claim is: “Engineered fibre. Quietly radical.” The company is a fictional composites manufacturer; do not add product checkout, shopping-cart behaviour, customer accounts, external links, cookie controls, or secondary pages.

At viewport widths of 901px and above, html and body must use width: 100%; height: 100dvh; margin: 0; overflow: hidden. The stage must use width: 100%; height: 100dvh; min-height: 680px; overflow: hidden. At widths of 900px and below, the document may scroll vertically, but it must retain width: 100% and must never scroll horizontally. Support 390x844, 768x1024, 1440x900, and 1920x1080 without clipped controls or horizontal overflow.

Do NOT build a video background, GIF, raster image, remote image, base64 image, Lottie file, WebGL scene, SVG illustration, framework, component library, utility framework, animation library, or third-party CDN asset. Do not build a dashboard, configurator, ecommerce flow, multi-page navigation, modal, cookie banner, or mobile drawer. Do not use more than one h1. Do not use text generated inside canvas. Do not add horizontal overflow. Do not run continuous layout measurement. Do not animate background-position, background-size, width, height, top, left, filter, box-shadow, or colour values. Do not call getBoundingClientRect inside the animation loop.

B. THE BACKDROP

Build one full-stage backdrop with these elements:

1. One .backdrop fixed to the stage at inset: 0, z-index: 0.
2. One .backdrop-base at inset: 0. Its background colour is #080a0d.
3. Two pseudo-elements on .backdrop-base, ::before and ::after, each absolute at inset: -80px. Together they form the carbon-fibre weave. The element counts are two pseudo-elements for the base weave and one separate highlight layer.
4. The warp uses repeating-linear-gradient(90deg, #11151a 0, #11151a 12px, #050608 12px, #050608 24px, #1c2229 24px, #1c2229 36px, #080a0d 36px, #080a0d 48px). The fill uses repeating-linear-gradient(0deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 14px, rgba(0,0,0,0.48) 14px, rgba(0,0,0,0.48) 24px, rgba(255,255,255,0.035) 24px, rgba(255,255,255,0.035) 34px, rgba(0,0,0,0.18) 34px, rgba(0,0,0,0.18) 44px). Offset the horizontal fill by 12px and the vertical warp by -12px so their 12px half-period offset creates an over/under impression. Keep the gradients stationary; animate only transforms and opacity.
5. One .backdrop-vignette at inset: 0 with background: radial-gradient(ellipse 78% 72% at 50% 46%, rgba(8,10,13,0) 0%, rgba(8,10,13,0.16) 48%, rgba(8,10,13,0.76) 100%). It darkens all four corners and protects text contrast.
6. One .backdrop-light at inset: -180px; z-index: 2. Its background is rgba(226,232,240,0.13). Apply mask-image: radial-gradient(circle 360px at 50% 50%, #000 0%, rgba(0,0,0,0.94) 20%, rgba(0,0,0,0.62) 43%, rgba(0,0,0,0.18) 67%, transparent 82%); add -webkit-mask-image with the identical value. The mask reveals a light veil; it does not regenerate or repaint the weave gradients. The layer is 150% by 150%, translated through six keyframe positions, and uses will-change: transform, opacity.
7. One .blue-seam at left: 63%; top: -12%; width: 1px; height: 124%; z-index: 3. Its linear-gradient is transparent 0%, rgba(59,130,246,0.12) 13%, #60a5fa 43%, #93c5fd 55%, rgba(59,130,246,0.16) 87%, transparent 100%. Add box-shadow: 0 0 12px rgba(96,165,250,0.16). Keep the seam visible over the weave but below all typography.
8. One .grain at inset: 0; z-index: 4; opacity: 0.13; pointer-events: none. Construct it only from a 4px by 4px conic-gradient with alternating transparent and rgba(255,255,255,0.045) quadrants. Do not load image data.

The drift periods are 18s for the weave highlight, 26s for the seam pulse, and 7.5s for the grain translation. The highlight and seam use compositor-only transform animation. The grain may translate by 4px increments, but it must not animate opacity. No canvas is used, so no canvas-resolution trick, context filter, shadow blur, or per-item compositing cost applies. The per-frame budget is fewer than 3 active animated layers, zero geometry reads, zero geometry writes, zero style writes from JavaScript, and a target of 20 or more animation frames during any 1.2-second sample at 1440x900. The main rAF callback only increments window.__DEMO__.frames.

C. THE LAYER STACK

Build the stage in this exact back-to-front order:

1. .backdrop, position: fixed/absolute stage child, z-index: 0.
2. .backdrop-base and its two gradient pseudo-elements, z-index: 1 within the backdrop stacking context.
3. .backdrop-light, z-index: 2 within the backdrop stacking context.
4. .blue-seam, z-index: 3 within the backdrop stacking context.
5. .grain, z-index: 4 within the backdrop stacking context.
6. header.site-header, z-index: 20.
7. main.hero, z-index: 30.
8. div.hero-seam-label, z-index: 35.
9. footer.site-footer, z-index: 20.
10. div.edge-index at z-index: 40 for non-interactive edition metadata.

The stage establishes position: relative and isolation: isolate. All full-bleed background layers use pointer-events: none. The header, main, footer, and metadata remain keyboard reachable. Do not place a full-size transparent element over the page because it would block controls.

D. TOKEN TABLE

Define every recurring size and colour in :root with these exact values:

--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
--page-x: 48px;
--page-y: 34px;
--header-height: 46px;
--footer-height: 42px;
--content-width: 1280px;
--content-max: 1680px;
--hero-top: 50%;
--hero-width: min(1120px, 78vw);
--h1-size: clamp(92px, 15.4vw, 296px);
--h1-weight: 680;
--h1-letter: -0.078em;
--h1-line: 0.78;
--eyebrow-size: 11px;
--eyebrow-letter: 0.22em;
--claim-size: clamp(20px, 1.8vw, 32px);
--claim-line: 1.18;
--body-size: 14px;
--body-line: 1.55;
--meta-size: 10px;
--meta-letter: 0.18em;
--nav-size: 11px;
--nav-letter: 0.16em;
--button-height: 46px;
--button-pad-x: 22px;
--button-radius: 999px;
--button-border: 1px;
--rule: 1px;
--seam-width: 1px;
--backdrop-grain-size: 4px;
--backdrop-weave-unit: 48px;
--motion-fast: 420ms;
--motion-medium: 820ms;
--motion-slow: 1200ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--color-void: #080a0d;
--color-carbon: #11151a;
--color-carbon-light: #1c2229;
--color-white: #f8fafc;
--color-slate: #94a3b8;
--color-slate-dark: #64748b;
--color-line: rgba(148,163,184,0.24);
--color-line-strong: rgba(148,163,184,0.46);
--color-accent: #60a5fa;
--color-accent-soft: rgba(96,165,250,0.16);
--focus-ring: #93c5fd;
--text-shadow: 0 8px 32px rgba(0,0,0,0.72), 0 1px 2px rgba(0,0,0,0.92);
--z-backdrop: 0;
--z-header: 20;
--z-main: 30;
--z-label: 35;
--z-footer: 20;
--z-meta: 40;

E. THE COMPOSITION

Header: position: absolute; top: 0; left: 0; right: 0; height: 46px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 48px; border-bottom: 1px solid rgba(148,163,184,0.12); z-index: 20. The left brand is an anchor with href="#top", accessible name “CARBON home”, and exact visible copy “CARBON / 01”. Style it as 11px monospace, weight 600, letter-spacing 0.16em, color #f8fafc. The center nav contains exactly two anchors, “Materials” and “Process”, styled 11px uppercase with 0.16em tracking and 28px gap. The right header action is an anchor with href="#contact", exact copy “Start a project”, height 46px, and display: inline-flex; align-items: center; justify-self: end.

Hero: main.hero has id="top", position: absolute; inset: 46px 0 42px; display: grid; grid-template-columns: 1fr 1120px 1fr; align-items: center; padding: 0 48px; z-index: 30. The central .hero-copy has width: min(1120px, 78vw); justify-self: center. The .eyebrow reads exactly “COMPOSITE SYSTEMS / EST. 2016”. The only h1 reads exactly “CARBON” and uses the tokenized fluid type. Beneath it, insert a 1px rule with width: min(720px, 64vw), margin: 34px 0 26px, and background: linear-gradient(90deg, rgba(148,163,184,0.58), rgba(148,163,184,0.06)). The claim reads exactly “Engineered fibre. Quietly radical.” The body reads exactly “We build high-performance composite structures where low weight, exceptional stiffness, and precise finishing meet.” Place one primary anchor after the body: href="#contact", exact copy “Explore the material”, with a right-arrow glyph “→” inside an aria-hidden span. Place one secondary text link beside it: href="#process", exact copy “Our process”. The body content is constrained to 480px; no text may extend behind the 63% seam without the vignette preserving contrast.

A vertical .hero-seam-label is position: absolute; left: calc(63% + 18px); top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; text-orientation: mixed; color: #93c5fd; font: 10px/1 var(--font-mono); letter-spacing: 0.18em; opacity: 0.74. Its exact copy is “TOW 6K / 2x2 TWILL / 220 GSM”.

Footer: position: absolute; left: 0; right: 0; bottom: 0; height: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 48px; border-top: 1px solid rgba(148,163,184,0.12); color: #94a3b8; z-index: 20. The left copy is exactly “PRECISION IN EVERY LAYER”. The center coordinates read exactly “51.5072° N / 0.1276° W”. The right copy is exactly “ISO 9001 / MATERIAL 06”, justify-self: end.

.edge-index is position: absolute; right: 17px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font: 9px/1 var(--font-mono); letter-spacing: 0.22em; color: rgba(148,163,184,0.5). Its exact copy is “MONOFILAMENT STUDY / 04”. It is non-interactive.

The anchor targets #contact and #process must resolve to existing visible or programmatically focusable page landmarks. Give main id="process". Put id="contact" on the primary action wrapper and tabindex="-1" so the header target remains valid without introducing a duplicate control.

F. THE UI LANGUAGE

Primary button treatment: height 46px; padding 0 22px; border: 1px solid rgba(248,250,252,0.22); border-radius: 999px; background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%); color: #080a0d; display: inline-flex; align-items: center; gap: 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase. On hover, transform: translateY(-2px); background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%); box-shadow: 0 10px 30px rgba(0,0,0,0.28). The arrow span is font-size: 16px; line-height: 1; transition: transform 420ms var(--ease-out). On hover the arrow translates 4px on the x-axis.

Secondary link: height 46px; padding: 0 4px; color: #cbd5e1; border-bottom: 1px solid rgba(148,163,184,0.42); display inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase. On hover, color: #f8fafc; border-color: #60a5fa.

Header brand and nav links have no permanent pill. Their hover colour is #f8fafc, and their underline pseudo-element scales from 0 to 1 on the x-axis. Every visible control has a 2px solid #93c5fd focus-visible outline with 4px outline offset and border-radius inherited from the control. Do not suppress focus rings. Ensure minimum target dimensions of 44px by 44px for the project link, nav links, primary action, and secondary link.

G. MOTION

Use CSS only for entrance animation. The wordmark starts at opacity 0, transform: translate3d(0, 34px, 0), and runs for 1100ms with cubic-bezier(0.16,1,0.3,1). The eyebrow, rule, claim, body, and actions use 760ms, 860ms, 920ms, 980ms, and 1040ms respectively. Do not leave any content below opacity 1.

Exact stagger table:

.site-header -> opacity 0 to 1 and translate3d(0,-12px,0) to 0 -> 0ms, duration 700ms.
.hero .eyebrow -> opacity 0 to 1 and translate3d(0,14px,0) to 0 -> 180ms, duration 680ms.
.hero h1 -> opacity 0 to 1, scale(0.985), and translate3d(0,34px,0) to 0 -> 300ms, duration 1100ms.
.hero-rule -> opacity 0 to 1 and scaleX(0.2) to 1 -> 560ms, duration 860ms.
.hero .claim -> opacity 0 to 1 and translate3d(0,18px,0) to 0 -> 640ms, duration 780ms.
.hero .body-copy -> opacity 0 to 1 and translate3d(0,14px,0) to 0 -> 740ms, duration 760ms.
.hero-actions -> opacity 0 to 1 and translate3d(0,12px,0) to 0 -> 840ms, duration 740ms.
.site-footer -> opacity 0 to 1 and translate3d(0,10px,0) to 0 -> 920ms, duration 700ms.
.edge-index -> opacity 0 to 1 -> 1100ms, duration 700ms.
.backdrop-light -> lightSweep -> 0ms, duration 18000ms, iteration-count infinite.
.blue-seam -> seamPulse -> 0ms, duration 26000ms, iteration-count infinite.
.grain -> grainShift -> 0ms, duration 7500ms, iteration-count infinite.

Named keyframes:

@keyframes reveal-up { from { opacity: 0; transform: translate3d(0, var(--enter-y, 18px), 0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes reveal-title { from { opacity: 0; transform: translate3d(0,34px,0) scale(0.985); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes reveal-rule { from { opacity: 0; transform: scaleX(0.2); } to { opacity: 1; transform: scaleX(1); } }
@keyframes lightSweep { 0% { transform: translate3d(-26%, -10%, 0); opacity: 0.46; } 24% { opacity: 0.82; } 50% { transform: translate3d(22%, 4%, 0); opacity: 0.64; } 76% { opacity: 0.88; } 100% { transform: translate3d(30%, 18%, 0); opacity: 0.46; } }
@keyframes seamPulse { 0%,100% { transform: translate3d(0,-7px,0); opacity: 0.28; } 50% { transform: translate3d(0,7px,0); opacity: 0.76; } }
@keyframes grainShift { 0% { transform: translate3d(0,0,0); } 25% { transform: translate3d(-4px,4px,0); } 50% { transform: translate3d(4px,-4px,0); } 75% { transform: translate3d(-2px,-2px,0); } 100% { transform: translate3d(0,0,0); } }

Set animation-fill-mode: both for entrance animations. Set will-change: transform, opacity only on the three continuously animated backdrop layers. Never animate box-shadow or filter.

H. RESPONSIVE TABLE

At 1440x900, retain the base tokens: 48px page padding, 1120px hero width, 15.4vw h1 size, 46px header, 42px footer. At 1920x1080, override --page-x: 72px; --page-y: 46px; --content-max: 1680px; --hero-width: min(1240px, 72vw); --h1-size: 296px; --claim-size: 32px. The seam remains at 63% and the h1 remains optically left of centre through the central grid column.

At 768x1024, set --page-x: 32px; --page-y: 26px; --header-height: 58px; --footer-height: 52px; --hero-width: min(680px, 82vw); --h1-size: clamp(112px, 21vw, 176px); --claim-size: 24px; --body-size: 14px. Use body height: auto; min-height: 100dvh; overflow-x: hidden. Stage min-height: 100dvh; height: auto; overflow: visible. Header becomes sticky at top with z-index 20. Hero becomes position: relative; inset: auto; min-height: calc(100dvh - 58px - 52px); padding: 112px 32px 120px; display: grid; grid-template-columns: 1fr; align-content: center. Footer remains relative. Hide the center header nav below 901px. Keep the blue seam fixed at 63%. Set the vertical seam label to display: none only in the compact layout because its 10px text is not a control and would crowd the body. The edge-index remains visible.

At 390x844, set --page-x: 20px; --page-y: 18px; --header-height: 58px; --footer-height: 64px; --hero-width: 100%; --h1-size: clamp(72px, 25vw, 104px); --h1-letter: -0.072em; --claim-size: 22px; --body-size: 13px; --button-height: 48px; --button-pad-x: 18px. Header grid becomes 1fr auto. Hero padding is 92px 20px 112px. Footer grid becomes 1fr auto; the center coordinates are display:none. Hero actions use flex-direction: column; align-items: flex-start; gap: 12px. The primary action remains 48px high. The claim max-width is 330px and body max-width is 340px. Hide the edge-index. Keep the seam at 58% on mobile so it passes through the right side of the h1. The seam label is already display:none.

At max-height: 760px and min-width: 901px, set --page-y: 20px; --header-height: 42px; --footer-height: 36px; --h1-size: clamp(84px, 14vw, 188px); --claim-size: 19px; --body-size: 12px. Hero inset becomes 42px 0 36px. The body copy max-width is 430px. Hero rule margins become 22px 0 18px.

At max-height: 700px and min-width: 901px, set --page-x: 32px; --header-height: 38px; --footer-height: 34px; --h1-size: clamp(72px, 12.5vw, 152px); --claim-size: 17px; --body-size: 11px. Hero inset becomes 38px 0 34px. The h1 line-height becomes 0.8. The rule width becomes 560px and margins become 16px 0 14px. Header project link height becomes 38px. Footer height becomes 34px.

I. FAILURE GUARDS

All animated content must have opacity: 1 and transform: none as its resting state in CSS. Animation-delay may hold an element at opacity 0 for at most 1100ms. The script must not overwrite opacity or transform on content. Use two requestAnimationFrame callbacks: the first schedules the second; the second marks telemetry ready after the browser has completed one paint opportunity. Add a 1200ms timeout fallback that also marks ready once, so a throttled background tab cannot leave ready false. The runtime must never emit console output. Catch script errors through a window error listener and append error.message strings to telemetry.

Under prefers-reduced-motion: reduce, stop entrance animation, lightSweep, seamPulse, and grainShift with animation: none !important. Keep all foreground elements at opacity: 1 and transform: none. Keep .backdrop-light at a static transform: translate3d(-8%, 0, 0) and opacity: 0.66. Keep the seam at opacity: 0.56. Do not disable the telemetry rAF counter because telemetry readiness is a runtime requirement; its callback must still perform only frames += 1. Do not use matchMedia listeners that change document structure.

J. THE EXACT JS

Place this script as the final direct child of body. It performs no DOM measurement and no style mutation:

    <script>
    (function () {
      var telemetry = {
        name: 'carbon',
        ready: false,
        frames: 0,
        effects: [
          'header-reveal',
          'eyebrow-reveal',
          'title-reveal',
          'rule-reveal',
          'claim-reveal',
          'body-reveal',
          'actions-reveal',
          'footer-reveal',
          'metadata-reveal',
          'backdrop-light',
          'blue-seam',
          'film-grain'
        ],
        errors: []
      };
      window.__DEMO__ = telemetry;

      window.addEventListener('error', function (event) {
        telemetry.errors.push(String(event.message || 'Unknown runtime error'));
      });

      var readyMarked = false;
      function markReady() {
        if (readyMarked) return;
        readyMarked = true;
        telemetry.ready = true;
      }

      requestAnimationFrame(function () {
        requestAnimationFrame(markReady);
      });

      window.setTimeout(markReady, 1200);

      function countFrame() {
        telemetry.frames += 1;
        requestAnimationFrame(countFrame);
      }
      requestAnimationFrame(countFrame);
    }());
    </script>

The full HTML must use semantic landmarks exactly once: header.site-header containing nav, main#top.hero, and footer.site-footer. Use aria-label="Primary navigation" on nav. The visible arrow span inside the primary action must be aria-hidden="true". Do not add aria-live regions. Preserve normal document order. Set background: #080a0d on html. Set body margin: 0. Set *, *::before, and *::after with box-sizing: border-box. Set button, a with font: inherit where applicable. Ensure document.documentElement.scrollWidth is not greater than document.documentElement.clientWidth at all four target viewport sizes. Keep the complete file below 90 KB and contain no console statement.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Cardinal

- Slug: `cardinal`
- Page: https://landingpageprompts.com/prompts/cardinal
- Effect: A precision compass rose with 72 tick marks seeking a wandering bearing with spring damping, behind three pulsing magnetic-field rings.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 34,133; total with repair and cross-check: 50,463
- Verification: 18/18 automated checks passed
- Independent cross-check: confirmed (confidence high)
- Acceptance criteria:
  - document.querySelectorAll('h1').length === 1 && document.querySelector('h1').textContent.trim() === 'NAVIGATE WITH ABSOLUTE CERTAINTY'
  - window.__DEMO__.frames > 20 after 1200ms of runtime
  - getComputedStyle(document.getElementById('needle')).transform !== 'none' and its value differs between two samples 100ms apart
  - document.documentElement.scrollWidth <= document.documentElement.clientWidth at 390px, 768px, and 1440px viewport widths
  - window.__DEMO__.effects.includes('spring-needle') && window.__DEMO__.effects.includes('magnetic-pulse')
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT
This document specifies the complete build order for the "CARDINAL" single-viewport cinematic landing page. The page is a high-precision, dark-mode navigation interface. The document title must be exactly `<title>CARDINAL — Precision Navigation</title>`. The HTML tag must be `<html lang="en">`. The viewport rule is `<meta name="viewport" content="width=device-width, initial-scale=1.0">`. The body must enforce a single viewport on desktop: `height: 100dvh; overflow: hidden;` for screens >=901px, and allow native scrolling (`overflow-y: auto; overflow-x: hidden;`) for screens <=900px. 

Do NOT build: any multi-page routing; any WebGL, Three.js, or canvas-based 3D rendering; any React, Vue, Svelte, or framework code; any Tailwind or CSS frameworks; any GSAP, Lottie, or anime.js; any external raster images (jpg/png/gif), external SVGs, video files, or audio files; any base64 encoded media blobs; any custom font files (woff/woff2/ttf); any horizontal scrollbars at 390px, 768px, 1440px, or 1920px; any scroll-jacking or smooth-scroll libraries.

B. THE BACKDROP
The base background is a deep black: `--bg: #050505`. A subtle radial glow sits at z-index 0: `radial-gradient(circle at 50% 50%, rgba(248, 113, 113, 0.08) 0%, rgba(5, 5, 5, 1) 60%)` applied to a pseudo-element covering 100vw and 100vh. 
The magnetic field rings consist of 3 SVG `<circle>` elements inside an SVG with a `0 0 100 100` viewBox. The radii are 30, 40, and 50 user units (which map to 30vmin, 40vmin, 50vmin when the SVG is scaled). The stroke is `var(--accent)` at `0.3` user units wide, with `fill="none"`. They pulse outward using the `pulse-ring` keyframe: scale from 0.8 to 1.2, opacity from 0.8 to 0. Durations are 4s, 5s, and 6s. Delays are 0s, 1.3s, and 2.6s. The entire ring container drifts with a `drift` animation: `transform: translate(-50%, -50%) rotate(360deg)` over 180s linear infinite.
The canvas resolution trick (`canvas.width = canvas.offsetWidth * devicePixelRatio`) is explicitly bypassed because we are using SVG and CSS gradients instead of `<canvas>`. This guarantees the per-frame cost budget with zero rasterization overhead. The per-frame cost budget is strictly 2 DOM writes: the needle's `transform` and the readout's `textContent`. Zero `getBoundingClientRect` calls are made inside the loop. Zero `ctx.filter` or `ctx.shadowBlur` operations exist.

C. THE LAYER STACK
z-index 0: `.bg-glow` (radial gradient pseudo-element).
z-index 1: `#rings` (SVG container for the 3 pulsing magnetic rings).
z-index 2: `#rose-container` (SVG container for the 72 ticks, 4 labels, and 1 needle).
z-index 3: `header` (logo and navigation).
z-index 4: `.hero` (the H1 and the live bearing readout).
z-index 5: `footer` (status indicator and action buttons).

D. TOKEN TABLE
--bg: #050505;
--accent: #f87171;
--accent-dim: rgba(248, 113, 113, 0.2);
--text-main: #f3f4f6;
--text-muted: #9ca3af;
--font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--rose-size: 70vmin;
--tick-length-cardinal: 2.5;
--tick-length-ordinal: 1.5;
--tick-length-minor: 0.8;
--needle-length: 60;
--h1-size: clamp(2.5rem, 6vw, 5rem);
--readout-size: clamp(1rem, 2vw, 1.5rem);
--header-footer-pad: 2rem 3rem;

E. THE COMPOSITION
Header: `display: grid; grid-template-columns: 1fr auto; padding: var(--header-footer-pad); position: absolute; top: 0; width: 100%; box-sizing: border-box; z-index: 3;`. Left side contains the text "CARDINAL" (`font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.5em; font-size: 1rem; color: var(--text-main);`). Right side contains `<nav>` with three links: "TECHNOLOGY", "FLEET", "CONTACT" (`display: flex; gap: 2rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); text-decoration: none;`).

Hero: `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 4; pointer-events: none;`. Contains exactly one `<h1>` with the text "NAVIGATE WITH ABSOLUTE CERTAINTY" (`font-size: var(--h1-size); font-weight: 600; letter-spacing: -0.02em; margin: 0; text-transform: uppercase;`). Below it is a `<div id="readout">` showing "BRG 000°" (`font-family: var(--font-mono); font-size: var(--readout-size); color: var(--accent); margin-top: 1rem; font-weight: 700;`).

Footer: `position: absolute; bottom: 0; width: 100%; box-sizing: border-box; padding: var(--header-footer-pad); display: grid; grid-template-columns: 1fr auto; align-items: center; z-index: 5;`. Left side: "STATUS: ONLINE" (`font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem;`) followed by an 8px dot (`width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: blink 2s infinite;`). Right side: `.btn-group { display: flex; gap: 1rem; }` containing two buttons.

F. THE UI LANGUAGE
Primary Button: `.btn-primary { background: linear-gradient(135deg, #f87171 0%, #dc2626 100%); color: #ffffff; border: none; padding: 0.75rem 1.5rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s; }`. Hover state: `.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(248, 113, 113, 0.3); }`.
Secondary Button: `.btn-secondary { background: transparent; color: var(--text-main); border: 1px solid rgba(248, 113, 113, 0.3); padding: 0.75rem 1.5rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: background 0.2s, border-color 0.2s; }`. Hover state: `.btn-secondary:hover { border-color: var(--accent); background: rgba(248, 113, 113, 0.05); }`.
Focus visible: `:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }`.

G. MOTION
Stagger table:
- `header`: `fade-down`, 0.6s, delay 0.1s.
- `line` (ticks): `fade-in`, 0.5s, delay `calc(var(--i) * 0.01s)`.
- `h1`: `fade-up`, 0.8s, delay 0.2s.
- `#readout`: `fade-up`, 0.8s, delay 0.4s.
- `footer`: `fade-up`, 0.6s, delay 0.6s.
- `circle` (rings): `pulse-ring`, 4s/5s/6s, delay 0s/1.3s/2.6s.
- `#needle`: Spring damping via JS (continuous).

Named keyframes:
- `@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.2); opacity: 0; } }`
- `@keyframes drift { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }`
- `@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }`
- `@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }`
- `@keyframes fade-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }`
- `@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }`

H. RESPONSIVE TABLE
Base (1440x900): `--rose-size: 70vmin;` `--header-footer-pad: 2rem 3rem;`
@media (max-width: 900px): `body { overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100dvh; }`, `#rose-container { position: relative; top: auto; left: auto; transform: none; margin: 10vh auto; }`, `.hero { position: relative; top: auto; left: auto; transform: none; margin-bottom: 10vh; }`, `footer { position: relative; }`.
@media (max-width: 768px): `--rose-size: 80vmin;` `--h1-size: 3rem;`, `header { grid-template-columns: 1fr; gap: 1rem; text-align: center; }`, `nav { justify-content: center; }`.
@media (max-width: 390px): `--rose-size: 90vmin;` `--h1-size: 2rem;`, `footer { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }`, `.btn-group { justify-content: center; }`.
@media (max-height: 700px): `--rose-size: 50vmin;`, `header, footer { padding: 1rem 2rem; }`.
@media (max-height: 500px): `--rose-size: 40vmin;`, `--h1-size: 1.5rem;`, `header, footer { padding: 0.5rem 1rem; }`.

I. FAILURE GUARDS
Resting opacity: All base CSS sets `opacity: 1` for text and ticks. The `fade-in` and `fade-up` animations end at `opacity: 1` with `forwards`. If JS fails to execute, CSS animations still play and leave all elements perfectly visible.
Needle resting: Initial CSS `transform: rotate(0deg)` is set on `#needle`. If JS fails, the needle remains visibly rendered at 0 degrees (North).
Two-rAF fallback: The JS loop uses `requestAnimationFrame`. If the tab is backgrounded, rAF naturally pauses and `frames` stops incrementing, which is correct. No custom polyfill is required.
Reduced-motion: The CSS includes `@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }`. The JS checks `window.matchMedia('(prefers-reduced-motion: reduce)').matches`. If true, it sets `currentBearing = 45`, updates the DOM exactly once, sets `ready = true`, and deliberately does NOT start the rAF loop or the `setInterval`. The navigation settles instantly and the page remains completely readable and static.

J. THE EXACT JS
```javascript
window.__DEMO__ = { name: 'cardinal', ready: false, frames: 0, effects: [], errors: [] };
window.addEventListener('error', (e) => window.__DEMO__.errors.push(e.message));

const ticksGroup = document.getElementById('ticks');
const ringsGroup = document.getElementById('rings');
const needle = document.getElementById('needle');
const readout = document.getElementById('readout');
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// 1. Generate 72 ticks
for (let i = 0; i < 72; i++) {
  const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  const angle = (i * 5) * (Math.PI / 180);
  const isCardinal = i % 18 === 0;
  const isOrdinal = i % 9 === 0 && !isCardinal;
  const length = isCardinal ? 2.5 : (isOrdinal ? 1.5 : 0.8);
  const strokeWidth = isCardinal ? 0.6 : 0.3;
  const rOuter = 48;
  const rInner = rOuter - length;
  tick.setAttribute('x1', (50 + rOuter * Math.sin(angle)).toString());
  tick.setAttribute('y1', (50 - rOuter * Math.cos(angle)).toString());
  tick.setAttribute('x2', (50 + rInner * Math.sin(angle)).toString());
  tick.setAttribute('y2', (50 - rInner * Math.cos(angle)).toString());
  tick.setAttribute('stroke', 'var(--accent)');
  tick.setAttribute('stroke-width', strokeWidth.toString());
  tick.setAttribute('opacity', isCardinal ? '1' : (isOrdinal ? '0.6' : '0.3'));
  tick.style.setProperty('--i', i);
  if (!prefersReducedMotion) {
    tick.style.animation = 'fade-in 0.5s ease-out forwards';
    tick.style.animationDelay = `calc(var(--i) * 0.01s)`;
  }
  ticksGroup.appendChild(tick);
}

// 2. Generate 4 cardinal labels
const labels = [
  { text: 'N', angle: 0 },
  { text: 'E', angle: 90 },
  { text: 'S', angle: 180 },
  { text: 'W', angle: 270 }
];
labels.forEach(l => {
  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  const angle = l.angle * (Math.PI / 180);
  const r = 42;
  text.setAttribute('x', (50 + r * Math.sin(angle)).toString());
  text.setAttribute('y', (50 - r * Math.cos(angle) + 1.5).toString());
  text.setAttribute('fill', 'var(--text-main)');
  text.setAttribute('font-size', '4');
  text.setAttribute('font-family', 'var(--font-mono)');
  text.setAttribute('text-anchor', 'middle');
  text.textContent = l.text;
  ticksGroup.appendChild(text);
});

// 3. Generate 3 magnetic rings
for (let i = 0; i < 3; i++) {
  const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  circle.setAttribute('cx', '50');
  circle.setAttribute('cy', '50');
  circle.setAttribute('r', (30 + i * 10).toString());
  circle.setAttribute('fill', 'none');
  circle.setAttribute('stroke', 'var(--accent)');
  circle.setAttribute('stroke-width', '0.3');
  if (!prefersReducedMotion) {
    circle.style.animation = `pulse-ring ${4 + i}s ease-out infinite`;
    circle.style.animationDelay = `${i * 1.3}s`;
  }
  ringsGroup.appendChild(circle);
}

// 4. Spring physics for the needle
let currentBearing = 0;
let targetBearing = 0;
let velocity = 0;
const stiffness = 0.08;
const damping = 0.85;

if (prefersReducedMotion) {
  currentBearing = 45;
  targetBearing = 45;
  needle.style.transform = `rotate(${currentBearing}deg)`;
  readout.textContent = `BRG ${Math.round(currentBearing).toString().padStart(3, '0')}°`;
  window.__DEMO__.ready = true;
} else {
  window.__DEMO__.effects.push('spring-needle');
  window.__DEMO__.effects.push('magnetic-pulse');
  
  setInterval(() => {
    targetBearing = Math.random() * 360;
  }, 3500);

  function loop() {
    window.__DEMO__.frames++;
    let diff = targetBearing - currentBearing;
    // Normalize difference to the shortest path (-180 to 180)
    diff = ((diff + 180) % 360 + 360) % 360 - 180;
    const force = diff * stiffness;
    velocity = (velocity + force) * damping;
    currentBearing = (currentBearing + velocity + 360) % 360;

    needle.style.transform = `rotate(${currentBearing}deg)`;
    readout.textContent = `BRG ${Math.round(currentBearing).toString().padStart(3, '0')}°`;
    
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
  window.__DEMO__.ready = true;
}
```


---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Cascade

- Slug: `cascade`
- Page: https://landingpageprompts.com/prompts/cascade
- Effect: A monospace telemetry waterfall sends fourteen streams of compact log tokens through a cool-grey field, with isolated green hot rows and a five-second vertical scan.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 58,236; total with repair and cross-check: 80,806
- Verification: 20/20 automated checks passed
- Independent cross-check: confirmed (confidence high)
- Acceptance criteria:
  - At 1440x900, the document has exactly one visible h1 with text CASCADE, a semantic header, nav, main, and footer, and document.documentElement.scrollHeight is no greater than 900px.
  - The canvas backing buffer is capped at 2880x1620, window.__DEMO__.name equals cascade, ready becomes true within 2 seconds, frames is greater than 20 within 1.2 seconds, and effects includes cascade.tokens, cascade.trails, and cascade.scan.
  - At 390x844, 768x1024, 1440x900, and 1920x1080, document.documentElement.scrollWidth is no greater than innerWidth, every visible interactive element has an accessible name, and no element has a focus-visible outline thinner than 2px.
  - The page contains no img, video, audio, iframe, canvas-adjacent external asset, React, Tailwind, GSAP, Three.js, Lottie, or console output; all visible marks are generated by CSS, SVG, or canvas.
  - With prefers-reduced-motion: reduce, the canvas and foreground content are readable at opacity 1, no CSS entrance or scan animation is running, the JavaScript rAF loop does not continuously increment frames, and the telemetry object remains initialized with the exact required fields.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
<THE FULL BUILD ORDER, 2200-3200 words>

A. WHAT IS BEING BUILT

Build one self-contained index.html for a fictional log-analytics company named CASCADE. The page is a single-screen cinematic product landing page whose central visual is an instrumented data waterfall: fourteen vertical streams of short operational tokens descend behind a precise, restrained interface. It must feel like observability software under a calibrated microscope, not a science-fiction terminal.

Use document language lang="en". Set the document title to "CASCADE — Log intelligence in motion". Set the viewport meta to width=device-width, initial-scale=1. The application is one semantic document with one real header, one main, one real footer, and one real nav. There must be exactly one h1: “CASCADE”. The h1 text may be visually split with spans, but the accessible name must remain CASCADE.

At viewport widths of 901px and greater, set html, body, and the page shell to height: 100dvh and overflow: hidden. At widths of 900px and below, permit normal vertical document scrolling, keep the header non-sticky, and size the canvas composition to 390x844, 768x1024, 1440x900, and 1920x1080 without horizontal overflow. Never scale the whole page with transform.

Do NOT build a hero carousel, terminal emulator, Matrix rain, animated typing demo, product dashboard mockup, pricing table, blog feed, login form, cookie panel, modal, video, image gallery, 3D scene, particle nebula, katakana, binary glyph field, chart library, or multi-page navigation. Do not use React, Tailwind, GSAP, Three.js, Lottie, a framework, a bundler, a build step, external images, remote fonts other than Google Fonts, mp4, webm, gif, SVG icon assets from a CDN, base64 media, or third-party APIs. Do not put content behind an interaction gate. Do not add more than one h1. Do not use a neon green field, pure black background, glow overload, or persistent scanning overlay that harms legibility.

B. THE BACKDROP

Create one full-bleed canvas element with id="cascade-canvas", CSS width:100% and height:100%, positioned absolute at inset:0. It sits behind the header, hero, and footer. The canvas is decorative with aria-hidden="true". The page background beneath it must be #0b0e12.

Use the canvas resolution trick: set its internal drawing buffer to round(cssWidth * min(devicePixelRatio, 1.5)) by round(cssHeight * min(devicePixelRatio, 1.5)), capped at a maximum width of 2880 and maximum height of 1620. Apply the same cap to the offscreen trail buffer. On resize, preserve normalized column and row state, create new offscreen canvases, clear both buffers to transparent, and restart animation only if motion is permitted. Do not recreate geometry or gradients per frame.

Render fourteen fixed logical columns across the field. Give each column a normalized x center, speed, phase, token interval, width, and opacity. Logical column width is 8.25% of the canvas width and gutters consume the remaining 15.5%. At 1440px, the approximate center coordinates are 67, 186, 305, 424, 543, 662, 781, 900, 1019, 1138, 1257, 1376, 1495, and 1614px after proportional width calculation; the actual coordinates are always derived from column index and canvas width, never hard-coded for one viewport. Map canvas x to the right side of the composition so the 68%-wide hero copy remains on a controlled dark veil.

Each column contains a stack of 9 logical rows. Every row is a short token, not a character field. Alternate among “trace.7f3”, “ingest 142ms”, “GET /v1/logs”, “idx 84.2ms”, “P95 18.7ms”, “batch 064”, “status 204”, “queue 03”, “shard eu-2”, “merge 4.1ms”, “replay 0007”, “evt 91a4”, “edge 11ms”, and “checksum ok”. Use deterministic hash functions for token selection, phase, and hot-row designation; do not call Math.random inside the animation loop.

Each row travels downward at a per-column speed from 0.54 to 0.94 canvas heights per second. Rows begin with a phase offset from 0.00 to 0.96 of the cycle. New tokens are placed above the top edge at cycle intervals from 760ms to 1320ms. Each token has a 3px-radius line cap and a tail of 42px. A token is not a full-width line: its width is 56% to 86% of its column width. Draw the tail as a vertical linear gradient from transparent at its top to rgba(148,163,184,0.28) at its lower end, then draw the 2px token head in rgba(203,213,225,0.72). Every 29th token is hot. Hot tokens are only 7px high, width 62% of their column, and use #4ade80 at opacity 0.92. A hot row has a 76x14px background wash using rgba(74,222,128,0.08), with no blur and no shadow. Exactly one hot row may be visible in each column at a time.

Behind the tokens, fill the canvas with a vertical linear gradient: stop 0 is #0b0e12, stop 0.48 is #11161d, stop 1 is #090b0f. Add one static horizontal rule at y=52% using rgba(148,163,184,0.055) and one at y=78% using rgba(148,163,184,0.035). Do not add star points, rain lines, glyph noise, or glowing edges.

The fading trail is produced on an offscreen canvas, not by clearing the visible canvas completely each frame. Every frame, fill the trail buffer with rgba(11,14,18,0.085) using source-over. Draw the newly active token segments onto that buffer, then draw the trail buffer onto the visible canvas with globalAlpha 0.92. This is a fixed-cost two-canvas composite. Avoid ctx.filter and ctx.shadowBlur entirely. Avoid large path counts: use one path per gradient tail and one short line or rounded rectangle per visible token. The per-frame budget is 14 column updates, 126 row visibility checks, 126 maximum token draws, 2 buffer composites, and 1 scan-line draw. It must sustain at least 20 frames per 1.2 seconds on a 1440x900 headless viewport.

The scan line is a 1px vertical line with a 1px adjacent translucent line. Its gradient runs from transparent at y=0, through rgba(203,213,225,0.10) at y=46%, to rgba(74,222,128,0.34) at y=54%, then transparent at y=100%. Sweep from x=0 to canvas width over 5000ms with a 900ms pause after each pass. It is positioned behind all foreground UI and must not cross text at opacity above 0.10 over the hero copy. Cache all canvas dimensions in the loop; do not call getBoundingClientRect, clientWidth, clientHeight, getComputedStyle, or window.innerWidth inside the rAF loop.

C. THE LAYER STACK

Use these layers from back to front. The body background is z-index:0. The full-bleed canvas is z-index:1. A static vignette pseudo-element on the hero is z-index:2, with pointer-events:none. The primary left-side content veil is z-index:3, using a horizontal gradient from rgba(11,14,18,0.96) to rgba(11,14,18,0.60) and width:70%. The header is z-index:10. The main hero content is z-index:11. The footer is z-index:10. The accessibility skip link is z-index:100 only when focused. No layer may create horizontal overflow.

The header has a 1px bottom border in rgba(148,163,184,0.12), height:76px, and padding:0 48px. The logo lockup is on the left. The nav is on the right. The hero uses a max-width:1440px shell centered with 48px side padding and 64px top and bottom space. The footer sits at the bottom edge in the same shell with 24px top padding and 28px bottom padding.

D. TOKEN TABLE

Define every visual token in :root and use only these variables for sizes and colors.

--page-bg: #0b0e12
--panel-ink: #f1f5f9
--body-ink: #94a3b8
--muted-ink: #64748b
--line: rgba(148,163,184,0.12)
--line-soft: rgba(148,163,184,0.07)
--accent: #4ade80
--accent-soft: rgba(74,222,128,0.12)
--accent-border: rgba(74,222,128,0.42)
--canvas-cap: 2880px
--canvas-height-cap: 1620px
--shell-max: 1440px
--header-height: 76px
--header-pad-x: 48px
--hero-pad-x: 48px
--hero-pad-y: 64px
--footer-pad-x: 48px
--footer-pad-y: 28px
--footer-top: 24px
--nav-gap: 32px
--eyebrow-size: 11px
--eyebrow-track: 0.16em
--h1-size: clamp(48px, 6.5vw, 104px)
--h1-line: 0.92
--h1-track: -0.07em
--lede-size: 17px
--lede-line: 1.55
--lede-measure: 470px
--action-gap: 12px
--button-height: 46px
--button-pad-x: 20px
--button-radius: 999px
--pill-height: 34px
--pill-pad-x: 12px
--pill-gap: 8px
--footer-text-size: 12px
--footer-gap: 18px
--focus-ring: 2px
--focus-offset: 4px
--scan-duration: 5000ms
--scan-pause: 900ms
--trail-opacity: 0.085
--token-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace
--display-font: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Load Google Fonts only for Space Grotesk weights 400, 500, 600 and IBM Plex Mono weights 400, 500, 600. Include preconnect links to fonts.googleapis.com and fonts.gstatic.com, but all fallback stacks must render correctly if the request is blocked.

E. THE COMPOSITION

Header markup is real header.header > a.brand[href="#top"] and nav aria-label="Primary navigation". The brand has a 10px 10px 10px 4px accent square and the text “CASCADE”. Its accessible name must be “CASCADE home”. Nav contains three links: “Product”, “Signals”, and “Company”, each linking to an in-page section or top target that exists. Add a header action anchor with exact text “Request access”; it links to #request-access and is focusable.

Main id="top" has section.hero aria-labelledby="hero-title". Place a left content column with width:min(100%, 620px) and position relative. The eyebrow exact copy is “LOG INTELLIGENCE / 01”. It uses an 8px green status dot followed by that text. The h1 exact text is “CASCADE”. Under it, a two-line statement uses exact copy: “See the signal.” on the first line and “Keep the context.” on the second. The supporting paragraph exact copy is “CASCADE turns fragmented events into one calm operational surface. Search, compare, and act on the trail before it disappears.” Set its width to 470px and max-width:100%.

Place two controls below the paragraph. The primary anchor exact text is “Start a quiet shift”; secondary anchor exact text is “Read the field notes”. The first links to #request-access, the second to #signals. Add a small proof row below them containing “14 streams” and “99.98% ingest uptime” separated by a 1px vertical rule. The footer exact left copy is “Operational clarity, without the noise.” The footer right copy is “© 2025 CASCADE SYSTEMS”. A tiny footer status group displays a 6px green dot and “ALL SYSTEMS OBSERVABLE”.

Create one non-interactive signal legend inside the hero at right:100px; bottom:24px; with three items: “TRACE”, “BATCH”, and “HOT ROW”. The first two are 5px grey dots, the last is a 5px green dot. The legend must not intercept pointer events.

The composition is a 12-column conceptual grid: left content occupies columns 1 through 6; empty breathing space occupies columns 7 through 8; the canvas is visible through columns 5 through 12. At desktop, set hero grid-template-columns: repeat(12, minmax(0, 1fr)); gap:24px. The left content starts at column 1 and spans 6 columns. The right visual is a transparent overlay with no border, no card, and no label, allowing the canvas to be the product image. Do not place dashboard rectangles, charts, or fake controls over the waterfall.

F. THE UI LANGUAGE

Primary button: display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 20px; border:1px solid var(--accent-border); border-radius:999px; background:linear-gradient(135deg, #4ade80 0%, #22c55e 100%); color:#07110b; font:600 13px/1 var(--display-font); letter-spacing:-0.01em; text-decoration:none. Hover changes transform:translateY(-2px), background:linear-gradient(135deg, #6ee7a0 0%, #4ade80 100%), and border-color:#86efac. Active changes transform:translateY(0). Do not add a glow shadow.

Secondary button: min-height:46px; padding:0 20px; border:1px solid rgba(203,213,225,0.24); border-radius:999px; background:rgba(15,23,42,0.36); color:#e2e8f0; font:500 13px/1 var(--display-font). Hover border-color:rgba(74,222,128,0.55), background:rgba(30,41,59,0.64), and transform:translateY(-2px). Both buttons have a visible 2px accent focus ring with 4px offset. Do not use outline:none without a replacement.

Pills are 34px high with 12px horizontal padding, 1px solid var(--line), background:rgba(15,23,42,0.54), color:#cbd5e1, font:500 10px/1 var(--token-font), letter-spacing:0.08em, and border-radius:999px. Hover border-color:var(--accent-border), color:var(--accent), and background:var(--accent-soft). Every visible link and control receives an accessible name, including the status and brand links.

G. MOTION

Initial page elements enter once. The animation is staggered from the eyebrow to the proof row. Use only opacity and transform.

Stagger table:
- header: fade-down 480ms cubic-bezier(0.22,1,0.36,1), delay 0ms.
- eyebrow: fade-up 500ms cubic-bezier(0.22,1,0.36,1), delay 100ms.
- h1: fade-up 700ms cubic-bezier(0.22,1,0.36,1), delay 170ms.
- statement: fade-up 600ms cubic-bezier(0.22,1,0.36,1), delay 280ms.
- lede: fade-up 600ms cubic-bezier(0.22,1,0.36,1), delay 360ms.
- actions: fade-up 500ms cubic-bezier(0.22,1,0.36,1), delay 440ms.
- proof row: fade-up 500ms cubic-bezier(0.22,1,0.36,1), delay 520ms.
- signal legend: fade-in 700ms ease-out, delay 800ms.
- footer: fade-up 500ms cubic-bezier(0.22,1,0.36,1), delay 600ms.

Define @keyframes fade-up as from opacity:0; transform:translateY(18px); to opacity:1; transform:translateY(0). Define @keyframes fade-down as from opacity:0; transform:translateY(-10px); to opacity:1; transform:translateY(0). Define @keyframes fade-in as from opacity:0 to opacity:1. Set the canvas to opacity:0 and animate it to opacity:1 over 900ms with delay 0ms. Do not animate width, height, top, left, box-shadow, or color.

The canvas loop has effect names “cascade.tokens”, “cascade.trails”, “cascade.scan”. Push each name exactly once into window.__DEMO__.effects. The scan CSS animation is scan-sweep 5900ms linear infinite, with 0% transform:translateX(-100%), 15% transform:translateX(0%), 84% transform:translateX(100%), 100% transform:translateX(100%). The timing includes the 5000ms sweep and 900ms pause. The line is a child pseudo-element or an absolutely positioned div with transform only.

H. RESPONSIVE TABLE

At 1920x1080: --shell-max:1680px; --header-pad-x:72px; --hero-pad-x:72px; --footer-pad-x:72px; --hero-pad-y:92px; --h1-size:clamp(72px, 7.2vw, 112px). Keep the left veil width:68%.

At 1440x900: --shell-max:1440px; --header-pad-x:48px; --hero-pad-x:48px; --footer-pad-x:48px; --hero-pad-y:64px; --h1-size:clamp(58px, 7vw, 96px). Keep one line for each h1 text span and the lede width at 470px.

At 901px and below: hide the primary action label only if necessary by reducing --hero-pad-x to:28px; set --header-pad-x:28px; --footer-pad-x:28px; --nav-gap:18px; --lede-measure:430px. Keep desktop height:100dvh only at 901px and above.

At max-width:900px: body overflow-y:auto; html,body overflow-x:hidden; .page-shell min-height:100dvh; header height:68px; hero min-height:760px; height:auto; padding-top:56px; padding-bottom:44px; grid-template-columns:1fr; gap:40px. Position the canvas across the full hero at top:0; height:100%; opacity:0.88. The content veil becomes vertical:linear-gradient(180deg,rgba(11,14,18,0.98) 0%,rgba(11,14,18,0.90) 48%,rgba(11,14,18,0.62) 100%). Keep the signal legend at right:24px; bottom:20px. At 390x844, set --header-pad-x:20px; --hero-pad-x:20px; --footer-pad-x:20px; --h1-size:52px; --lede-size:15px; --lede-measure:100%; --action-gap:10px; --button-height:44px; --button-pad-x:16px; --nav-gap:12px; hide the word “Company” from the primary nav but retain a visibly available 44px link named “More” only if the header still needs three destinations. Prefer a two-link nav on mobile: “Product” and “Signals”; no hidden focusable links.

At max-height:820px and min-width:901px: --header-height:68px; --hero-pad-y:34px; --footer-pad-y:18px; --footer-top:14px; --h1-size:clamp(48px, 6.2vw, 82px); --lede-size:15px; --lede-line:1.4. At max-height:680px and min-width:901px: --header-height:60px; --hero-pad-y:22px; --footer-pad-y:12px; --footer-top:10px; --h1-size:48px; --lede-size:14px; --statement-size:20px. Never reduce text below 12px. No horizontal overflow at 390, 768, 1440, or 1920 widths.

I. FAILURE GUARDS

Set every animated foreground element to opacity:1 at rest and use animation-fill-mode:both only for the entrance animation. If JavaScript fails, the page must remain readable, the canvas may show its static CSS background, and controls must still work as anchors. Add a two-rAF fallback: after the first rAF request, request a second rAF; if the first frame callback has not updated window.__DEMO__.frames, set canvas opacity:1, remove all entrance classes, set all animated foreground opacity:1, and cancel the animation class rather than leaving hidden content. Set window.__DEMO__.ready=true only after the first paint using requestAnimationFrame(() => requestAnimationFrame(() => { window.__DEMO__.ready = true; })). The exact telemetry object must be initialized before any resize or animation work.

The error listener is window.addEventListener("error", function(event) { window.__DEMO__.errors.push(String(event.message || "window error")); });. Do not call console.log, console.warn, console.error, or debug. Avoid uncaught exceptions by wrapping setup and resize in try/catch and pushing a concise error string if initialization fails.

In @media (prefers-reduced-motion: reduce), remove all CSS animation and transition declarations with animation:none; transition:none; scroll-behavior:auto; set canvas opacity:1; set every animated foreground opacity:1; preserve the static gradient and token positions. The JavaScript must check matchMedia("(prefers-reduced-motion: reduce)").matches. If true, draw one deterministic frame, set ready after two rAFs, and do not start the continuous loop. If the preference changes, cancel any loop and either start it or stop it accordingly. Canvas movement is decorative, so this static frame must still show fourteen columns and at least four visible token heads.

J. THE EXACT JS

Use this exact initialization and animation structure, with the HTML canvas referenced by id "cascade-canvas". The DOM reads happen only in setup or resize, never in frame().

const canvas = document.getElementById("cascade-canvas");
const ctx = canvas.getContext("2d", { alpha: false });
const trail = document.createElement("canvas");
const trailCtx = trail.getContext("2d");
const shell = document.querySelector(".page-shell");
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
window.__DEMO__ = { name: "cascade", ready: false, frames: 0, effects: [], errors: [] };
window.addEventListener("error", function(event) {
  window.__DEMO__.errors.push(String(event.message || "window error"));
});

const words = [
  "trace.7f3", "ingest 142ms", "GET /v1/logs", "idx 84.2ms",
  "P95 18.7ms", "batch 064", "status 204", "queue 03",
  "shard eu-2", "merge 4.1ms", "replay 0007", "evt 91a4",
  "edge 11ms", "checksum ok"
];
const columns = Array.from({ length: 14 }, (_, index) => ({
  index,
  phase: (index * 0.071 + 0.13) % 1,
  speed: 0.54 + ((index * 0.037) % 0.40),
  interval: 760 + ((index * 83) % 560),
  width: 0.56 + ((index * 0.013) % 0.30)
}));
let width = 0;
let height = 0;
let dpr = 1;
let last = 0;
let raf = 0;
let running = false;
let fallbackPending = true;
let scanStart = 0;

function resizeCanvas() {
  const rect = shell.getBoundingClientRect();
  width = Math.max(1, Math.round(rect.width));
  height = Math.max(1, Math.round(rect.height));
  dpr = Math.min(window.devicePixelRatio || 1, 1.5);
  const targetWidth = Math.min(2880, Math.round(width * dpr));
  const targetHeight = Math.min(1620, Math.round(height * dpr));
  canvas.width = targetWidth;
  canvas.height = targetHeight;
  trail.width = targetWidth;
  trail.height = targetHeight;
  canvas.style.width = "100%";
  canvas.style.height = "100%";
  trailCtx.clearRect(0, 0, targetWidth, targetHeight);
}

function hash(value) {
  const n = Math.sin(value * 12.9898) * 43758.5453;
  return n - Math.floor(n);
}

function drawStatic() {
  if (!ctx) return;
  ctx.clearRect(0, 0, width, height);
  const base = ctx.createLinearGradient(0, 0, 0, height);
  base.addColorStop(0, "#0b0e12");
  base.addColorStop(0.48, "#11161d");
  base.addColorStop(1, "#090b0f");
  ctx.fillStyle = base;
  ctx.fillRect(0, 0, width, height);
  ctx.strokeStyle = "rgba(148,163,184,0.055)";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(0, height * 0.52);
  ctx.lineTo(width, height * 0.52);
  ctx.moveTo(0, height * 0.78);
  ctx.lineTo(width, height * 0.78);
  ctx.stroke();
  columns.forEach((column, columnIndex) => {
    const x = width * (0.045 + columnIndex * 0.0825);
    for (let row = 0; row < 9; row += 1) {
      const y = ((row / 9 + column.phase) % 1) * height;
      const hot = (row + columnIndex * 5) % 29 === 0;
      ctx.fillStyle = hot ? "rgba(74,222,128,0.92)" : "rgba(203,213,225,0.66)";
      ctx.fillRect(x, y, Math.max(5, width * 0.82 * column.width * 0.055), hot ? 7 : 3);
    }
  });
}

function frame(time) {
  if (!running || !ctx) return;
  if (!last) last = time;
  const delta = Math.min(40, time - last);
  last = time;
  const scaleX = width;
  const scaleY = height;
  trailCtx.globalCompositeOperation = "source-over";
  trailCtx.fillStyle = "rgba(11,14,18,0.085)";
  trailCtx.fillRect(0, 0, scaleX, scaleY);
  trailCtx.globalCompositeOperation = "source-over";
  columns.forEach((column, columnIndex) => {
    const x = scaleX * (0.045 + columnIndex * 0.0825);
    const cycle = (column.interval / 1000) * column.speed;
    const offset = ((time / 1000 + column.phase) % cycle) / cycle;
    for (let row = 0; row < 9; row += 1) {
      const y = (offset + row / 9) % 1 * scaleY;
      if (y < -48 || y > scaleY + 48) continue;
      const hot = (row + columnIndex * 5) % 29 === 0;
      const tokenWidth = Math.max(5, scaleX * 0.82 * column.width * 0.055);
      const tail = trailCtx.createLinearGradient(x, y - 42, x, y);
      tail.addColorStop(0, "rgba(148,163,184,0)");
      tail.addColorStop(1, hot ? "rgba(74,222,128,0.38)" : "rgba(148,163,184,0.28)");
      trailCtx.strokeStyle = tail;
      trailCtx.lineWidth = hot ? 3 : 2;
      trailCtx.beginPath();
      trailCtx.moveTo(x, y - 42);
      trailCtx.lineTo(x, y);
      trailCtx.stroke();
      trailCtx.fillStyle = hot ? "rgba(74,222,128,0.92)" : "rgba(203,213,225,0.72)";
      trailCtx.fillRect(x - tokenWidth * 0.5, y - 2, tokenWidth, hot ? 7 : 3);
    }
  });
  ctx.drawImage(trail, 0, 0, scaleX, scaleY);
  const scanProgress = (time - scanStart) % 5900;
  if (scanProgress <= 5000) {
    const x = scaleX * (scanProgress / 5000);
    const scan = ctx.createLinearGradient(0, 0, 0, scaleY);
    scan.addColorStop(0, "rgba(203,213,225,0)");
    scan.addColorStop(0.46, "rgba(203,213,225,0.10)");
    scan.addColorStop(0.54, "rgba(74,222,128,0.34)");
    scan.addColorStop(1, "rgba(74,222,128,0)");
    ctx.fillStyle = scan;
    ctx.fillRect(x, 0, 1, scaleY);
  }
  window.__DEMO__.frames += 1;
  fallbackPending = false;
  raf = requestAnimationFrame(frame);
}

function start() {
  if (reduced.matches || running || !ctx) return;
  running = true;
  last = 0;
  scanStart = performance.now();
  window.__DEMO__.effects.push("cascade.tokens", "cascade.trails", "cascade.scan");
  raf = requestAnimationFrame(frame);
}

function stop() {
  running = false;
  if (raf) cancelAnimationFrame(raf);
  raf = 0;
}

window.addEventListener("resize", function() {
  resizeCanvas();
  if (reduced.matches) drawStatic();
});

reduced.addEventListener("change", function() {
  if (reduced.matches) {
    stop();
    drawStatic();
  } else {
    start();
  }
});

resizeCanvas();
drawStatic();
requestAnimationFrame(() => requestAnimationFrame(() => {
  window.__DEMO__.ready = true;
  if (reduced.matches) return;
  if (fallbackPending) {
    canvas.style.opacity = "1";
    document.querySelectorAll("[data-animate]").forEach(function(element) {
      element.style.opacity = "1";
      element.style.transform = "none";
    });
  }
  start();
}));

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Chrome Bloom

- Slug: `chrome-bloom`
- Page: https://landingpageprompts.com/prompts/chrome-bloom
- Effect: A liquid-chrome metaball bloom drifts behind a conic-sheen italic wordmark
- Model: `MiniMaxAI/MiniMax-M3` (MiniMax-M3 (MiniMaxAI/MiniMax-M3)) on cmd-code
- Build tokens: 18,097; total with repair and cross-check: 38,776
- Verification: 17/18 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - exactly one <h1> with the exact text 'Brands, in liquid metal.' rendered in an italic serif (Cormorant Garamond) with a conic-gradient chrome sheen via background-clip: text
  - a fixed .bloom container holds exactly 6 absolutely-positioned .orb circles whose transforms are updated per rAF; the container applies filter: blur(28px) contrast(18) once in CSS and is animated with transform only
  - window.__DEMO__ is initialized with name 'chrome-bloom', ready becomes true after the first painted orbit frame, frames increments once per rAF tick, effects contains 'liquid-chrome', 'conic-sheen', 'hue-drift', 'grain-texture', and 'mobile-menu', and errors stays empty in the happy path
  - exactly 3 nav links, 1 CTA, 1 lede paragraph and 3 footer items exist with accessible names; every anchor and button has a visible :focus-visible ring and the page is single-viewport (height:100dvh; overflow:hidden) at >=901px
  - no horizontal overflow at 390px, 768px, 1440px, or 1920px; the prefers-reduced-motion reduce block keeps the page readable and static; the entire index.html is under 90 KB and uses Google Fonts as the only network request
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
Build one complete, self-contained `index.html` for **Bloom** — a generative brand studio landing page. Document title: `Bloom — Generative Brand Studio`. `<html lang="en">`. ONE file only: plain HTML + CSS + JS in `<style>`/`<script>`. No frameworks, no bundlers, no external media of any kind (no images, no video, no fonts other than Google Fonts, no CDN scripts). Every visual pixel is generated by CSS gradients, inline SVG, and absolutely-positioned CSS circles composited through a `filter: blur() contrast()` chain. No `<canvas>`, no WebGL, no Three.js.

**Viewport rule:** on viewports `>= 901px` wide the page is a single frame: `html, body { height:100%; overflow:hidden }` and `.page { height:100dvh; overflow:hidden }`. NO SCROLL on desktop. On viewports `<= 900px` the page may scroll vertically. No horizontal overflow at any width.

**Do NOT build:** no `<canvas>`, no WebGL, no Three.js, no Lottie, no GSAP, no jQuery, no Tailwind, no React, no images (remote or base64), no audio, no forms, no pricing tables, no testimonials, no extra sections beyond the specified header / hero / footer, no more than 3 nav links, no more than 3 footer items, no cookie banner, no scroll indicator, no hamburger menu on desktop (menu only on `<=900px`).

---

## A. WHAT IS BEING BUILT

A single-viewport landing page for a generative brand studio called **Bloom**. Behind a large italic serif wordmark sits a liquid-chrome form: exactly **6 circles** on independent orbital paths, blurred and composited through a single `filter: blur(28px) contrast(18)` chain so they read as ONE metaball mass rather than 6 separate blobs. The wordmark itself is a serif italic at large size with a conic-gradient chrome sheen applied via `background-clip: text`. A fine SVG grain overlay sits on top. A slow ~40-second hue drift rotates the chrome's tint. The frame is moody, expensive, liquid-metal — the studio calls itself a brand foundry and the page should feel like one. Header: small wordmark + 3 nav links. Hero: eyebrow chip, italic wordmark, single muted lede, one CTA. Footer: a three-item strip.

---

## B. THE BACKDROP — the chrome bloom (the ONLY animated visual besides the grain jitter)

The chrome bloom is a fixed-size composited layer, NOT a full-viewport element. It is one `<div class="bloom">` at `position:fixed; left:50%; top:50%; width: min(82vw, 1180px); height: min(82vw, 1180px); transform: translate(-50%, -50%); z-index: 1; pointer-events: none; filter: blur(28px) contrast(18); mix-blend-mode: screen; will-change: transform; contain: paint;`. Its transform is animated by JS; the **filter is set once in CSS and never re-applied per frame**. Because the bloom sits over a near-black field, the `contrast(18)` amplifies blurred edges into hard chrome rims and the adjacent circles merge into one body.

**The 6 circles.** Inside `.bloom`, six `<span class="orb orb--N">` elements where N = 1..6. Each is `position:absolute; left:50%; top:50%; width: var(--orb-size, 38%); height: var(--orb-size, 38%); margin-left: calc(var(--orb-size)/-2); margin-top: calc(var(--orb-size)/-2); border-radius: 50%;`. Each circle is filled with a **radial-gradient chrome body** so even before compositing it looks like a polished bead. The gradient (the same family for every orb, different stop offsets) is:

```
background:
  radial-gradient(circle at 32% 30%,
    #ffffff 0%,
    #f6f0e1 8%,
    #e9d8a6 18%,
    #b08a3a 38%,
    #2a1d0a 62%,
    #0a0703 88%,
    #000000 100%);
```

The 6 orbs have these sizes and starting offsets (orb-size is a percentage of the bloom container; x/y are the centerpoint offset as a percentage of container width/height; the JS orbit path will then add to these):

```
orb--1  size 42%  x -18%  y  -8%   (large, upper-left mass)
orb--2  size 34%  x  22%  y -14%   (mid, upper-right)
orb--3  size 30%  x  10%  y  18%   (mid, lower-centre)
orb--4  size 26%  x -24%  y  14%   (small, lower-left)
orb--5  size 22%  x  26%  y   6%   (small, right)
orb--6  size 18%  x  -6%  y -22%   (tiny, top-centre)
```

**Orbits.** JS reads `--t` (seconds since start) and sets each orb's `transform` to `translate(calc(baseX + r * cos(theta)), calc(baseY + r * sin(theta)))` once per animation frame. The baseX / baseY are the offsets above; the radius `r` is a per-orb percentage of container size (so the path is responsive). The angle `theta = omega * t + phase`. Six named per-orb motion rules, each fully independent:

```
orb--1  r 9%   omega 0.105 rad/s   phase 0.00
orb--2  r 7%   omega 0.146 rad/s   phase 1.10
orb--3  r 6%   omega 0.182 rad/s   phase 2.31
orb--4  r 5%   omega 0.218 rad/s   phase 3.47
orb--5  r 4.5% omega 0.260 rad/s   phase 4.62
orb--6  r 4%   omega 0.314 rad/s   phase 5.78
```

Frequencies are deliberately non-commensurate so the bloom never visibly repeats. Each orb is also given a faint `filter: brightness(0.92..1.08)` via its inline `--bri` custom property, set once in CSS and varied per orb to break perfect symmetry.

**Performance budget for the filter.** The `filter: blur(28px) contrast(18)` chain is expensive; therefore the bloom container is:
- a fixed pixel size that does NOT re-flow on scroll or resize-recalc,
- promoted to its own composited layer via `will-change: transform`,
- has `contain: paint`,
- the filter is declared in CSS **once** — the rAF loop animates `transform` on the `.bloom` container (a slow 40s hue-rotation drift) and per-orb `transform` (the orbit positions). Filter is never re-applied per frame.
- on `<= 900px` the bloom is shrunk: `width: min(120vw, 720px); height: min(120vw, 720px);` and `filter: blur(22px) contrast(16)` to keep mobile paint under budget.

**Hue drift.** A second slow animation is applied to the `.bloom` container itself: `animation: hue-drift 40s linear infinite` where `hue-drift` keyframes go `0% { filter: blur(28px) contrast(18) hue-rotate(0deg); } 50% { filter: blur(28px) contrast(18) hue-rotate(-14deg); } 100% { filter: blur(28px) contrast(18) hue-rotate(0deg); }`. The hue-rotate sits at the end of the filter chain so the chrome mass subtly tints warmer / cooler without changing position. The filter is set in keyframes, not per frame, so the compositor can keep caching it.

**Grain overlay.** A `.grain` element: `position:fixed; inset:-50%; width:200%; height:200%; pointer-events:none; z-index:5; opacity:0.07; mix-blend-mode: overlay;`. Background is an inline SVG `feTurbulence` rendered as a data-URI: `<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>`, `background-size: 180px 180px;`. Animation: `grain 1.1s steps(4) infinite` with keyframes jittering `transform: translate` among `(0,0) (-2%,1%) (1.5%,-2%) (-1%,2%)`. This is the second effect layer.

---

## C. LAYER STACK (back → front)

1. `html, body` — near-black `#0a0a0c`, forced twice (see Failure Guards).
2. `.vignette` — z-index 0, `position:fixed; inset:0; pointer-events:none;`, `background: radial-gradient(ellipse at 50% 50%, rgba(10,10,12,0) 0%, rgba(10,10,12,0) 55%, rgba(0,0,0,0.55) 90%, rgba(0,0,0,0.85) 100%);` — a deep edge falloff so the chrome bloom appears to float in a void.
3. `.bloom` — z-index 1, the 6-orb liquid-chrome composited layer (per Section B).
4. `.scrim` — z-index 2, a fixed `linear-gradient(180deg, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.12) 28%, rgba(10,10,12,0.10) 58%, rgba(10,10,12,0.78) 100%)` guaranteeing text contrast at the top and bottom of the frame.
5. `.page` — z-index 3, `position:relative; display:grid; grid-template-rows: auto 1fr auto; min-height:100dvh` (height:100dvh inside the desktop lock).
6. `.wordmark` sheen — z-index 4, the conic-gradient chrome sheen applied via `background-clip: text` on the h1 (described in section E).
7. `.grain` — z-index 5, the SVG feTurbulence overlay.

---

## D. TOKEN TABLE (defaults at ~1440px)

```
--bg:            #0a0a0c
--bg-2:          #14141a
--text:          #f4ecdc
--text-soft:     #d6c9a8
--muted:         #8b8474
--dim:           #56524a
--accent:        #e9d8a6
--accent-warm:   #f6e2a0
--accent-deep:   #a07a2a
--line:          rgba(244,236,220,0.16)
--line-soft:     rgba(244,236,220,0.08)
--chrome-hi:     #ffffff
--chrome-mid:    #e9d8a6
--chrome-lo:     #2a1d0a
--logo:          15px
--nav:           13.5px
--nav-h:         36px
--btn:           13.5px
--btn-h:         44px
--eyebrow:       12px
--h1:            clamp(64px, 9.4vw, 156px)
--h1-min:        44px
--h1-max:        168px
--lede:          17px
--foot:          12.5px
--header-y:      26px
--header-x:      44px
--hero-x:        44px
--hero-y:        48px
--copy-max:      1080px
--lede-max:      560px
--radius-pill:   999px
--radius-soft:   14px
--focus-w:       2px
--focus-offset:  4px
--bloom-blur:    28px
--bloom-contrast:18
--orb-1:         42%
--orb-2:         34%
--orb-3:         30%
--orb-4:         26%
--orb-5:         22%
--orb-6:         18%
--ease-out:      cubic-bezier(0.16,1,0.3,1)
--enter-dur:     0.95s
--soft-dur:      1.15s
--drift-dur:     40s
--grain-dur:     1.1s
--serif:         "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif
--sans:          "Inter", system-ui, -apple-system, "Segoe UI", sans-serif
```

Fonts (Google Fonts ONLY, with the fallbacks listed): `Cormorant+Garamond:ital,wght@1,400;1,500;1,600` and `Inter:wght@400;500;600`, loaded with one `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` and one stylesheet link with `display=swap`.

---

## E. THE COMPOSITION — exact build order

**.page** is the grid container with three rows: `<header>`, `<main>`, `<footer>`.

**HEADER** — `padding: var(--header-y) var(--header-x) 0; display:flex; align-items:center; justify-content:space-between; gap:24px`.

- Left: `a.brand` (href `#`, accessible name "Bloom home"). It contains an inline SVG monogram 22×22 — a small chrome droplet: `<svg viewBox="0 0 22 22" width="22" height="22" aria-hidden="true"><defs><radialGradient id="bm" cx="35%" cy="30%" r="70%"><stop offset="0%" stop-color="#ffffff"/><stop offset="22%" stop-color="#f6e2a0"/><stop offset="55%" stop-color="#a07a2a"/><stop offset="100%" stop-color="#0a0703"/></radialGradient></defs><circle cx="11" cy="11" r="9" fill="url(#bm)"/></svg>` — followed by the wordmark text `bloom` in `var(--serif)`, italic, `font-size: var(--logo); font-weight:500; color: var(--text); letter-spacing:0.01em; font-style: italic`.
- Centre: `nav` with exactly 3 links: `work`, `studio`, `journal`. Each `href="#"`, `var(--sans)`, `font-size: var(--nav); color: var(--muted); font-weight:500; letter-spacing: 0.02em;`. Height `var(--nav-h)`, `display:flex; align-items:center; gap: 32px;`. Hover: `color: var(--text); transition: color 0.22s var(--ease-out);`.
- Right: `a.cta` (href `#`, accessible name "Start a project"), text `Start a project`. Style: `display:inline-flex; align-items:center; height: var(--btn-h); padding: 0 22px; border-radius: var(--radius-pill); font-family: var(--sans); font-size: var(--btn); font-weight: 500; letter-spacing: 0.01em; color: #14110a; background: linear-gradient(180deg, #fbf2cf 0%, var(--accent) 48%, var(--accent-deep) 100%); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 18px 44px rgba(233,216,166,0.18), inset 0 1px 0 rgba(255,255,255,0.55);`. Hover: `transform: translateY(-1px); box-shadow: 0 22px 56px rgba(233,216,166,0.26), inset 0 1px 0 rgba(255,255,255,0.7); background: linear-gradient(180deg, #ffffff 0%, #f6e2a0 50%, #c89a3a 100%);` over 0.24s `var(--ease-out)`.

**MAIN (hero)** — `display:flex; flex-direction:column; justify-content:center; align-items:center; padding: var(--hero-y) var(--hero-x) calc(var(--hero-y) + 24px); width:100%; max-width: var(--copy-max); margin: 0 auto; text-align:center; min-width:0;`. Vertically centred within the 1fr row.

1. `.eyebrow` — `var(--sans)`, `font-size: var(--eyebrow); color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; margin: 0;`. Exact copy: `Generative Brand Foundry · Est. 2024`. The middle dot is `color: var(--dim)`.
2. `h1` — EXACTLY ONE `<h1>`, `var(--serif)`, italic, `font-weight: 500; font-size: var(--h1); line-height: 0.96; letter-spacing: -0.025em; color: var(--text); margin: 24px 0 0; text-wrap: balance;`. The conic-gradient chrome sheen is applied to the h1 element via `background: conic-gradient(from 220deg at 50% 50%, #fbf2cf 0deg, #e9d8a6 70deg, #b08a3a 140deg, #f6e2a0 220deg, #ffffff 290deg, #a07a2a 340deg, #fbf2cf 360deg); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;`. The text is also given `text-shadow: 0 1px 0 rgba(0,0,0,0.35);` for legibility on bright bloom moments. The conic gradient is slowly rotated via `@keyframes sheen { from { background-position: 50% 50%; } to { background-position: 50% 50%; } }` — the sheen does NOT visibly animate (the wordmark stays reading as a single chrome surface); rotation is implicit because the conic is drawn around the text bounding box, not the viewport. Exact copy, a single line, max 2 lines on narrow screens: `Brands, in liquid metal.`
3. `.lede` — `var(--sans)`, single paragraph, `font-size: var(--lede); line-height: 1.55; color: var(--text-soft); margin: 22px auto 0; max-width: var(--lede-max); font-weight: 400; letter-spacing: 0.002em;`. Exact copy: `Bloom designs living identity systems — marks, type, motion and chrome — for studios that ship faster than the brand book can keep up.`

**FOOTER** — `padding: 18px var(--header-x) 22px; display:flex; align-items:center; justify-content:space-between; gap: 20px; border-top: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,0.55) 100%);`.

- Left: mono-styled `var(--foot)`, `color: var(--muted); font-family: var(--sans); font-weight: 500; letter-spacing: 0.01em;`. Exact copy: `© 2026 Bloom Studio`.
- Centre: a single `span.foot-mark` — `color: var(--muted); font-size: var(--foot); font-family: var(--sans); font-weight: 500;` with a 6×6 `display:inline-block; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(233,216,166,0.55); margin-right: 8px; vertical-align: 1px;` and the text `Now booking · Q2 2026`.
- Right: exactly 3 links `dribbble`, `instagram`, `are.na`. `var(--sans)`, `var(--foot)`, `color: var(--muted); font-weight: 500; letter-spacing: 0.01em;`, `gap: 22px`, `href="#"`. Hover: `color: var(--text); transition: color 0.22s var(--ease-out);`.

---

## F. THE UI LANGUAGE

There is exactly ONE button style in the page (the header CTA) — the chrome-pill: 999px radius, 1px `rgba(255,255,255,0.18)` border, a 3-stop linear gradient `#fbf2cf → #e9d8a6 → #a07a2a`, dark text `#14110a`, outer accent glow, inner top highlight. Hover: lift -1px, swap to a brighter gradient, deepen the glow over 0.24s `var(--ease-out)`. Nav links are plain sans text — no pills, no backgrounds, no underline ever; hover swaps colour to `var(--text)`. Footer links: same treatment in `var(--foot)`. Eyebrow is a tracking-heavy small-caps accent line. Selection: `::selection { background: rgba(233,216,166,0.30); color: #14110a; }`. Every interactive element gets `:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: var(--focus-offset); border-radius: 6px; }`. No element on the page ever shows a default blue focus ring or a text underline.

---

## G. MOTION — entrance stagger + named keyframes

All entrance animations: `animation-duration: var(--enter-dur); animation-fill-mode: both; animation-timing-function: var(--ease-out); animation-delay: var(--d, 0.08s)`. The `.appear` class is applied to each animated element with a modifier class selecting keyframes and an inline `--d`.

Stagger table (element → modifier → --d):
```
brand             appear--fade   0.08s
nav link 1 work   appear--fade   0.16s
nav link 2 studio appear--fade   0.22s
nav link 3 journal appear--fade  0.28s
header cta        appear--lift   0.34s
eyebrow           appear--soft   0.50s
h1                appear--bloom  0.66s   (duration 1.20s)
lede              appear--soft   0.96s   (duration 1.10s)
footer left       appear--fade   1.18s
footer centre     appear--fade   1.24s
footer right      appear--fade   1.30s
```

Named keyframes (all end at opacity 1 / identity transform):
```
in-fade   from { opacity: 0 }                                            to { opacity: 1 }
in-soft   from { opacity: 0; transform: translateY(12px) }               to { opacity: 1; transform: none }
in-lift   from { opacity: 0; transform: translateY(10px) scale(0.97) }   to { opacity: 1; transform: none }
in-bloom  from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(6px); }
           to  { opacity: 1; transform: none; filter: blur(0); }
```

The H1 `in-bloom` rise mirrors the way a molten form settles — the type enters with a faint blur that resolves into the chrome sheen. The CTA `in-lift` carries the only transform:translateY + scale on a button.

Continuous keyframes:
- `hue-drift` — see Section B. 40s, linear, infinite. Sits on `.bloom`. The filter is declared in keyframes (so it is cached by the compositor), not re-applied by JS.
- `grain` — see Section B. 1.1s, steps(4), infinite. Sits on `.grain`. Only `transform` is animated.
- `sheen` — declared on the h1 so the conic gradient's `background-position` is animated; in practice the conic is fixed relative to the text bounding box so the visible effect is a stable chrome surface with a barely-perceptible highlight drift. `0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } ` over 18s linear infinite. If this risks distracting from the wordmark it may be removed; the wordmark still reads as chrome without it.

The orb orbits, the hue-drift, the grain, and the sheen run continuously, independent of the entrance stagger. The orb orbit positions are written by JS per rAF tick (see Section J).

---

## H. RESPONSIVE TABLE — exact token overrides per breakpoint

```
>= 1600px:
  --h1-max: 188px  --logo: 16px  --nav: 14px  --nav-h: 38px
  --btn: 14px  --btn-h: 46px  --lede: 18px  --foot: 13px
  --header-y: 32px  --header-x: 60px  --hero-x: 60px
  --copy-max: 1240px  --lede-max: 620px

>= 1920px:
  --h1-max: 220px  --header-x: 76px  --hero-x: 76px
  --copy-max: 1380px  --header-y: 38px  --lede: 19px

1280px – 1599px:
  --h1-max: 168px  --header-x: 48px  --hero-x: 48px
  --copy-max: 1120px

901px – 1279px:
  --h1-min: 56px  --h1-max: 132px  --nav-h: 34px
  --header-x: 32px  --hero-x: 32px
  --copy-max: 920px  --lede: 16px  --lede-max: 520px

>= 901px AND max-height 850px:
  --h1-min: 52px  --h1-max: 120px  --hero-y: 28px
  --header-y: 18px  --lede: 15px  (h1 margin-top 16px, lede margin-top 16px)

>= 901px AND max-height 720px:
  --h1-min: 44px  --h1-max: 96px  --hero-y: 18px
  --header-y: 14px  --eyebrow: 11px  --lede: 13.5px  --btn-h: 38px

>= 901px (desktop lock, all heights):
  html, body { height:100%; overflow:hidden }  .page { height:100dvh; overflow:hidden }
  .bloom { width: min(82vw, 1180px); height: min(82vw, 1180px);
           filter: blur(28px) contrast(18); }

<= 900px:
  no vh lock; page may scroll; nav becomes a full-viewport overlay menu:
  - header keeps brand + burger button (<button class="burger" aria-label="Open navigation" aria-expanded="false">, three 18×1.5px bars in var(--text), gap 5px)
  - .menu { position:fixed; inset:0; z-index:50; background: rgba(10,10,12,0.94);
            backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
            display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
            padding: 0 32px; gap: 26px;
            transform: translateY(-100%); transition: transform 0.45s var(--ease-out); }
  - .menu.open { transform: none }
  - menu shows the 3 nav links stacked at --nav: 22px plus the CTA pill
  - Escape key, link click, and resize >900px all close it
  --h1-min: 44px  --h1-max: 96px  --header-x: 24px  --hero-x: 24px
  --copy-max: 100%  --lede: 16px
  .bloom { width: min(120vw, 720px); height: min(120vw, 720px);
           filter: blur(22px) contrast(16); }
  .bloom { top: 56%; }   /* bias bloom down so wordmark reads on top of it */

<= 560px:
  --h1-min: 38px  --h1-max: 80px  --eyebrow: 11px
  --lede: 15px  --header-x: 20px  --hero-x: 20px
  footer becomes flex-direction:column; align-items:flex-start; gap:10px
  header CTA is hidden (it lives inside the menu on mobile)
  .bloom { width: min(160vw, 560px); height: min(160vw, 560px);
           filter: blur(20px) contrast(15); }
```

The orb sizes and orbital radii are CSS custom properties on the `.bloom` container; on <=900px they shrink to `--orb-1: 36%, --orb-2: 30%, --orb-3: 26%, --orb-4: 22%, --orb-5: 18%, --orb-6: 16%` and the JS orbit radii are divided by 1.3 so the metaball mass stays compact.

---

## I. FAILURE GUARDS — the page is never blank, never broken

1. **Black-first:** the FIRST CSS rule is `html, body { background:#0a0a0c !important; color:#f4ecdc }`; the body tag carries `style="background:#0a0a0c;color:#f4ecdc"`; a later rule restates `html, body { background:#0a0a0c; background: var(--bg, #0a0a0c) }`.
2. **Resting opacity is 1:** every `.appear` element's un-animated computed style is its final state (opacity 1, no transform). Animations use `fill-mode: both` only to hold the FROM state during the delay. If CSS animations fail or JS never runs, the page renders complete and readable. The 6 orbs sit at their base offsets in CSS (no animation needed) and JS only adjusts `transform`. If JS never runs, the bloom is still visible.
3. **rAF entrance fallback:** after two `requestAnimationFrame` ticks, for every `.appear` element check `el.getAnimations({ subtree: false })`; if none has `playState` `"running"` or `"finished"`, add `.is-in` to every `.appear` element. `.is-in { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important }`. If the browser lacks `getAnimations`, perform the same `.is-in` fallback after the two rAFs.
4. **Bloom fallback (no filter support):** if `CSS.supports('filter', 'blur(28px) contrast(18)')` returns false, JS adds `.no-bloom` to `<html>`. CSS must then show 6 absolutely-positioned CSS circles (no blur/contrast) with `opacity: 0.85; background: var(--accent-deep); border-radius: 50%;` so the wordmark still sits on a recognisable warm form. Page remains readable; telemetry `errors` receives a short string.
5. **Reduced motion:** inside `@media (prefers-reduced-motion: reduce)`: `*, *::before, *::after { transition: none !important; animation: none !important; }`; force `.appear` to `opacity:1 !important; transform: none !important; filter: none !important; clip-path: none !important`; the JS orbit loop still runs once (paints the initial frame, sets `ready = true`, increments `frames` by 1) and then `cancelAnimationFrame`s itself; the `.bloom` filter keyframe `hue-drift` is disabled by the universal rule; the grain animation is hidden. The static frame must still show the 6 orbs at their base offsets so the page reads as designed.
6. **No console output** in the happy path: no `console.log`, no thrown exceptions; every filter and animation property read is guarded.

---

## J. THE EXACT JS (only this, vanilla, one IIFE at end of body)

1. **Telemetry first, before anything else:**
   `window.__DEMO__ = { name: 'chrome-bloom', ready: false, frames: 0, effects: [], errors: [] };`
   Push `'liquid-chrome'`, `'conic-sheen'`, `'hue-drift'`, `'grain-texture'`, and `'mobile-menu'` into `effects` once implemented (in that order). Add `window.addEventListener('error', e => window.__DEMO__.errors.push(String(e.message || e)))`.
2. **Cache DOM references once:** `document.documentElement`, `.bloom`, all 6 `.orb` nodes (in order), `.grain`, `.burger`, `.menu`, all `.menu` links, and the result of `matchMedia('(prefers-reduced-motion: reduce)')`. Never call `getBoundingClientRect` inside the rAF loop. Cache the bloom container's `clientWidth` / `clientHeight` once at startup and recompute on resize only.
3. **Orbit data table** (read-only constant in JS): an array of 6 objects `{ baseXPct, baseYPct, radiusPct, omega, phase, sizePct }` matching the orb sizes and starting offsets in Section B. On resize, divide every `radiusPct` by the orb size factor appropriate to the current breakpoint (1.0 desktop, 1.3 mobile) so the metaball mass stays compact.
4. **rAF loop:** `requestAnimationFrame` reads `t = performance.now() / 1000`; for each of the 6 orbs, compute `x = baseX + radius * Math.cos(omega * t + phase)` and `y = baseY + radius * Math.sin(omega * t + phase)`; assign `orb.style.transform = `translate(${x.toFixed(2)}%, ${y.toFixed(2)}%)``. The bloom container transform is left to CSS keyframes. On the FIRST completed paint, set `window.__DEMO__.ready = true`. Increment `window.__DEMO__.frames` by exactly 1 each rAF tick. If `document.hidden`, skip the assignment and the paint, but keep the rAF alive. If `prefersReduced.matches`, paint exactly one frame then `cancelAnimationFrame` and return.
5. **Resize handler:** one `resizeQueued` boolean; on `window.resize` set the flag and call `requestAnimationFrame` once; in the rAF callback recompute the cached bloom `clientWidth` / `clientHeight`, recompute breakpoint, update orb radius factors. No timers, no `getBoundingClientRect` per frame.
6. **Entrance fallback:** after two nested `requestAnimationFrame` callbacks following `DOMContentLoaded`, iterate every `.appear` and check `el.getAnimations`; if no animation is running or finished, add `.is-in` to every `.appear`. If `getAnimations` is missing, add `.is-in` to every `.appear` after the same two rAFs.
7. **Mobile menu:** burger click toggles `.menu.open` and `aria-expanded`; `Escape` key closes; any menu link click closes; `window.resize` to width > 900px closes and clears `aria-expanded`.
8. **Feature support check:** at startup, if `CSS.supports('filter', 'blur(28px) contrast(18)')` is false, add `.no-bloom` to `<html>` and skip the rAF loop entirely; push a string into `errors` like `'filter-blur-contrast-unsupported'`.

No other JS. No libraries. No console calls. No `setTimeout` / `setInterval`. All motion is `requestAnimationFrame` or CSS keyframes.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Data Tide

- Slug: `data-tide`
- Page: https://landingpageprompts.com/prompts/data-tide
- Effect: A flowing ribbon field that reacts to a simulated signal, with a floating glass panel
- Model: `glm-5.3` (GLM-5.3 (glm-5.3)) on Workbuddy proxy
- Build tokens: 24,841; total with repair and cross-check: 51,633
- Verification: 20/20 automated checks passed
- Independent cross-check: confirmed (confidence high)
- Acceptance criteria:
  - the page contains exactly one <h1>, split into exactly 2 .headline-line elements each with overflow:hidden, and the footer contains exactly 3 .stat items
  - a #tide canvas exists with non-zero width and paints non-blank pixels, and window.__DEMO__.frames advances by at least 20 in 1.2s
  - the #metricValue textContent changes within 2.6s of load, and the #sparkLine points attribute contains exactly 48 coordinate pairs
  - no element overflows the viewport horizontally at 390, 768, 1440 and 1920 widths, and exactly one .glass panel exists
  - window.__DEMO__.effects includes 'ribbon-field', 'surge-envelope', 'metric-ticker' and 'glass-panel', and window.__DEMO__.errors is empty
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
DESIGN BRIEF — "Data Tide"

A. WHAT IS BEING BUILT

Build ONE complete, valid, self-contained 'index.html': a single-viewport dark landing page for
a fictional observability product called **Tide**. Document title (exact):
'Tide — See the whole signal'. '<html lang="en">'.

The page is: a deep blue-black ground (#05080d); a full-bleed PROCEDURAL ribbon field rendered
on a <canvas> as the cinematic backdrop (40 horizontal sine-summed 1px polylines that surge when
a travelling Gaussian envelope passes every 6 s); a fixed header with a liquid-metal pill nav; a
vertically centred hero with a two-line masked <h1>, a lede, two CTAs, and ONE floating glass
panel below the copy showing a fake live metric readout in monospace (ticks every 1.2 s) plus a
sparkline drawn in inline SVG; and a three-item stats footer. That is the whole page. One frame.
No scroll on desktop.

DO NOT BUILD — every one of these is a failure:
- No video, no WebGL, no Three.js, no Lottie, no GSAP, no jQuery, no React, no Tailwind CDN.
- No remote images, no .mp4/.webm/.gif, no base64 photo blobs, no third-party CDN of any kind.
  Google Fonts (preconnect + one stylesheet) is the ONLY network request.
- No extra sections, no feature cards, no logo strip, no pricing table, no testimonial, no FAQ,
  no form, no newsletter input, no cookie banner, no second panel, no chart other than the one
  sparkline, no footer beyond the three stats.
- No scroll indicator, no cursor blob, no custom scrollbar, no marquee, no typing effect.
- No vertical scrolling on desktop: at >=901px 'html, body { height:100%; overflow:hidden }'
  and '.page { height:100dvh; overflow:hidden }'. Scroll is permitted ONLY at <=900px.
- No text-shadow glows, no neon outlines on type, no drop shadows under the headline.
- No console.log / console.warn / console.error anywhere in the happy path; no uncaught
  exceptions; no network request other than Google Fonts.

B. THE BACKDROP — PROCEDURAL RIBBON FIELD

B.1 The canvas element
  <canvas id="tide" class="tide-canvas" aria-hidden="true"></canvas>
  CSS: position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0;
  pointer-events:none; (transparent — the body ground shows through; never paint the ground
  inside the canvas). It is fixed, not absolute, so it never moves during layout.

B.2 Resolution policy (implement exactly)
  const DPR = Math.min(window.devicePixelRatio || 1, 2);          // cap DPR at 2
  plus a backing-store clamp: if (iw * ih * DPR * DPR > 3,400,000) lower DPR to
  DPR = Math.sqrt(3400000 / (iw * ih)). Then:
    canvas.width  = Math.max(1, Math.round(innerWidth  * DPR));
    canvas.height = Math.max(1, Math.round(innerHeight * DPR));
    ctx.setTransform(DPR, 0, 0, DPR, 0, 0);   // ALL drawing math stays in CSS pixels
  Lines are 1px and must stay crisp, so render at full clamped DPR (no half-resolution trick).
  Recompute on resize with a 150 ms debounce, and on orientationchange.

B.3 Determinism — a seeded PRNG, not Math.random
  The field must be identical on every load and across implementations. Use mulberry32 seeded
  with 20260114:
    function mulberry32(a) { return function () { a |= 0; a = (a + 0x6D2B79F5) | 0;
      var t = Math.imul(a ^ (a >>> 15), 1 | a);
      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
      return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; }
    var rnd = mulberry32(20260114);
  Build exactly 40 ribbon records. For EACH ribbon i = 0..39, with u = i / 39, consume rnd()
  IN THIS EXACT ORDER (11 calls per ribbon; never reorder, never skip):
    1  mix   = rnd()        // colour mix along the blue->teal ramp
    2  alpha = rnd()        // base stroke alpha
    3  amp   = rnd()        // wave amplitude fraction
    4  p1    = rnd() * 6.28318
    5  p2    = rnd() * 6.28318
    6  p3    = rnd() * 6.28318
    7  w1    = 0.9  + 0.5  * rnd()     // rad/s
    8  w2    = 0.5  + 0.35 * rnd()
    9  w3    = 1.4  + 0.8  * rnd()
    10 bAmp  = rnd()        // vertical bob fraction
    11 bPh   = rnd() * 6.28318; bSp = 0.12 + 0.1 * rnd()   // bob speed from a 12th call
  Derived per ribbon (compute once, at build time, and PRE-BUILD BOTH STROKE STRINGS so the
  rAF loop performs ZERO string allocation):
    frac  = 0.07 + 0.86 * u                        // vertical anchor, even spread
    ampF  = 0.018 + 0.052 * amp                    // fraction of viewport height
    alphaF= 0.10 + 0.34 * alpha
    r     = Math.round(88 + 42 * mix); g = Math.round(138 + 62 * mix); b = Math.round(178 + 18 * mix)
    base  = 'rgba(r,g,b,alphaF)'                   // cool steel-blue -> dim teal
    hot   = 'rgba(58,224,198, min(0.72, alphaF * 1.7))'   // surge highlight colour
  The 'hot' string is built once with the numeric value baked in (toFixed(3)).

B.4 The wave shape (all in CSS px; W, H = innerWidth, innerHeight)
  Wavelengths scale with width: k1 = 2π / (0.30·W), k2 = 2π / (0.13·W), k3 = 2π / (0.055·W).
  Per ribbon, per sample x:
    base = frac·H + bAmp'·H · sin(bSp·t + bPh)          where bAmp' = 0.008 + 0.008·bAmp
    wave = 0.54·sin(k1·x − w1·t + p1)
         + 0.30·sin(k2·x + w2·t + p2)
         + 0.16·sin(k3·x − w3·t + p3)
    y    = base + ampF·H · env(x) · wave
  env(x) is the surge envelope (B.5). The three components travel in mixed directions (two
  rightward, one leftward) at incommensurate speeds, so the field never visibly repeats.

B.5 THE SURGE — a travelling Gaussian envelope, period exactly 6.0 s
    p   = (t mod 6.0) / 6.0
    cx  = (−0.15 + 1.30·p) · W                       // fully off-left at p=0, off-right at p=1
    σ   = 0.085 · W
    g(x)= exp(−0.5·((x−cx)/σ)²)
    env(x) = 0.30 + 2.30·g(x)
  At rest ribbons wobble at 30% amplitude; inside the envelope they lift to 260% — a visible
  surge sweeping left to right every 6 seconds, lifting exactly the ribbons it passes.

B.6 Two-pass stroke, per ribbon, per frame
  ctx.lineWidth = 1; ctx.lineCap = 'round'; ctx.lineJoin = 'round' (set once per frame).
  Pass 1 (full width): x from −STEP to W+STEP inclusive, step STEP = 10 CSS px at >900px width,
  STEP = 14 at <=900px. strokeStyle = ribbon.base. One beginPath + moveTo + lineTo… + stroke.
  Pass 2 (surge highlight, only when the window intersects the canvas):
    window = [cx − 2.6σ, cx + 2.6σ] clamped to [−STEP, W+STEP]; same sampling step; same y
    formula; strokeStyle = ribbon.hot (teal #3ae0c6, brighter alpha). This makes the surge read
    as a bright band of tide moving through the field.
  Draw count: DRAWN = 26 ribbons when innerWidth <= 900, else all 40 (the array still holds 40;
  only the drawn count changes, so resizing never re-seeds).
  Budget: 40 ribbons × ~148 samples × 2 passes ≈ 11,800 lineTo per frame at 1440px — trivial.
  Cap the frame rate: skip the draw when (ts − lastDraw) < 15.5 ms. Clamp dt to 0.05 s so a tab
  switch cannot teleport the field. If document.hidden, cancel the rAF and restart on
  visibilitychange (reset the last-timestamp so dt starts clean).
  Each rAF tick increments window.__DEMO__.frames — including ticks whose draw is skipped.

B.7 Scrim (CSS, above canvas, below content)
  .tide-scrim is a fixed div at z-index:1 with pointer-events:none and:
    background:
      radial-gradient(72% 60% at 50% 46%, rgba(5,8,13,0.62) 0%, rgba(5,8,13,0.38) 46%,
                      rgba(5,8,13,0) 100%),
      linear-gradient(180deg, rgba(5,8,13,0.60) 0%, rgba(5,8,13,0.10) 16%, rgba(5,8,13,0) 34%,
                      rgba(5,8,13,0) 66%, rgba(5,8,13,0.14) 84%, rgba(5,8,13,0.64) 100%);
  The centre ellipse is load-bearing: the hero copy and the glass panel sit inside it, so text
  contrast wins no matter how bright the surge is. The top ramp protects the header; the bottom
  ramp protects the stats. Values are not adjustable upward.

B.8 Grain: SVG feTurbulence at 5%, static (zero per-frame cost)
  Inline (NOT a data URI, NOT remote):
    <svg class="grain-svg" aria-hidden="true" focusable="false">
      <filter id="tideGrain" x="0" y="0" width="100%" height="100%">
        <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3"
                      stitchTiles="stitch" seed="11" result="n"/>
        <feColorMatrix type="saturate" values="0"/>
      </filter>
      <rect width="100%" height="100%" filter="url(#tideGrain)"/>
    </svg>
  CSS: .grain-svg { position:fixed; inset:-4%; width:108%; height:108%; z-index:100;
       opacity:0.05; mix-blend-mode:soft-light; pointer-events:none;
       animation:grain-drift 7s steps(7, end) infinite; will-change:transform; }
    @keyframes grain-drift {
      0%   { transform: translate3d(0,0,0) }       14.3% { transform: translate3d(-1.1%, 0.9%, 0) }
      28.6%{ transform: translate3d(0.8%, -1.2%, 0) } 42.9% { transform: translate3d(-0.6%, -0.7%, 0) }
      57.1%{ transform: translate3d(1.0%, 0.6%, 0) } 71.4% { transform: translate3d(-0.9%, 1.1%, 0) }
      85.7%{ transform: translate3d(0.5%, -0.5%, 0) } 100% { transform: translate3d(0,0,0) } }

C. THE LAYER STACK (back -> front), with z-index

  z 0    html, body            background:#05080d (see failure guards)
  z 0    #tide                 fixed canvas, the ribbon field (transparent)
  z 1    .tide-scrim           fixed vignette/scrim gradients
  z 2    .page                 position:relative; display:grid; grid-template-rows:auto 1fr auto;
                               min-height:100dvh; (desktop lock: height:100dvh; overflow:hidden)
  auto   header / main / footer  children of .page, no z-index of their own
  z 100  .grain-svg            feTurbulence grain, 5%, soft-light
  Nothing else may create a stacking context above z 2 inside .page. The mobile menu overlay,
  when open, sits at z-index:90 (below grain, above .page). The glass panel's
  backdrop-filter samples the canvas and scrim beneath it — this is intended.

D. TOKEN TABLE (declare all of these on :root; default values are the ~1440px design)

  Colour
    --bg: #05080d
    --text: #ffffff
    --muted: #9aa7b2              (8.1:1 on #05080d — safe for the lede)
    --stat: #d3dae2
    --accent: #3ae0c6
    --warn: #f5b04a               (latency-up delta chip)
    --border: rgba(255,255,255,0.16)
    --border-soft: rgba(255,255,255,0.12)
    --pill-line: rgba(198,208,220,0.55)
    --pill-line-hover: rgba(235,242,248,0.9)
    --glass-hi: rgba(16,26,38,0.55)
    --glass-lo: rgba(8,13,20,0.34)
    --grain-opacity: 0.05
    --focus: rgba(94,230,210,0.9)

  Type
    --logo: 15.5px
    --logo-mark: 22px
    --nav: 14px
    --nav-h: 40px
    --btn: 13.5px
    --btn-h: 40px
    --h1: 46px
    --lede: 15.5px
    --badge: 12.5px
    --stat-size: 13.5px
    --panel-value: 40px           (big monospace readout)
    --panel-label: 12.5px
    --panel-mono: 12px
    --spark-h: 56px

  Space / geometry
    --header-y: 22px
    --header-x: 40px
    --stats-x: 72px
    --stats-y: 36px
    --badge-mb: 24px
    --h1-mb: 20px
    --lede-mb: 28px
    --actions-mb: 34px
    --copy-max: 860px
    --lede-max: 500px
    --panel-w: 560px
    --panel-pad: 22px
    --panel-gap: 12px
    --panel-radius: 18px
    --nav-gap: 10px
    --cta-gap: 14px
    --hero-btn-gap: 12px
    --stat-gap: 36px

  Fonts
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif
    --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino,
                  Georgia, serif
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
  Load with <link rel="preconnect" href="https://fonts.googleapis.com">,
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>, and ONE
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Instrument+Serif:ital@1&family=IBM+Plex+Mono:wght@400;500&display=swap">.
  If the request fails the system fallbacks above must still look intentional.

E. THE COMPOSITION — build order

E.1 <body style="background:#05080d;color:#fff"> (inline attribute, belt and braces).
    Also body { overflow-x:hidden } at every breakpoint — horizontal overflow is forbidden.

E.2 <header class="site-header">
    padding: var(--header-y) var(--header-x); display:flex; align-items:center; gap:16px;
    .brand { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none }
      .brand-mark { width:var(--logo-mark); height:var(--logo-mark); flex:0 0 auto }
        An INLINE SVG, viewBox="0 0 22 22": three horizontal wave paths, stroke
        stroke="url(#tideGrad)" stroke-width="1.5" fill="none" stroke-linecap="round":
          M3 6.5 C6 4.5, 9.5 8.5, 12.5 6.5 S18 4.5, 19.5 6.5   (opacity 1)
          M3 11  C6 9,   9.5 13,   12.5 11  S18 9,   19.5 11   (opacity 0.66)
          M3 15.5 C6 13.5, 9.5 17.5, 12.5 15.5 S18 13.5, 19.5 15.5 (opacity 0.38)
        where #tideGrad is a linearGradient x1=0 y1=0 x2=1 y2=0 with stops
        #3ae0c6 -> #6aa8ff. aria-hidden="true" (the wordmark carries the name).
      .brand-word { font-size:var(--logo); letter-spacing:0.14em; text-transform:uppercase;
                    font-weight:500; white-space:nowrap }   -> text "Tide"
    nav.nav-desktop { margin-left:auto; display:flex; align-items:center; gap:var(--nav-gap) }
      ul { display:flex; align-items:center; gap:var(--nav-gap); list-style:none; margin:0; padding:0 }
      Four <a class="pill appear"> links, in this order and with these EXACT strings:
        "Product"  "Integrations"  "Pricing"  "Docs"
      Then <a class="btn btn-ghost btn-sm appear"> with the string "Start free", separated
      from the last pill by var(--cta-gap).
    button.burger (hidden at >=901px): 40x40, aria-label="Open menu", aria-expanded="false",
      aria-controls="mobile-menu", border:1px solid var(--border), border-radius:7px,
      background:transparent; three 1px x 16px white bars (spans) at 6px vertical spacing.

E.3 <main class="hero">
    CSS: .hero { display:flex; flex-direction:column; align-items:center; justify-content:center;
                 padding:8px 24px 20px; min-height:0 }
    .hero-inner { width:100%; max-width:var(--copy-max); margin:0 auto; text-align:center;
                  display:flex; flex-direction:column; align-items:center }
    At >=901px only, .hero-inner { transform:translateY(-1.5vh) } (optical centring).
    Children, in order:
      1. p.badge.appear
            inline-flex; align-items:center; gap:8px; margin:0 0 var(--badge-mb);
            font-size:var(--badge); letter-spacing:0.08em; text-transform:uppercase;
            color:var(--muted);
            .badge-dot { width:5px; height:5px; border-radius:50%; background:var(--accent);
                         box-shadow:0 0 10px rgba(58,224,198,0.75);
                         animation:badge-pulse 2.4s ease-in-out infinite }
            Copy (exact): "New — Tide Signal Engine v2"
      2. h1.hero-title  (the ONLY h1 on the page)
            font-size:var(--h1); font-weight:500; letter-spacing:-0.045em; line-height:1.12;
            margin:0 0 var(--h1-mb); color:var(--text);
            Exactly TWO <span class="headline-line"> children, each display:block;
            overflow:hidden; padding:0.06em 0.15em 0.14em; (the padding stops the italic serif
            and the descenders from being clipped by the mask):
              Line 1:  All your signals,
              Line 2:  one <em>living</em> tide.
            em { font-family:var(--font-serif); font-style:italic; font-weight:400;
                 font-size:1.08em; letter-spacing:-0.03em; color:var(--muted) }   <-- NOT white
      3. p.lede.appear
            max-width:var(--lede-max); margin:0 0 var(--lede-mb); font-size:var(--lede);
            line-height:1.62; color:var(--muted);
            Copy (exact): "Tide streams millions of datapoints a second into one living ribbon
            field — so latency, errors and saturation show up as motion you can read before
            they become incidents."
      4. div.hero-actions { display:flex; gap:var(--hero-btn-gap); justify-content:center;
                            align-items:center; flex-wrap:wrap; margin-bottom:var(--actions-mb) }
            a.btn.btn-solid.appear -> "Start streaming"
            a.btn.btn-line.appear  -> "Book a live demo"
      5. THE GLASS PANEL — three nested elements (entrance / float / tilt must never share a
         transform, so each gets its own node):
           div.panel-wrap.appear.appear--panel    (entrance animation + perspective)
             div.panel-float                      (infinite idle float)
               div.glass                          (JS-driven tilt via custom props)
         .panel-wrap { width:100%; max-width:var(--panel-w); perspective:1200px }
         .panel-float { animation:panel-float 9s ease-in-out infinite;
                        @keyframes panel-float { 0%,100% { transform:translateY(0) }
                                                 50% { transform:translateY(-5px) } } }
         .glass { position:relative; border-radius:var(--panel-radius);
                  padding:var(--panel-pad); display:flex; flex-direction:column;
                  gap:var(--panel-gap);
                  background:linear-gradient(160deg, var(--glass-hi) 0%, var(--glass-lo) 100%);
                  backdrop-filter:blur(22px) saturate(1.4);
                  -webkit-backdrop-filter:blur(22px) saturate(1.4);
                  box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 4px 18px rgba(0,0,0,0.32);
                  transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
                  will-change:transform; }
         THE 1PX GRADIENT BORDER — the mask trick, on .glass::before:
           content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
           pointer-events:none;
           background:linear-gradient(135deg, rgba(255,255,255,0.42) 0%,
                        rgba(255,255,255,0.10) 28%, rgba(58,224,198,0.38) 58%,
                        rgba(255,255,255,0.16) 100%);
           -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
           -webkit-mask-composite:xor; mask-composite:exclude;
         Inner sheen on .glass::after: content:""; position:absolute; inset:0;
           border-radius:inherit; pointer-events:none;
           background:linear-gradient(180deg, rgba(255,255,255,0.09) 0%, transparent 34%);
         Panel content, in order (all rows width:100%):
           a) .glass-head { display:flex; justify-content:space-between; align-items:center }
              span.metric-label { font-family:var(--font-mono); font-size:var(--panel-label);
                color:var(--muted); letter-spacing:0.02em }  -> "ingest.pipeline.latency"
              span.live { display:inline-flex; align-items:center; gap:6px;
                font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.14em;
                color:var(--accent) }  -> "LIVE"  with span.live-dot (5px circle,
                background:var(--accent), box-shadow:0 0 8px rgba(58,224,198,0.8),
                animation:badge-pulse 2.4s ease-in-out infinite)
           b) .metric-row { display:flex; align-items:baseline; gap:10px }
              span#metricValue.metric-value { font-family:var(--font-mono);
                font-size:var(--panel-value); font-weight:500; letter-spacing:-0.02em;
                color:#ffffff; font-variant-numeric:tabular-nums; line-height:1.05 }
                -> initial text "238.6"
              span.metric-unit { font-family:var(--font-mono); font-size:14px;
                color:var(--muted) } -> "ms"
              span#metricDelta.metric-delta { margin-left:auto; font-family:var(--font-mono);
                font-size:12px; padding:3px 8px; border-radius:6px; white-space:nowrap }
                -> initial text "▾ 1.2%"
                .metric-delta.down { color:var(--accent); background:rgba(58,224,198,0.10) }
                .metric-delta.up   { color:var(--warn);   background:rgba(245,176,74,0.12) }
           c) the sparkline — INLINE SVG, exact markup:
              <svg class="spark" viewBox="0 0 480 56" preserveAspectRatio="none" role="img"
                   aria-label="Latency sparkline over the last 48 samples">
                <defs><linearGradient id="sparkFill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stop-color="#3ae0c6" stop-opacity="0.20"/>
                  <stop offset="100%" stop-color="#3ae0c6" stop-opacity="0"/>
                </linearGradient></defs>
                <path id="sparkArea" fill="url(#sparkFill)"/>
                <polyline id="sparkLine" fill="none" stroke="#3ae0c6" stroke-width="1.5"
                          vector-effect="non-scaling-stroke" stroke-linejoin="round"
                          stroke-linecap="round"/>
                <circle id="sparkDot" r="2.5" fill="#3ae0c6"/>
              </svg>
              .spark { display:block; width:100%; height:var(--spark-h); min-width:0 }
           d) .glass-foot { display:flex; justify-content:space-between; gap:8px 14px;
              flex-wrap:wrap; font-family:var(--font-mono); font-size:var(--panel-mono);
              color:var(--muted) }
              Exactly three spans, each .sub with a <b> child (color:#d3dae2; font-weight:500;
              font-variant-numeric:tabular-nums):
                <b id="subP50">184</b> p50 ms
                <b id="subP95">410</b> p95 ms
                <b id="subErr">0.03</b>% err
         The panel must be keyboard-independent (no focusable controls inside it) and its
         ticking numbers must NOT be in any aria-live region.

E.4 <footer class="stats">
    padding:0 var(--stats-x) var(--stats-y);
    ul { display:flex; align-items:center; justify-content:center; gap:var(--stat-gap);
         flex-wrap:wrap; list-style:none; margin:0; padding:0 }
    Exactly THREE <li class="stat appear"> items:
      <b>2.4M</b> datapoints per second
      <b>140+</b> native integrations
      <b>38ms</b> p50 query latency
    .stat { font-size:var(--stat-size); color:var(--stat); letter-spacing:0.01em;
            display:inline-flex; gap:7px; align-items:baseline; white-space:nowrap }
    .stat b { color:#ffffff; font-weight:500; font-variant-numeric:tabular-nums }

E.5 Mobile menu (<=900px only)
    div#mobile-menu.mobile-menu[hidden] — position:fixed; inset:0; z-index:90;
    background:rgba(4,8,13,0.72); backdrop-filter:blur(18px) saturate(1.2);
    -webkit-backdrop-filter:blur(18px) saturate(1.2);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    Contains the same four links at font-size:22px plus "Start free" as a solid button.
    Toggled by .burger; closed by: clicking any link, pressing Escape, or a resize to >=901px.
    When open: body gets .menu-open { overflow:hidden } and aria-expanded flips to "true".

F. THE UI LANGUAGE

F.1 Liquid-metal pill (.pill) — the nav links
    display:inline-flex; align-items:center; justify-content:center;
    height:var(--nav-h); padding:0 18px; border-radius:7px;
    overflow:hidden; position:relative; isolation:isolate;
    border:1px solid var(--pill-line);
    background:linear-gradient(105deg, #05070a 0%, #252c36 48%, #414b58 100%);
    color:#e9edf2; font-size:var(--nav); font-weight:500; letter-spacing:0.005em;
    text-decoration:none; transition:border-color .35s ease, background .35s ease,
                                  box-shadow .35s ease, color .35s ease;
    .pill::before { content:""; position:absolute; inset:-1px; z-index:-1;
      background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 50%,
                                 transparent 70%);
      transform:translateX(-120%); transition:transform .6s ease }
    .pill:hover::before { transform:translateX(120%) }
    .pill:hover { border-color:var(--pill-line-hover); color:#ffffff;
      background:linear-gradient(105deg, #0e1319 0%, #333e4c 45%, #5b6a7a 100%);
      box-shadow:0 0 18px rgba(160,210,230,0.16) }
    .pill:focus-visible { outline:2px solid var(--focus); outline-offset:3px }

F.2 Buttons (.btn)
    display:inline-flex; align-items:center; justify-content:center;
    height:var(--btn-h); padding:0 20px; border-radius:7px;
    font-size:var(--btn); font-weight:500; letter-spacing:0.01em;
    text-decoration:none; cursor:pointer; border:1px solid transparent;
    transition:transform .3s ease, background .3s ease, border-color .3s ease,
               box-shadow .3s ease, color .3s ease;
    .btn-solid { background:linear-gradient(105deg, #e8eef2 0%, #ffffff 52%, #d3dce2 100%);
                 color:#06090d; border-color:rgba(255,255,255,0.5) }
    .btn-solid:hover { transform:translateY(-1px);
                 box-shadow:0 8px 26px rgba(160,200,225,0.20) }
    .btn-line  { background:rgba(255,255,255,0.02); color:#ffffff;
                 border-color:var(--border) }
    .btn-line:hover { border-color:rgba(255,255,255,0.42);
                 background:rgba(255,255,255,0.06) }
    .btn-ghost { background:linear-gradient(105deg, rgba(255,255,255,0.06) 0%,
                 rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.10) 100%);
                 color:#ffffff; border-color:var(--pill-line) }   // header CTA, matches pills
    .btn-sm { height:var(--btn-h); padding:0 16px; font-size:var(--btn) }
    Hover lift is translateY(-1px) ONLY — nothing bounces, nothing scales on hover.

F.3 Focus ring, global
    :focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:inherit }
    Never remove outlines; never set outline:0 without a replacement.

F.4 Anti-flash rule (first three rules of the stylesheet, in this order)
    1) html, body { background:#05080d !important; color:#ffffff; }
    2) (the inline body attribute from E.1)
    3) html, body { background:#05080d; background:var(--bg, #05080d); margin:0; padding:0;
                    font-family:var(--font-sans); -webkit-font-smoothing:antialiased;
                    text-rendering:optimizeLegibility; }

G. MOTION

G.1 Entrance system
    .appear { opacity:1 }                        // RESTING STATE IS VISIBLE — see I
    .appear { animation-duration:1.05s; animation-fill-mode:both;
              animation-timing-function:cubic-bezier(0.16,1,0.3,1);
              animation-delay:var(--d, 0.08s); }
    .is-in { animation:none !important; opacity:1 !important; transform:none !important;
             clip-path:none !important; filter:none !important; }

G.2 Stagger table (element -> animation -> --d)
    brand            in-scale   0.08s
    nav pill 1       in-scale   0.16s
    nav pill 2       in-soft    0.28s
    nav pill 3       in-scale   0.40s
    nav pill 4       in-soft    0.52s
    header CTA       in-scale   0.34s
    badge            in-pop     0.22s
    h1 line 1        in-mask    0.42s
    h1 line 2        in-mask    0.62s
    lede             in-soft    0.82s   (animation-duration:1.25s)
    solid CTA        in-btn     0.96s
    line CTA         in-side    1.10s
    glass panel      in-panel   1.20s   (animation-duration:1.15s, on .panel-wrap only)
    stat 1           in-stat    1.32s
    stat 2           in-stat    1.44s
    stat 3           in-stat    1.56s
    (the canvas has no entrance animation; it fades in once via .tide-canvas
     { animation:in-fade 2.2s ease both } with --d 0s)

G.3 Keyframes — every one ends at opacity 1 and the identity transform
    @keyframes in-fade  { from { opacity:0 } to { opacity:1 } }
    @keyframes in-scale { from { opacity:0; transform:scale(0.84) }
                          to   { opacity:1; transform:scale(1) } }
    @keyframes in-soft  { from { opacity:0; transform:translateY(14px) }
                          to   { opacity:1; transform:translateY(0) } }
    @keyframes in-mask  { from { opacity:0; transform:translateY(40%) }
                          to   { opacity:1; transform:translateY(0) } }   // clipped by .headline-line
    @keyframes in-pop   { 0%   { opacity:0; transform:scale(0.90) }
                          70%  { opacity:1; transform:scale(1.03) }
                          100% { opacity:1; transform:scale(1) } }
    @keyframes in-btn   { from { opacity:0; transform:translateY(18px) scale(0.94) }
                          to   { opacity:1; transform:translateY(0) scale(1) } }
    @keyframes in-side  { from { opacity:0; transform:translateX(22px) }
                          to   { opacity:1; transform:translateX(0) } }
    @keyframes in-stat  { from { opacity:0; transform:translateY(20px) }
                          to   { opacity:1; transform:translateY(0) } }
    @keyframes in-panel { from { opacity:0; transform:translateY(26px) scale(0.97) }
                          to   { opacity:1; transform:translateY(0) scale(1) } }
    @keyframes badge-pulse { 0%,100% { opacity:1; transform:scale(1) }
                             50%      { opacity:0.55; transform:scale(0.82) } }

G.4 Runtime motion (not entrance)
    panel-float: .panel-float translateY 0 -> -5px -> 0 over 9s ease-in-out, infinite.
    panel tilt: JS-driven, max 2deg, damped (see J). Never a CSS transition — the damping IS
    the animation.
    metric ticker: text swaps every 1200 ms with no transition (tabular numerics prevent
    layout jitter).
    The ribbon field runs continuously at <= 60 fps (see B.6).

H. RESPONSIVE TABLE — every breakpoint is a token override table

  >=1600px
    --logo:17px; --logo-mark:24px; --nav:15px; --nav-h:44px; --btn:15px; --btn-h:44px;
    --h1:56px; --lede:18px; --badge:13.5px; --stat-size:15px; --panel-value:46px;
    --panel-label:13.5px; --panel-mono:13px; --spark-h:64px; --header-y:28px; --header-x:64px;
    --stats-x:96px; --stats-y:44px; --copy-max:980px; --lede-max:560px; --panel-w:620px;
    --panel-pad:26px

  >=1920px
    --h1:64px; --lede:19px; --badge:14px; --stat-size:15.5px; --panel-value:52px; --panel-w:660px;
    --panel-pad:28px; --spark-h:68px; --header-y:30px; --header-x:72px; --stats-x:120px;
    --stats-y:52px; --copy-max:1060px; --lede-max:600px; --badge-mb:28px; --h1-mb:24px;
    --lede-mb:32px; --actions-mb:38px

  1280px – 1599px
    --h1:50px; --header-x:48px; --copy-max:900px; --panel-w:580px

  901px – 1279px
    --h1:40px; --nav-h:36px; --copy-max:760px; --lede-max:440px; --panel-w:520px;
    --panel-value:34px; --spark-h:48px; --stats-x:48px; --stat-gap:28px; --header-y:18px;
    --badge-mb:18px; --h1-mb:16px; --lede-mb:22px; --actions-mb:26px

  >=901px AND (max-height:850px)
    --h1:38px; --lede:14.5px; --panel-w:480px; --panel-value:32px; --spark-h:44px;
    --panel-pad:18px; --panel-gap:10px; --header-y:18px; --stats-y:26px; --badge-mb:16px;
    --h1-mb:14px; --lede-mb:18px; --actions-mb:22px

  >=901px AND (max-height:720px)
    --h1:32px; --lede:13.5px; --badge:11.5px; --panel-w:440px; --panel-value:26px;
    --panel-mono:11px; --panel-label:11.5px; --spark-h:32px; --panel-pad:14px; --panel-gap:8px;
    --panel-radius:14px; --header-y:14px; --stats-y:20px; --badge-mb:10px; --h1-mb:8px;
    --lede-mb:12px; --actions-mb:14px; --stat-gap:24px

  >=901px DESKTOP LOCK (apply in the same block)
    html, body { height:100%; overflow:hidden }
    .page { height:100dvh; overflow:hidden }
    ONE FRAME, NO SCROLL.

  <=900px  (phone + small tablet — scrolling IS allowed here)
    Remove the vh lock: html, body { height:auto; overflow-x:hidden; overflow-y:auto }
    .page { height:auto; min-height:100dvh }
    .nav-desktop { display:none }  .burger { display:inline-flex }
    .hero { justify-content:flex-start; padding:16px 20px 56px }  .hero-inner { transform:none }
    --h1:40px; --header-y:18px; --header-x:24px; --stats-x:24px; --stats-y:32px; --stat-gap:18px;
    --copy-max:640px; --lede-max:420px; --panel-w:100%; --panel-pad:18px; --panel-value:34px;
    --spark-h:48px; --badge-mb:18px; --h1-mb:16px; --lede-mb:22px; --actions-mb:26px
    Menu overlay per E.5.

  <=560px
    --h1:34px; --lede:15px; --badge:12px; --stat-size:12.5px; --header-x:18px; --stats-x:18px;
    --panel-pad:16px; --panel-value:30px; --spark-h:44px; --hero-btn-gap:10px
    .hero-actions { flex-direction:column; align-items:stretch; width:100% }
    .hero-actions .btn { width:100% }
    .headline-line { padding:0.06em 0.10em 0.14em }
    .stats ul { flex-direction:column; align-items:center; gap:10px }   // three stacked lines
  No horizontal overflow at 390px, 768px, 1440px or 1920px: never set a width wider than 100vw,
  keep .panel-wrap and .lede inside a 20px gutter, and let .headline-line shrink (it is a block,
  so it wraps rather than overflows). body keeps overflow-x:hidden everywhere as the backstop.

I. FAILURE GUARDS

  I.1 Resting opacity 1. '.appear { opacity:1 }' is the base rule; the animation only ever
      animates FROM 0. If CSS animations are unsupported, disabled, or interrupted, every
      element is already in its final state. The page is NEVER blank.
  I.2 animationend settlement. On each element's own 'animationend', add '.is-in' so the
      element drops the animation and keeps its end state (prevents any post-animation
      repaint from re-running the keyframe, and frees compositor layers).
  I.3 Two-rAF fallback. After two nested requestAnimationFrames from DOMContentLoaded, for
      every '.appear': if 'el.getAnimations().some(a => a.playState === "running" ||
      a.playState === "finished")' is false, add '.is-in'. Guard with
      'typeof el.getAnimations === "function"' — if absent, add '.is-in' to all.
  I.4 Canvas fallback. If 'canvas.getContext("2d")' returns null, hide #tide, keep the ground
      + scrim, set '__DEMO__.ready = true', push 'tide-canvas-fallback' into effects, and
      push nothing into errors. The rAF loop must STILL run (frames keeps counting), and the
      metric ticker, sparkline, entrance fallback and menu must still work — the page must
      still look finished (a dark page with a glass readout panel).
  I.5 Panel guards. Every getElementById for the panel is null-checked; a missing sparkline
      must not break the ticker. The tilt code only runs when
      matchMedia('(hover: hover) and (pointer: fine)').matches — never on touch.
  I.6 prefers-reduced-motion: reduce
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { transition:none !important; animation:none !important; }
        .appear, .headline-line, .badge-dot, .live-dot, h1 em { opacity:1 !important;
          transform:none !important; clip-path:none !important; filter:none !important; }
        .grain-svg, .panel-float { animation:none !important }
      }
      Canvas under reduced motion: draw ONE static frame with t = 0 and the surge envelope
      frozen at centre (cx = 0.5·W), then keep the rAF loop running ONLY to increment
      __DEMO__.frames (no dt advance, no draw, no tilt). The metric ticker and sparkline DO
      keep updating — they are a data readout, not motion. The visual result is a completely
      static, fully readable page; telemetry still advances.
  I.7 Contrast. --muted #9aa7b2 on #05080d is 8.1:1; --stat #d3dae2 and #fff are higher; the
      delta colours #3ae0c6 and #f5b04a are >= 9:1 on the glass. Never lower text opacity
      below these values.

J. THE JAVASCRIPT — exactly this much, nothing more

  One IIFE at the end of <body>, 'use strict'. Order: (1) telemetry first —
  window.__DEMO__ = { name:'data-tide', ready:false, frames:0, effects:[], errors:[] }, then a
  window 'error' listener pushing String(e.message || 'error'); (2) entrance settlement and the
  two-rAF fallback exactly per I.2/I.3; (3) mobile menu wiring exactly per E.5; (4) the seeded
  PRNG and the 40 ribbon records exactly per B.3 (12 rnd() calls per ribbon, exact order);
  (5) canvas sizing, draw, and the rAF loop per B.4-B.6 and subsection 8 below; (6) the metric
  ticker and sparkline; (7) the pointer tilt; (8) boot — size the canvas, draw once, set
  __DEMO__.ready = true after the first paint of the field, start the rAF loop. Use straight
  quotes in real JS, never the typographic quotes used in this prose.

  6. METRIC TICKER + SPARKLINE (ticks every 1.2 s)
    Cache by id: metricValue, metricDelta, subP50, subP95, subErr, sparkLine, sparkArea,
    sparkDot. Keep a ring buffer buf of NFULL = 48 samples. PREFILL it once at boot with the
    SAME rnd() stream (do not re-seed; the remaining stream after the ribbons is deterministic)
    using the recurrence v = min(322, max(178, prev + (rnd() - 0.5) * 22)), starting from
    v0 = 238.6 — so the chart renders FULL on first paint, never empty. renderPanel() writes
    everything (below). After prefill, call renderPanel() once, then setInterval(push, 1200).
    A push takes the last value, computes nv with the same clamp formula using
    (Math.random() - 0.5) * 22 (live randomness is fine here — the field's determinism is what
    matters), appends, drops the head past 48, and calls renderPanel().
    renderPanel():
      - metricValue.textContent = cur.toFixed(1)
      - delta: d = ((cur - prev) / prev) * 100; textContent = (d <= 0 ? '▾ ' : '▴ ') +
        Math.abs(d).toFixed(1) + '%'; classList.toggle('down', d <= 0) and ('up', d > 0).
      - subP50 = String(Math.round(cur * 0.77)); subP95 = String(Math.round(cur * 1.72));
        subErr = (0.02 + cur / 9000).toFixed(2).
      - sparkline: for each sample j, x = (j * 480) / 47; y = 50 - clamp((v - 170) / 160,
        0, 1) * 44; build the points string 'x,y' joined by spaces for #sparkLine; build
        #sparkArea d = 'M0,56' + 'Lx,y' for each sample + 'L480,56 Z'; set #sparkDot
        cx=480 and cy to the last y. All numbers toFixed(1).
    Every id lookup is null-checked; a missing sparkline must not break the ticker. The
    ticking numbers are NOT in any aria-live region.

  7. PANEL TILT — max 2deg, damped (I.5)
    Only when matchMedia('(hover: hover) and (pointer: fine)').matches AND !reduce.
    State: tX, tY (targets), cX, cY (current). On pointermove { passive:true } over window:
      nx = e.clientX / innerWidth; ny = e.clientY / innerHeight;
      tY = clamp((0.5 - nx) * 4, -2, 2);   // rotateY, leans toward pointer-x
      tX = clamp((ny - 0.5) * 4, -2, 2);   // rotateX, leans toward pointer-y
    window 'blur' resets tX = tY = 0. Inside the rAF loop each frame:
      cX += (tX - cX) * 0.08; cY += (tY - cY) * 0.08;   // 8% of the gap per frame = damped
      glass.style.setProperty('--tilt-x', cX.toFixed(3) + 'deg');
      glass.style.setProperty('--tilt-y', cY.toFixed(3) + 'deg');
    The tilt is clamped hard at ±2deg and driven by the damped custom properties only —
    never a CSS transition, the damping IS the animation. The glass element is cached once;
    if missing, tilt silently does nothing.

  8. CANVAS + rAF LOOP (parameters already pinned in B.2, B.4 - B.6 — do not deviate)
    resize(): apply B.2 (DPR cap + 3.4M pixel clamp, setTransform so drawing math stays in
    CSS px; DRAWN = iw <= 900 ? 26 : 40; STEP = iw <= 900 ? 14 : 10), then draw(reduce) once.
    Debounced 150 ms on resize; immediate on orientationchange.
    draw(still): ctx.clearRect (the canvas is transparent — the body ground shows through;
    never paint the ground inside the canvas), then the exact k1/k2/k3, σ, cx, envelope,
    two-pass strokes and surge-window clamp from B.4-B.6.
    frame(ts): rAF itself first; D.frames++ every tick; first tick initialises last/lastDraw
    and returns; dt = min((ts − last)/1000, 0.05); if reduce return AFTER incrementing frames;
    else t += dt, run the tilt damping step (7), skip the draw when (ts − lastDraw) < 15.5 ms,
    otherwise lastDraw = ts and draw(false).
    visibilitychange: hidden -> cancelAnimationFrame; visible -> reset last = 0 and restart.
  8b. Canvas failure (I.4): if getContext('2d') returns null, hide #tide, still boot the rAF
      loop (frames keep counting), the ticker/sparkline/menu/entrance must still work, and
      push 'tide-canvas-fallback' into effects. Push nothing into errors.

  9. Effects list — push each implemented effect name exactly once, in this order:
     'ribbon-field', 'surge-envelope', 'glass-panel', 'metric-ticker', 'sparkline-svg',
     'entrance-stagger', 'pill-shine', 'grain', then 'panel-tilt' only if tilt is active.
     (If the canvas failed, replace 'ribbon-field'/'surge-envelope' with
     'tide-canvas-fallback' in that position.)

  No console.log anywhere. No unhandled promise. No network request other than Google Fonts.
  No localStorage, no fetch, no timers other than the single 1200 ms ticker interval and the
  150 ms resize debounce. File size target: under 90 KB (this page should land around 24-32 KB).


---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Echo

- Slug: `echo`
- Page: https://landingpageprompts.com/prompts/echo
- Effect: A rotating sonar sweep lights phosphor contacts over expanding ping rings on canvas
- Model: `xiaomi/mimo-v2.6-pro` (Xiaomi MiMo v2.6 Pro (xiaomi/mimo-v2.6-pro)) on cmd-code
- Build tokens: 33,938; total with repair and cross-check: 70,579
- Verification: 20/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - exactly one <h1> split into exactly 2 masked line elements (.line > .line-inner) with text 'Sound sees' and 'what light cannot.', plus semantic header, nav, main, and footer landmarks
  - canvas#sonar paints non-blank content and keeps repainting (pixel hash changes across frames) at 1440x900, and the generated script never assigns ctx.filter or ctx.shadowBlur
  - window.__DEMO__ is initialized with name 'echo'; ready becomes true after the first painted frame; frames increments once per requestAnimationFrame tick; effects contains 'sonar-sweep', 'ping-rings', 'contact-blips', and 'range-graticule'; errors stays empty
  - exactly 3 nav links and 3 footer links exist with accessible names; no horizontal overflow at 390px, 768px, 1440px, or 1920px; at >=901px body has overflow:hidden and .page height is 100dvh
  - the document performs no network requests except Google Fonts, contains no external media or framework scripts, includes a prefers-reduced-motion reduce block leaving all content at opacity 1, and every anchor or button shows a visible :focus-visible ring
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. Build one complete valid index.html for a single-viewport landing page for a marine-robotics company named Echo. Document title: `Echo — Sonar Autonomy for the Deep`. Set `<html lang="en">`. ONE file only: plain HTML, inline CSS, one small inline script at the end of body. No build step, no framework, no bundler. Google Fonts is the only permitted network request (system fallback stack required). Every visible pixel comes from CSS gradients, inline SVG, text, and one `<canvas>`. Desktop is one frame with no scroll at `>= 901px`: `html, body { height:100%; overflow:hidden }` and `.page { height:100dvh; overflow:hidden }`. Width `<= 900px` may scroll vertically but must never overflow horizontally. Accessibility is mandatory: real `header`, `nav`, `main`, `footer`; exactly one `h1`; every visible control a named button or anchor; a visible `:focus-visible` ring; readable contrast. The runtime telemetry hook must be exactly `window.__DEMO__ = { name: 'echo', ready: false, frames: 0, effects: [], errors: [] };` and the script must set `ready` true after the first painted sonar frame, increment `frames` once per animation frame inside the requestAnimationFrame loop, push each implemented effect name into `effects`, and attach a window `'error'` listener that pushes into `errors`. Zero console output, no uncaught exceptions, finished index.html under 90 KB. Do NOT build: no video, no WebGL, no Three.js, no Lottie, no GSAP, no jQuery, no Tailwind, no React, no images (remote or base64), no audio, no external scripts or third-party CDN URLs, no forms or inputs, no pricing tables, no testimonials, no world maps, no dashboards, no extra sections beyond header / hero / footer, no footer links beyond the three specified, no cookie banner, no scroll indicator, no hamburger menu above 900px. The single visual idea: a full-bleed canvas sonar scope — concentric ping rings expanding from a fixed origin, a rotating sweep line trailing a fading phosphor wedge, contact blips igniting as the sweep crosses them and decaying over seconds — behind quiet marine-instrument typography.

---

## B. THE BACKDROP — procedural sonar scope (the ONLY visual effect besides grain)

A single `<canvas id="sonar">` fills the viewport: `position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none`, repainted every `requestAnimationFrame` tick and NEVER a static image.

**Geometry (canvas 2D, no libraries):**

- Origin `(cx, cy)`, `>= 901px`: `cx = w * 0.70`, `cy = h * 0.52` (scope right of the copy column). `<= 900px`: `cx = w * 0.50`, `cy = h * 0.40`.
- Scope radius `R = min(w*0.30, h*0.50)` at `>= 901px` (432px at 1440×900); `R = min(w*0.46, h*0.34)` at `<= 900px`.
- Paint order per frame, back to front: navy fill, graticule blit, 4 ping rings, 8 trail buckets, leading edge, 30 contact blips, edge-fade gradient, vignette.

**Graticule (drawn ONCE per resize into an offscreen canvas, blitted once per frame):**

- 6 concentric range rings at `R * k / 6` for `k = 1..6`, `lineWidth 1`, stroke `rgba(92,255,157,0.13)`.
- 36 bearing ticks every 10°: 1px segments `R → R + 8px` at alpha 0.16; every third tick (30°) runs `R → R + 14px` at alpha 0.26.
- Four mono bearing labels, drawn once at radius `R + 26px`, 10px, fill `rgba(92,255,157,0.30)`: `000` top, `090` right, `180` bottom, `270` left.
- The offscreen canvas matches the main canvas backing size; per-frame cost is exactly one `drawImage`.

**Ping rings — 4 expanding waves:**

- Wave count `P = 4`, ping period `5.5s`. Wave `k` has phase `pk = ((t / 5.5) + k / 4) % 1` for `k = 0..3` (a new ring every 1.375s).
- Radius `r_k = R * (0.06 + 0.94 * pk^0.82)` — the exponent front-loads expansion so rings decelerate like a real wavefront.
- Stroke: `lineWidth 1` (`2` when `pk < 0.12`, the newborn ring), colour `rgba(92,255,157, alpha)` with `alpha = 0.42 * (1 - pk)^1.5 + 0.02`; one `beginPath` per ring, 4 strokes per frame.

**Sweep and its fading trail:**

- Leading angle `a = (t / 6.4) * TAU - PI/2` (`TAU = Math.PI * 2`; bearing 000 at top, clockwise; one revolution every 6.4s).
- The trail is a wedge spanning `56°` BEHIND the leading edge, split into `8` alpha buckets of `7°` each. Bucket `j = 0..7` covers `[a - (j+1)*7°, a - j*7°]` and fills `rgba(92,255,157, alpha_j)` with `alpha_j = 0.14 * (1 - j/8)^1.7 + 0.012`. One `moveTo; arc; closePath; fill` per bucket — 8 fills per frame, no `filter`/`shadowBlur`.
- Leading edge: one 1px line origin → `R + 10px` at `rgba(92,255,157,0.55)` plus a 2.5px tip dot at alpha 0.9.

**Contact blips — 30 targets (22 at `<= 900px`, 16 at `<= 560px`):**

- Generated ONCE at startup by mulberry32 (seed `20260214`) for identical loads: `ang` in `[0, TAU)`, `rad = 0.10 + rng() * 0.84` of R, `size = 0.8 + rng() * 0.6`, stored `{ang, rad, life, size}`.
- Ignition: track the previous sweep angle; when it crosses a contact's `ang` (wrap-aware), set `life = 1`.
- Decay: `life = max(0, life - dt / 2.6)` — 2.6s fade, so one 6.4s revolution leaves ~12 lit contacts.
- Per contact, TWO primitives: glow — the 64×64 sprite (stops `rgba(92,255,157,0.85)` 0%, `rgba(92,255,157,0.28)` 35%, `rgba(92,255,157,0)` 70%) via `drawImage` in a `(14 + 26 * life) * size` square at `globalAlpha = 0.55 * life^1.8`; then core — filled circle radius `(2.0 + 1.5 * life) * size`, `fillStyle rgba(92,255,157, 0.30 + 0.65 * life^1.4)`. Reset `globalAlpha` after each glow.

**Edge fade and vignette (2 gradients per frame):** radial gradient centred `(cx, cy)`: `rgba(3,12,22,0)` at 0 and at `R * 0.86` → `rgba(3,12,22,0.55)` at `R * 1.06` → `#030c16` at `R * 1.34`; then a full-frame vignette transparent at 45% radius to `rgba(3,12,22,0.52)` at the corners.

**Grain (CSS, separate element):** `div.grain`, `position:fixed; inset:-50%; width:200%; height:200%; pointer-events:none; opacity:0.05; z-index:5`, background = inline SVG `feTurbulence` data-URI (`fractalNoise`, `baseFrequency="0.8"`, `numOctaves="2"`, `stitchTiles="stitch"`, then `feColorMatrix saturate 0`), tile 160px, `grain 0.9s steps(4) infinite` jittering `translate` among `(0,0) (-2%,1%) (1%,-2%) (-1%,2%)`.

**Per-frame cost budget:** 4 ring strokes + 8 trail fills + 2 leading-edge primitives + 30 × 2 blip primitives + 1 graticule blit + 2 gradient fills + 1 clear = **≤ 78 draw primitives per frame**, ≤ 3 gradient objects per frame, **zero `ctx.filter` / `ctx.shadowBlur` calls ever** (glow is a pre-rendered sprite). Resolution trick: cap backing-store DPR at `Math.min(devicePixelRatio, 2)` desktop, `1.5` at `<= 900px`; `canvas.width = innerWidth * dpr`, `canvas.height = innerHeight * dpr`, `ctx.setTransform(dpr, 0, 0, dpr, 0, 0)`, graticule rebuilt at that size. Read `innerWidth/innerHeight` only on resize — NEVER `getBoundingClientRect` in the loop. Cap `dt` at 0.05s. While `document.hidden`, increment `frames` and skip the paint.

---

## C. LAYER STACK (back → front)

1. `html, body` — deep navy `#030c16`, forced twice (see Failure Guards).
2. `canvas#sonar` — z-index 0, the scope: graticule, pings, sweep, contacts, edge fade, vignette.
3. `.scrim` — z-index 1, fixed `linear-gradient(180deg, rgba(3,12,22,0.78) 0%, rgba(3,12,22,0.22) 36%, rgba(3,12,22,0.18) 62%, rgba(3,12,22,0.86) 100%)` guaranteeing text contrast top and bottom.
4. `.page` — z-index 2, `position:relative; display:grid; grid-template-rows: auto minmax(0,1fr) auto; min-height:100dvh` (height 100dvh inside the desktop lock).
5. `.grain` — z-index 5, above all content.

---

## D. TOKEN TABLE (defaults at ~1440px)

```
--bg:            #030c16
--bg-2:          #061524
--text:          #e7f3ef
--text-soft:     #c3d7d4
--muted:         #8ba7ae
--dim:           #55727c
--accent:        #5cff9d
--accent-dim:    rgba(92,255,157,0.55)
--accent-line:   rgba(92,255,157,0.28)
--accent-fill:   rgba(92,255,157,0.06)
--border:        rgba(180,225,214,0.14)
--border-soft:   rgba(180,225,214,0.09)
--logo:          15px
--logo-mark:     20px
--nav:           13.5px
--nav-h:         38px
--btn:           13.5px
--btn-h:         42px
--chip:          11.5px
--chip-h:        28px
--h1:            60px
--lead:          16.5px
--readout:       12.5px
--foot:          12.5px
--header-y:      24px
--header-x:      40px
--hero-x:        40px
--hero-y:        40px
--footer-y:      22px
--copy-max:      560px
--lead-max:      520px
--h1-gap:        20px
--lead-gap:      20px
--action-gap:    28px
--readout-gap:   26px
--sans:          "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
--mono:          "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
--ease-out:      cubic-bezier(0.16,1,0.3,1)
--enter-dur:     0.95s
```

Fonts (Google Fonts ONLY, one `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` plus one stylesheet link with `display=swap`): `Space+Grotesk:wght@400;500;700` and `IBM+Plex+Mono:wght@400;500`.

---

## E. THE COMPOSITION — exact build order

Body: `margin:0; min-width:320px; font-family:var(--sans); -webkit-font-smoothing:antialiased` (navy-first rule per I.1).

**HEADER** — `padding: var(--header-y) var(--header-x); display:flex; align-items:center; justify-content:space-between; gap:24px`.

- Left: `a.brand` (href `#`, accessible name "Echo home") — inline SVG mark 20×20: `<circle cx="10" cy="10" r="1.9" fill="#5cff9d"/>` plus two concentric arcs `<path d="M14.4 5.6a6.2 6.2 0 0 1 0 8.8" fill="none" stroke="#5cff9d" stroke-width="1.8" stroke-linecap="round"/>` and `<path d="M17.2 2.8a10 10 0 0 1 0 14.4" fill="none" stroke="#5cff9d" stroke-width="1.4" stroke-linecap="round" opacity="0.55"/>`. Wordmark `echo` in `var(--mono)`, `font-size: var(--logo); font-weight:500; color:var(--text); letter-spacing:0.14em`; trailing `_` cursor in `var(--accent)`, `blink 1.06s steps(1) infinite` (`0%,49% {opacity:1} 50%,100% {opacity:0}`).
- Centre: `nav` with exactly 3 links: `platform`, `fleet`, `science` — all href `#`, mono, `font-size: var(--nav); color: var(--muted)`, `display:flex; align-items:center; gap:30px; height:var(--nav-h)`. Hover: `color: var(--accent)` over 0.18s ease. `platform` (current bearing) is preceded by a 5×5px square `background: var(--accent); box-shadow: 0 0 8px var(--accent-dim); display:inline-block; margin-right:8px`.
- Right: `a.cta` (href `#`, class `btn btn--ghost btn--sm`) text `Request a sea trial`, height `var(--nav-h)`, padding 0 16px.

**MAIN (hero)** — `display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding: var(--hero-y) var(--hero-x); width:100%; max-width: var(--copy-max); margin-right:auto; min-width:0`. Left-anchored, vertically centred in the 1fr row; the disc owns the right 55%.

1. `.chip` — inline-flex, `height: var(--chip-h); padding: 0 12px; border:1px solid var(--accent-line); border-radius:999px; background: var(--accent-fill)`, mono `font-size: var(--chip); letter-spacing:0.18em; color: var(--accent)`. Exact copy: `DEEP-CLASS SONAR AUTONOMY`. Preceded by a 6px dot (`border-radius:50%; background:var(--accent)`) pulsing per Motion.
2. `h1` — EXACTLY ONE `<h1>`, `var(--sans); font-weight:700; font-size: var(--h1); letter-spacing:-0.045em; line-height:1.02; color:var(--text); margin: var(--h1-gap) 0 0`. Two masked lines (see Motion):
   Line 1: `Sound sees`
   Line 2: `what light cannot.`
   Line 1 wraps `Sound` in `<em>` styled `font-family: var(--mono); font-style:normal; font-weight:400; font-size:0.88em; color: var(--accent); letter-spacing:-0.02em`.
3. `p.lead` — `margin: var(--lead-gap) 0 0; max-width: var(--lead-max); font-size: var(--lead); line-height:1.6; letter-spacing:-0.015em; color: var(--text-soft)`. Exact copy: `Echo builds autonomous sonar vehicles that map, classify and track everything that lives and moves beneath 200 metres — where cameras go blind and light gives up.`
4. `.actions` — `display:flex; gap:12px; flex-wrap:wrap; margin-top: var(--action-gap)`. `a.btn.btn--primary` text `Request a sea trial` (href `#`); `a.btn.btn--ghost` text `Read the tech brief` (href `#`).
5. `.readout` — mono `font-size: var(--readout); color: var(--dim); margin-top: var(--readout-gap); white-space:nowrap`. Exact copy: `CONTACTS 07 · SWEEP 042° · PING 5.5 s · DEPTH 6 000 m`. The four values `07`, `042°`, `5.5`, `6 000` are `color: var(--accent)`. The trailing `· DEPTH 6 000 m` sits in `<span class="opt">` (hidden `<=560px`).

**FOOTER** — `padding: var(--footer-y) var(--header-x); display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--border-soft)`.

- Left: mono `var(--foot)`, `color: var(--dim)`: `© 2026 Echo Marine Systems`.
- Centre: mono `var(--foot)`, `color: var(--dim)`: `beacon: transmitting` with the same 7px status square (`margin-right:8px`) as the nav marker.
- Right: exactly 3 links `research`, `voyages`, `contact` — mono `var(--foot)`, `color: var(--muted)`, `gap:22px`, href `#`, hover `color: var(--text)`.

---

## F. THE UI LANGUAGE

One button family, two weights. `.btn` is `inline-flex; align-items:center; justify-content:center; height:var(--btn-h); padding:0 20px; border-radius:6px; font-family:var(--mono); font-size:var(--btn); letter-spacing:0.02em; text-decoration:none; transition: transform, background, border-color, box-shadow, color .2s var(--ease-out)`. `.btn--sm` is `height:var(--nav-h); padding:0 16px`. `.btn--primary`: `color:#04140c; font-weight:500; border:1px solid rgba(92,255,157,0.6); background:linear-gradient(180deg, #7dffb4 0%, #5cff9d 52%, #33d97f 100%); box-shadow: 0 14px 40px rgba(92,255,157,0.18), inset 0 1px 0 rgba(255,255,255,0.5)`. Hover: `transform: translateY(-1px); background:linear-gradient(180deg, #a4ffcb 0%, #7dffb4 48%, #46e88d 100%); box-shadow: 0 18px 48px rgba(92,255,157,0.28), inset 0 1px 0 rgba(255,255,255,0.5)`. `.btn--ghost`: `color:var(--text); border:1px solid var(--border); background:rgba(180,225,214,0.04)`. Hover: `transform: translateY(-1px); border-color: var(--accent-line); color: var(--accent); background: rgba(92,255,157,0.07)`. Both `:active` → `transform: translateY(0)`. Nav and footer links are plain mono text, `text-decoration:none`, colour-only hover — no pills, backgrounds, or underlines. Every `a` and `button` gets `:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px }`. Selection: `::selection { background: rgba(92,255,157,0.26); color: #fff }`. No default blue focus ring and no text underline anywhere.

---

## G. MOTION — entrance stagger + named keyframes

All entrance animations: `animation-duration: var(--enter-dur); animation-fill-mode: both; animation-timing-function: var(--ease-out); animation-delay: var(--d, 0.08s)`. Each animated element carries `.appear` plus a modifier and an inline `--d`.

Stagger table (element → modifier → --d):
```
brand            appear--fade   0.08s
nav platform     appear--fade   0.16s
nav fleet        appear--fade   0.24s
nav science      appear--fade   0.32s
header cta       appear--chip   0.40s
chip             appear--pop    0.52s
h1 line 1        appear--mask   0.66s
h1 line 2        appear--mask   0.80s
lead             appear--soft   0.98s
primary button   appear--chip   1.14s
ghost button     appear--chip   1.22s
readout line     appear--read   1.34s  (duration 1.1s)
footer left      appear--fade   1.46s
footer centre    appear--fade   1.54s
footer right     appear--fade   1.62s
```

Named keyframes (all end at opacity 1 / identity transform):
```
in-fade   from { opacity: 0 }                                          to { opacity: 1 }
in-soft   from { opacity: 0; transform: translateY(14px); filter: blur(4px) } to { opacity: 1; transform: none; filter: blur(0) }
in-mask   from { opacity: 0; transform: translateY(104%) }             to { opacity: 1; transform: none }
in-chip   from { opacity: 0; transform: translateY(10px) scale(0.96) } to { opacity: 1; transform: none }
in-pop    0% { opacity:0; transform: scale(0.9) } 70% { opacity:1; transform: scale(1.03) } 100% { opacity:1; transform:none }
in-read   from { opacity: 0; clip-path: inset(0 100% 0 0) }            to { opacity: 1; clip-path: inset(0 -4% 0 0) }
```

H1 masking: each line is `<span class="line"><span class="line-inner appear appear--mask">…</span></span>` with `.line { display:block; overflow:hidden; padding: 0.04em 0.1em 0.10em }` and `.line-inner { display:inline-block }` — type surfaces out of a hard edge like a seabed return. `in-read` wipes the readout left-to-right, echoing the sweep.

Continuous keyframes: `blink` (brand cursor, 1.06s steps(1) infinite); `pulse` on the chip dot — `0%,100% { opacity:.35; transform:scale(.8) } 50% { opacity:1; transform:scale(1) }`, `2.4s ease-in-out infinite`; `grain` (0.9s steps(4)). Canvas sweep, pings, contact decay and grain run continuously, independent of the stagger.

---

## H. RESPONSIVE TABLE — token overrides per breakpoint (exact)

```
>= 1600px:
  --h1: 72px  --logo: 16px  --nav: 14.5px  --nav-h: 42px  --btn: 14.5px
  --btn-h: 46px  --lead: 17.5px  --readout: 13px  --foot: 13px  --chip: 12px
  --header-y: 28px  --header-x: 56px  --hero-x: 56px  --copy-max: 620px  --lead-max: 560px

>= 1920px:
  --h1: 84px  --header-x: 72px  --hero-x: 72px  --copy-max: 680px
  --lead: 18.5px  --readout: 13.5px  --lead-max: 600px

1280px – 1599px:
  --h1: 64px  --header-x: 48px  --hero-x: 48px  --copy-max: 540px

901px – 1279px:
  --h1: 48px  --nav-h: 34px  --header-x: 32px  --hero-x: 32px
  --copy-max: 460px  --lead: 15.5px  --readout: 12px

>= 901px AND max-height 850px:
  --h1: 44px  --hero-y: 24px  --header-y: 18px  --chip-h: 26px  --lead: 15px
  --h1-gap: 14px  --lead-gap: 16px  --action-gap: 18px  --readout-gap: 16px

>= 901px AND max-height 720px:
  --h1: 38px  --hero-y: 14px  --header-y: 12px  --lead: 14px  --readout: 11.5px
  --btn-h: 38px  --chip-h: 24px  --footer-y: 14px  --h1-gap: 12px  --lead-gap: 12px
  --action-gap: 14px  --readout-gap: 12px

>= 901px (desktop lock, all heights):
  html, body { height:100%; overflow:hidden }  .page { height:100dvh; overflow:hidden }

<= 900px:
  no vh lock; page may scroll; nav becomes a full-viewport overlay menu:
  - header keeps brand + burger button (<button class="burger" aria-label="Menu" aria-expanded="false">, three 18×1.5px bars in var(--text), gap 5px)
  - .menu { position:fixed; inset:0; z-index:10; background: rgba(3,12,22,0.92); backdrop-filter: blur(14px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding: 0 32px; gap: 26px; transform: translateY(-100%); transition: transform 0.45s var(--ease-out) }
  - .menu.open { transform: none }
  - menu shows the 3 nav links stacked at --nav: 22px plus the header CTA chip; Escape key, link click, and resize >900px all close it
  --h1: 40px  --header-x: 24px  --hero-x: 24px  --copy-max: 100%  --lead-max: 520px
  --hero-y: 28px  --readout: 11.5px
  .scrim mid stops rise to rgba(3,12,22,0.42) at 36% and rgba(3,12,22,0.38) at 62% (copy sits over the centred scope)

<= 560px:
  --h1: 32px  --lead: 14.5px  --readout: 11px  --header-x: 20px  --hero-x: 20px
  footer becomes flex-direction:column; align-items:flex-start; gap:10px
  header CTA is hidden (it lives inside the menu on mobile)
  the readout drops the DEPTH segment via span.opt { display:none }
```

Canvas constants scale too: at `<= 900px` origin `(w*0.50, h*0.40)`, `R = min(w*0.46, h*0.34)`, contact count 22, DPR cap 1.5; at `<= 560px` contact count 16 and graticule labels drop to `000`/`180` only. Sweep 6.4s and ping 5.5s stay constant at every size.

---

## I. FAILURE GUARDS — the page is never blank, never broken

1. **Navy-first:** the FIRST CSS rule is `html, body { background:#030c16 !important; color:#e7f3ef }`; the body tag carries `style="background:#030c16;color:#e7f3ef"`; a later rule restates `html, body { background: var(--bg, #030c16) }`.
2. **Resting opacity is 1:** every `.appear` element's un-animated computed style is its final state (opacity 1, no transform/blur/clip); `fill-mode: both` holds the FROM state only during the delay. If CSS animation or JS fails, the page renders complete and readable.
3. **Two-rAF entrance fallback:** after two nested `requestAnimationFrame` callbacks, inspect every `.appear` with `el.getAnimations({ subtree:false })` (or unconditionally if missing); if none reports `playState` "running"/"finished", add `.is-in` to ALL `.appear` — `.is-in { animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important }`.
4. **Canvas fallback:** if the canvas or its 2D context is missing, add `.no-canvas` to `<html>`, push a short string into `window.__DEMO__.errors`, and paint a static CSS scope: `.no-canvas body { background-image: repeating-radial-gradient(circle at 70% 52%, rgba(0,0,0,0) 0 58px, rgba(92,255,157,0.13) 58px 59px) }` so the page still reads sonar.
5. **Reduced motion:** inside `@media (prefers-reduced-motion: reduce)`: `*, *::before, *::after { transition:none !important; animation:none !important }`; force `.appear, .line-inner, .readout` to `opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important`; brand cursor and chip dot freeze at `opacity:1`; `.grain { display:none }`. The canvas paints exactly ONE static frame — sweep parked at bearing `042°` (drawn with its full trail), ping phases frozen at `pk = 0.18, 0.42, 0.66, 0.90`, every contact at `life = 0.55` — sets `ready = true`, sets `frames = 1`, and schedules no further frames.
6. **No console output** in the happy path: no `console.log`, no thrown exceptions; every canvas call null-guarded.

---

## J. THE EXACT JS (only this, vanilla, one IIFE at end of body)

1. **Telemetry first:**
   `window.__DEMO__ = { name: 'echo', ready: false, frames: 0, effects: [], errors: [] };`
   Attach `window.addEventListener('error', e => window.__DEMO__.errors.push(String(e.message || e)))` immediately, then push into `effects` once, in order: `'sonar-sweep'`, `'ping-rings'`, `'contact-blips'`, `'range-graticule'`, `'grain-texture'`.
2. **Setup:** cache `document.documentElement`, `canvas#sonar`, its 2D context (guard null → `.no-canvas` path from I.4 and stop), burger, menu panel, menu links, and `matchMedia('(prefers-reduced-motion: reduce)')`. Constants: `TAU`, sweep 6.4s, ping 5.5s, trail 56°, 8 buckets, decay 2.6s, seed 20260214. Implement `mulberry32(seed)` (3 lines, `Math.imul`); build the contacts ONCE with the breakpoint count (30 / 22 / 16) and the 64×64 glow sprite ONCE, both per section B.
3. **resize()** (on load + resize, via boolean `resizeQueued` + `requestAnimationFrame`, never a timer): read `innerWidth`/`innerHeight` (NOT `getBoundingClientRect`), apply the DPR caps and `setTransform` of section B, recompute `cx, cy, R`, rebuild the offscreen graticule (6 rings, 36 ticks, 4 labels).
4. **drawFrame(t, dt):** execute section B in order — navy clear, one graticule `drawImage`, the 4 ping rings (`pk = ((t/5.5) + k/4) % 1`), the 8 trail buckets and leading edge, contact updates (wrap-aware crossing detection vs the previous sweep angle, `life = Math.max(0, life - dt/2.6)`) with glow + core, edge fade, vignette. Set `window.__DEMO__.ready = true` after the first completed paint; increment `window.__DEMO__.frames` by exactly 1 per rAF tick — even while `document.hidden` — skipping only the paint while hidden.
5. **Loop:** one `requestAnimationFrame` loop, `dt = Math.min(0.05, (now - last) / 1000)`, `last = now`. Reduced motion: run `drawFrame(2.4, 0)` once (frozen per I.5), set `frames = 1`, `ready = true`, schedule nothing more. In the loop: no `getBoundingClientRect`, DOM animation via `transform`/`opacity` only, no `ctx.filter`/`ctx.shadowBlur`.
6. **Entrance fallback:** two nested rAFs after DOMContentLoaded, then the `.is-in` sweep of section I.3.
7. **Menu (mobile only):** burger click toggles `.menu.open` and `aria-expanded`; Escape, any menu link click, or resize to `>900px` closes it.

No other JS. No libraries. No timers. No console calls.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Filament

- Slug: `filament`
- Page: https://landingpageprompts.com/prompts/filament
- Effect: Animated incandescent filament: SVG zig-zag wire stroked with a warm gradient inside a radial glass envelope; glow and colour pulse on a slow loop while a blurred heat-shimmer layer translates on a noise-like path.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 36,003; total with repair and cross-check: 36,003
- Verification: 20/20 automated checks passed
- Independent cross-check: unparsed (confidence low)
- Acceptance criteria:
  - document.querySelectorAll('h1').length === 1 and the h1 textContent is 'FILAMENT'
  - window.__DEMO__ exists, window.__DEMO__.ready === true, and window.__DEMO__.errors.length === 0 after load
  - window.__DEMO__.frames >= 1 within 1.2 seconds and the canvas backing store width equals Math.floor(window.innerWidth / 2)
  - at a viewport of 1440x900, getComputedStyle(document.body).overflow === 'hidden' and document.documentElement.scrollWidth <= window.innerWidth (no horizontal overflow)
  - the elements #shimmer and #wire-glow receive inline transform and opacity updates respectively when not in reduced-motion, and remain untransformed in reduced-motion
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT
You are building a single-viewport cinematic landing page for a fictional hardware company named FILAMENT. The document title must be exactly "FILAMENT — Incandescent Computing". The html element must have lang="en". The viewport meta tag is "width=device-width, initial-scale=1". At viewport widths of 901px and above, the body must be height:100dvh with overflow:hidden so the page never scrolls. At widths of 900px and below, the body must be min-height:100dvh with overflow-y:auto and overflow-x:hidden to permit vertical scrolling. There is exactly one h1 element on the page; it contains the text "FILAMENT". The page uses real header, nav, main, and footer elements. Every visible control has an accessible name: the two nav links are "Specs" and "Pre-order", and the primary call to action is a link with the text "Reserve unit". The logo in the header is a span with the text "FILAMENT" and is not a heading. Do NOT build: any scrollable sections on desktop, any additional pages or sections beyond header/main/footer, any external media such as mp4, webm, gif, or remote images, any CDN links, any base64 photo blobs, any React, Tailwind, GSAP, Three.js, or Lottie dependencies. The only permitted network request is the Google Fonts stylesheet for Inter with a system fallback stack of system-ui, -apple-system, "Segoe UI", Roboto, sans-serif. No other network requests are allowed.

B. THE BACKDROP
The backdrop consists of three stacked elements behind all content. First, a fixed div with class "vignette" covering the viewport at z-index 0. It uses a background of radial-gradient(circle at 50% 45%, rgba(251,191,36,0.08) 0%, rgba(251,191,36,0.02) 30%, rgba(251,191,36,0) 70%) layered over the solid base colour #050505. This creates the near-black environment with a faint 8 percent accent glow centred slightly above the bulb. Second, a canvas element with id "dust" sits at z-index 1. It is fixed, display:block, width:100%, height:100%, and pointer-events:none. The canvas resolution trick is mandatory: the JavaScript resize handler sets the canvas backing store to exactly Math.floor(window.innerWidth / 2) by Math.floor(window.innerHeight / 2) pixels. The CSS width and height stretch this half-resolution buffer to fill the screen, halving the fill-rate cost while remaining visually smooth for soft particles. The canvas renders 64 ember particles. To respect the per-frame budget, a single 16 by 16 pixel offscreen canvas is precomputed once at load: it contains a radial gradient dot from rgba(251,191,36,0.9) at the centre to rgba(251,191,36,0) at the edge. Inside the animation loop, the code never calls ctx.filter and never sets ctx.shadowBlur. It only calls ctx.clearRect(0,0,w,h) followed by 64 ctx.drawImage calls using integer coordinates. Each particle has a base position stored as a normalized 0 to 1 value, a speed between 0.0002 and 0.0005, a phase between 0 and 6.283, and a scale between 0.5 and 1.0. The horizontal drift is Math.sin(t * p.sp + p.ph) * 24 and the vertical drift is Math.cos(t * p.sp * 0.8 + p.ph) * 24, producing a slow noise-like wander. The per-frame cost budget for this canvas is 0.3 milliseconds or less: 64 drawImage calls plus one clearRect on a half-resolution surface. Third, the glass envelope is a div with class "envelope" at z-index 2. It is a perfect circle with width and height equal to var(--bulb-size), border-radius:50%, and a background of radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 60%, rgba(255,255,255,0) 68%) combined with radial-gradient(circle at 50% 40%, rgba(251,191,36,0.15) 0%, rgba(251,191,36,0) 70%). It has a 1 pixel rim created by box-shadow: 0 0 0 1px rgba(251,191,36,0.25) inset and an outer atmospheric glow of box-shadow: 0 0 120px 20px rgba(251,191,36,0.12). The envelope is the only light source; the surrounding copy is lit by the radial falloff already present in the vignette and envelope layers.

C. THE LAYER STACK
The stacking order from back to front is exactly:
z-index 0: div.vignette (fixed, full viewport, near-black base and faint accent glow)
z-index 1: canvas#dust (fixed, full viewport, 64 ember particles at half resolution)
z-index 2: div.envelope (the glass sphere, absolutely centred, size var(--bulb-size))
z-index 3: div.filament-wrap (absolutely centred inside the bulb footprint; contains the SVG)
  inside filament-wrap: svg.filament at z-index 1 draws two posts and the zig-zag wire path with stroke="url(#wire-grad)" and stroke-width 2.
  inside filament-wrap: svg.shimmer at z-index 2 is a duplicate of the wire path with filter: blur(10px) applied via CSS, stroke #fbbf24, and opacity 0.6. It is translated by the JS loop.
  inside filament-wrap: div.wire-glow at z-index 3 is a copy of the wire rendered as an SVG drop-shadow filter layer whose opacity is animated from 0.55 to 0.90 and back.
z-index 4: main (contains the hero h1, tagline, and button; text is lit by the falloff)
z-index 5: header (fixed top) and footer (fixed bottom) sit above main for navigation, both with z-index 10 in the normal flow but logically above the stage.
All decorative bulb elements have aria-hidden="true" so they are not in the accessibility tree.

D. A TOKEN TABLE
:root {
  --bg: #050505;
  --accent: #fbbf24;
  --accent-bright: #fde68a;
  --accent-dim: #b45309;
  --text: #f5f5f4;
  --text-dim: #a8a29e;
  --glass-rim: rgba(251,191,36,0.25);
  --glass-glow: rgba(251,191,36,0.12);
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --h1-size: clamp(3rem, 8vw, 7rem);
  --h1-weight: 600;
  --h1-tracking: -0.04em;
  --body-size: clamp(1rem, 1.2vw, 1.125rem);
  --btn-py: 0.875rem;
  --btn-px: 1.75rem;
  --btn-radius: 999px;
  --nav-gap: 2rem;
  --pad-x: clamp(1.5rem, 5vw, 4rem);
  --pad-y: clamp(1.5rem, 4vh, 3rem);
  --bulb-size: clamp(280px, 40vmin, 480px);
  --wire-width: 2px;
  --blur-shimmer: 10px;
  --track-gap: 2rem;
}
Every colour and size in the composition references these tokens. No hard-coded hex values appear outside the token block except inside SVG gradient stops, which use rgba(251,191,36,1) and rgba(180,83,9,1).

E. THE COMPOSITION
The header is position:fixed with top:0, left:0, right:0, padding:var(--pad-y) var(--pad-x), display:flex, justify-content:space-between, align-items:center, and z-index:10. It contains a span.brand with font-weight:600, letter-spacing:0.02em, color:var(--text), and text "FILAMENT". The nav element has aria-label="Primary" and contains two links: a with href="#specs" and text "Specs", and a with href="#preorder" and text "Pre-order". The nav uses display:flex and gap:var(--nav-gap).
The main element is position:relative, display:flex, flex-direction:column, justify-content:center, align-items:center, text-align:center, padding:var(--pad-y) var(--pad-x), min-height:100dvh, and z-index:4. The bulb div.envelope and its filament-wrap are position:absolute, top:50%, left:50%, transform:translate(-50%,-50%), width:var(--bulb-size), height:var(--bulb-size). Because they are absolutely positioned inside main, they sit behind the text content which is in normal flow with z-index relative to main's children. The hero block is a div.hero with margin-top:auto and margin-bottom:auto to vertically centre. Inside it, the h1 has font-size:var(--h1-size), font-weight:var(--h1-weight), letter-spacing:var(--h1-tracking), line-height:1, margin:0, color:var(--text), and text "FILAMENT". The tagline is a p.tagline with max-width:32ch, margin:1.5rem auto 0, font-size:var(--body-size), line-height:1.6, color:var(--text-dim), and text "The first incandescent compute module. 64 threads of warm, analog-safe light." The call to action is an a.btn with href="#preorder", margin-top:2.5rem, and text "Reserve unit". The SVG filament is built as follows: an svg with viewBox="0 0 200 120" and width 100 percent. Two posts are line elements from (40,110) to (40,60) and (160,110) to (160,60) with stroke #a8a29e and stroke-width 3. The zig-zag wire is a path with d="M40 60 L60 30 L80 60 L100 30 L120 60 L140 30 L160 60" filled none, stroke url(#wire-grad), stroke-width 2, stroke-linecap round, stroke-linejoin round. The linearGradient with id wire-grad goes from x1="0" y1="0" to x2="0" y2="1" and stops at 0 percent rgba(251,191,36,1) and 100 percent rgba(180,83,9,1). The shimmer is an identical svg with class shimmer and filter:blur(var(--blur-shimmer)).
The footer is position:fixed, bottom:0, left:0, right:0, padding:var(--pad-y) var(--pad-x), display:flex, justify-content:space-between, align-items:center, font-size:0.75rem, color:var(--text-dim), z-index:10. The left side is a p with text "© 2025 Filament Hardware Inc." The right side is a div.status containing a span.dot with width 6px, height 6px, border-radius 50%, background var(--accent), display inline-block, margin-right 0.5rem, and box-shadow 0 0 6px var(--accent), followed by the text "System nominal". The status pill has background rgba(251,191,36,0.1), border 1px solid rgba(251,191,36,0.2), padding 0.25rem 0.75rem, border-radius 999px.

F. THE UI LANGUAGE
The primary button .btn is display:inline-flex, align-items:center, justify-content:center, padding:var(--btn-py) var(--btn-px), border-radius:var(--btn-radius), background:linear-gradient(180deg, #fbbf24 0%, #d97706 100%), color:#1c1917, font-weight:500, text-decoration:none, border:1px solid rgba(255,255,255,0.1), box-shadow:0 4px 14px rgba(251,191,36,0.25), transition:transform 0.2s ease, box-shadow 0.2s ease. On hover it becomes transform:translateY(-1px) and box-shadow:0 6px 20px rgba(251,191,36,0.4). On focus-visible it receives outline:2px solid var(--accent) and outline-offset:3px. Nav links and footer text use color:var(--text) with transition:color 0.2s and become color:var(--accent) on hover. All focusable elements receive the same :focus-visible ring: outline:2px solid var(--accent), outline-offset:3px, border-radius:2px. The status pill uses the exact background and border specified in section E. There is no other chrome; the interface relies entirely on the button treatment and the warm accent glow for hierarchy.

G. MOTION
The entrance stagger table is:
span.brand -> animation fade-slide-down, delay 0ms, duration 600ms, ease-out, fill both
nav a:nth-child(1) -> animation fade-slide-down, delay 80ms, duration 600ms, ease-out, fill both
nav a:nth-child(2) -> animation fade-slide-down, delay 140ms, duration 600ms, ease-out, fill both
h1 -> animation fade-slide-up, delay 200ms, duration 700ms, ease-out, fill both
p.tagline -> animation fade-slide-up, delay 320ms, duration 700ms, ease-out, fill both
a.btn -> animation fade-slide-up, delay 440ms, duration 700ms, ease-out, fill both
footer -> animation fade-slide-up, delay 560ms, duration 700ms, ease-out, fill both
These animations are applied only when the body has the class "animate", which is added by JavaScript after the double-rAF ready hook. The base CSS for every animated element is opacity:1, so if JavaScript never runs the elements remain fully visible at their resting state. The named keyframes are:
@keyframes fade-slide-down { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade-slide-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
The permanent ambient motion is:
div.wire-glow -> the JS drives style.opacity between 0.55 and 0.90 using a sine wave at period 3490ms; no CSS animation is used for opacity to respect the JS-only rAF contract.
svg.shimmer -> the JS drives style.transform translate between -3px and 3px horizontally and -2px and 2px vertically using sine and cosine at periods 5700ms and 4500ms respectively; the element also carries a CSS filter blur(10px).
canvas#dust -> the JS drives the 64 particles using the half-resolution drawImage loop described in section B. All three effects are pushed into window.__DEMO__.effects as the strings "canvas-dust", "filament-glow", and "shimmer-drift".

H. A RESPONSIVE TABLE
At 390x844 (mobile portrait): --pad-x is overridden to 1.25rem, --bulb-size is overridden to 220px, --h1-size is overridden to clamp(2.5rem, 12vw, 4rem), body overflow-y is auto, and main min-height is auto with padding-top 6rem and padding-bottom 6rem.
At 768x1024 (tablet portrait): --pad-x is 2rem, --bulb-size is 300px, --h1-size is clamp(3rem, 9vw, 5rem), body scrolls vertically.
At 901px to 1439px (small desktop): height is 100dvh with overflow hidden, --bulb-size is 380px, --h1-size is clamp(4rem, 7vw, 6rem), --pad-x is 3rem.
At 1440x900 and 1920x1080 (large desktop): --bulb-size is 480px, --h1-size is 7rem, --pad-x is 4rem, and the footer status pill remains visible.
Max-height breakpoint 1: @media (min-width:901px) and (max-height:700px) sets --bulb-size to 300px and --h1-size to clamp(2.5rem, 6vw, 4rem) to prevent overflow on short desktop windows.
Max-height breakpoint 2: @media (min-width:901px) and (max-height:600px) sets --bulb-size to 240px and --h1-size to clamp(2rem, 5vw, 3rem), and reduces the tagline max-width to 28ch.
No horizontal overflow exists at any of the four tested sizes because all padding uses clamp() and the bulb is centred with translate(-50%,-50%) inside a flex column that never exceeds viewport width.

I. FAILURE GUARDS
Resting opacity is guaranteed: every element that later animates starts with opacity:1 in the base stylesheet. The keyframes begin at opacity:0 and end at opacity:1 with animation-fill-mode:both, so the final resting state is opacity:1. If JavaScript is disabled or throws before adding the .animate class, no entrance animation is applied and the page is fully readable and static. The two-rAF fallback is implemented as requestAnimationFrame(function(){ requestAnimationFrame(function(){ window.__DEMO__.ready = true; document.body.classList.add("animate"); }); }); ensuring the ready flag is set only after the first paint is committed. Reduced motion is honoured in full: the media query @media (prefers-reduced-motion: reduce) sets animation-duration to 0.01ms, animation-iteration-count to 1, transition-duration to 0.01ms, and forces opacity:1 and transform:none on every element. The JavaScript checks window.matchMedia("(prefers-reduced-motion: reduce)").matches at startup; if true it does not start the rAF loop, does not push ambient effects, and sets window.__DEMO__.ready = true immediately after the double-rAF so the page remains static and readable with zero console output.

J. THE EXACT JS
Place the following script at the end of body. It uses no template literals and no external libraries.
window.__DEMO__ = { name: 'filament', ready: false, frames: 0, effects: [], errors: [] };
window.addEventListener('error', function(e) { window.__DEMO__.errors.push(String((e && (e.message || e.error)) || 'unknown')); });
(function() {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var canvas = document.getElementById('dust');
  var ctx = canvas.getContext('2d');
  var w = 0, h = 0;
  var dot = document.createElement('canvas');
  dot.width = 16; dot.height = 16;
  var dctx = dot.getContext('2d');
  var g = dctx.createRadialGradient(8,8,0,8,8,8);
  g.addColorStop(0,'rgba(251,191,36,0.9)');
  g.addColorStop(1,'rgba(251,191,36,0)');
  dctx.fillStyle = g;
  dctx.fillRect(0,0,16,16);
  var particles = [];
  for (var i=0;i<64;i++) {
    particles.push({ bx: Math.random(), by: Math.random(), sp: 0.0002 + Math.random()*0.0003, ph: Math.random()*6.283, sz: 0.5 + Math.random()*0.5 });
  }
  function resize() {
    w = Math.floor(window.innerWidth / 2);
    h = Math.floor(window.innerHeight / 2);
    canvas.width = w;
    canvas.height = h;
  }
  window.addEventListener('resize', resize);
  resize();
  var shimmer = document.getElementById('shimmer');
  var glow = document.getElementById('wire-glow');
  function frame(t) {
    window.__DEMO__.frames++;
    if (!reduce) {
      ctx.clearRect(0,0,w,h);
      for (var i=0;i<64;i++) {
        var p = particles[i];
        var x = (p.bx * w + Math.sin(t * p.sp + p.ph) * 24) | 0;
        var y = (p.by * h + Math.cos(t * p.sp * 0.8 + p.ph) * 24) | 0;
        ctx.drawImage(dot, x, y, 16 * p.sz, 16 * p.sz);
      }
      var shX = Math.sin(t * 0.0011) * 3;
      var shY = Math.cos(t * 0.0014) * 2;
      shimmer.style.transform = 'translate(' + shX.toFixed(2) + 'px,' + shY.toFixed(2) + 'px)';
      var op = 0.55 + Math.sin(t * 0.0018) * 0.35;
      glow.style.opacity = op.toFixed(3);
    }
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(function() {
    requestAnimationFrame(function() {
      window.__DEMO__.ready = true;
      document.body.classList.add('animate');
      if (!reduce) {
        window.__DEMO__.effects.push('canvas-dust');
        window.__DEMO__.effects.push('filament-glow');
        window.__DEMO__.effects.push('shimmer-drift');
      }
    });
  });
  if (!reduce) {
    requestAnimationFrame(frame);
  }
})();


---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Fringe

- Slug: `fringe`
- Page: https://landingpageprompts.com/prompts/fringe
- Effect: A turbulence-cut pigment panel wipes across and occludes a monumental studio headline.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 47,734; total with repair and cross-check: 70,730
- Verification: 18/18 automated checks passed
- Independent cross-check: unparsed (confidence low)
- Acceptance criteria:
  - At 1440×900, document.documentElement.scrollWidth equals document.documentElement.clientWidth, body has height 100dvh with overflow hidden, and the .swatch-wrap is at least 720px wide with clip-path ending at inset(0 0 0 0).
  - The document contains exactly one h1, real header/main/footer/nav landmarks, two named action anchors, three named navigation links, and every visible button or link has a non-empty accessible name.
  - The edge mask contains feTurbulence with baseFrequency="0.014 0.055" numOctaves="4" and a fed feDisplacementMap with scale="34"; the visible panel is above the h1 in stacking order and overlaps at least 54px of the headline.
  - After load, window.__DEMO__.name is "fringe", ready is true, effects contains swatch-wipe, conic-rotation, grain-jitter and type-stagger, and errors.length is 0.
  - Over a 1.2-second interval at 1440×900, window.__DEMO__.frames increases by at least 20; with prefers-reduced-motion:reduce, no rAF frame counter is required, the grain seed remains unchanged, and all content is visible with animation set to none.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT

Build one complete index.html for Sable & Weft, a print-and-textile studio working in pigment on heavy 12 oz cotton. The page is a single-viewport cinematic portfolio landing screen titled “Fringe — Sable & Weft”. Set the document language to lang="en", the character encoding to UTF-8, and the responsive viewport meta tag to width=device-width, initial-scale=1. The page uses a 5/7 asymmetric editorial composition: copy occupies the left five columns and a 720 × 880 pigment panel occupies the right seven columns, extends beyond the right viewport edge by exactly 12% of its own width, and visually covers the final letters of the headline. The artwork must look like a torn printed textile swatch, not like a conventional rounded card.

At widths of 901 px and above, set html, body, and .site-shell to width:100%; height:100dvh; min-height:100dvh; overflow:hidden. At widths through 900 px, allow normal vertical document scrolling; never allow horizontal scrolling. The fixed visual field may become position:relative and preserve its aspect ratio, but all content must fit the listed responsive layouts without clipping. There is no routing, modal, menu drawer, carousel, form submission, video, image, WebGL scene, text input, or secondary page.

Do NOT build a navigation drawer, account controls, cookie notice, testimonial slider, pricing table, CMS preview, contact modal, scroll-jacked sequence, video background, image gallery, loading percentage, cursor follower, WebGL renderer, framework bundle, or decorative element detached from the printed-swatch concept. Do not use remote media, external scripts, third-party CDN resources, embedded fonts other than Google Fonts, base64 raster content, animated GIFs, or stock imagery. Do not simulate paper with bitmap textures. Do not use repeated geometric holes, polygon clipping, CSS border-radius cards, or regular geometry as the panel edge; the visible perimeter must be authored by SVG turbulence displacement. Do not add console output. Do not create more than one h1.

B. THE BACKDROP

The full viewport background is #12100C. Place one decorative .ambient field behind all content with position:absolute; inset:0; z-index:0; pointer-events:none. It uses two radial-gradient pools only: radial-gradient(circle at 13% 18%, rgba(122,139,92,0.10) 0, rgba(122,139,92,0.035) 23%, transparent 48%), and radial-gradient(circle at 82% 76%, rgba(217,201,163,0.075) 0, rgba(217,201,163,0.018) 28%, transparent 52%). The gradients are composited on #12100C and must remain subtle enough that #E8E2D6 type has at least 12:1 contrast against the darkest region.

Add exactly 3 fine registration rules to the ambient field: one horizontal rule from x=0 to x=100% at y=64px, one vertical rule at x=5.5556vw from y=0 to y=100%, and one vertical rule at x=91.1111vw from y=0 to y=100%. Each is 1 px, rgba(232,226,214,0.07), with no blur. These are alignment marks, not panel boundaries. Do not add more ambient elements.

The hero artwork is one 720 px × 880 px .swatch-wrap positioned in the right grid region. Internally it contains one SVG .edge-mask with width=720 height=880 viewBox="0 0 720 880", defs, one mask, one path, one displacement filter, and one turbulence filter. The source path is a closed, hand-authored irregular contour: M 92 34 C 156 8 252 48 334 24 C 424 -2 508 18 584 8 C 650 0 698 38 688 88 C 678 138 718 182 704 232 C 690 284 724 334 708 388 C 694 436 724 492 700 540 C 678 584 714 632 690 676 C 670 716 692 770 654 806 C 622 838 584 822 548 852 C 506 886 462 862 416 874 C 366 888 328 866 284 874 C 228 884 188 850 142 846 C 94 842 58 812 66 762 C 74 714 22 676 34 628 C 44 588 10 544 28 500 C 46 454 4 410 24 362 C 42 316 0 274 20 224 C 38 180 54 144 48 104 C 42 70 58 46 92 34 Z.

The mask path is filled white. Apply filter="url(#fringe-displace)" to that path. Define the displacement filter in user-space coordinates with x="-20%" y="-20%" width="140%" height="140%" and color-interpolation-filters="sRGB". Inside it, define filter id="fringe-noise" with x="-20%" y="-20%" width="140%" height="140%": feTurbulence type="fractalNoise" baseFrequency="0.014 0.055" numOctaves="4" seed="17" result="noise"; then feDisplacementMap in="SourceGraphic" in2="noise" scale="34" xChannelSelector="R" yChannelSelector="G". The mask uses mask-type:luminance. The displaced white shape reveals the pure-CSS panel only inside the ragged contour; everything outside must show the backdrop. The 12% crop comes from placing the swatch’s rightmost 86.4 px outside the viewport, not from additional masking.

Inside .swatch-art, use a conic-gradient(from var(--a), #1B2A2E 0deg, #7A8B5C 108deg, #D9C9A3 216deg, #1B2A2E 360deg). Layer two radial pools over it at 40% opacity: radial-gradient(circle at 28% 24%, rgba(217,201,163,0.95) 0, rgba(217,201,163,0.28) 24%, transparent 52%), and radial-gradient(circle at 72% 74%, rgba(27,42,46,0.95) 0, rgba(27,42,46,0.26) 30%, transparent 57%). The first begins at 40% opacity as a complete layer, and the second also begins at 40% opacity. Add exactly one inline SVG grain overlay above these layers, with opacity:0.09, mix-blend-mode:soft-light, pointer-events:none, and its own feTurbulence type="fractalNoise" baseFrequency="0.82" numOctaves="3" seed="9". The grain overlay is clipped by the same .edge-mask SVG instance and is not animated through filter primitives per frame.

Animate the swatch’s registered custom property --a from 0deg to 360deg over 26s linear infinite. The only live filter mutation is changing the displacement feTurbulence seed every 900 ms among the fixed sequence 17, 23, 31, 41, 53, 67, 79, 89. Restarting the browser’s SVG noise implementation makes the edge crawl like wet paper without reflowing text or recalculating DOM geometry.

No canvas is used. The intrinsic 720 × 880 SVG is the resolution mechanism: the browser rasterizes the mask at device-pixel-aware resolution and CSS scales the 720 × 880 art box. The right-edge crop is performed by the viewport and transform, never by changing SVG coordinates. The live per-frame budget is at most 3 composited properties across the hero: one registered conic-angle animation on the swatch art, one browser-owned opacity/transform reveal on the swatch, and the rAF callback itself. The JS rAF loop must not query layout, read computed styles, resize observers, canvas pixels, or element bounds. The 900 ms seed interval must change one attribute only when its timestamp is reached. The page should sustain at least 20 frames per 1.2 seconds on a 1440 × 900 headless viewport; the only required rAF bookkeeping is an increment and one timestamp comparison.

C. THE LAYER STACK

Use explicit z-index values and no stacking-context ambiguity. The body background layer is z-index:auto. The .ambient field is z-index:0. The global .shell is position:relative; z-index:1; height:100%; pointer-events:none so decorative overlap does not block controls. The header is z-index:10. The main hero is z-index:1. The hero copy column is z-index:1. The large h1 is z-index:1. The swatch-wrap is position:absolute within the hero’s right region and has z-index:2; this must sit above the h1 so the ragged edge occludes its final letters. The swatch shadow is contained inside the masked SVG and has z-index:0 within the swatch. The swatch grain overlay is z-index:3 within the swatch. The hero metadata rail is z-index:5. The footer is z-index:10. No visible element may have a negative z-index. The focus ring must draw above its control at z-index:11.

The h1 is positioned so the last 3 characters “WEFT” extend beneath the leftmost ragged region of the swatch at 1440 × 900. Do not solve overlap with reduced opacity. At the 1440 breakpoint, the text’s visual right edge is x=956 px, the swatch’s viewport position begins near x=744 px, and at least 54 px of “WEFT” is hidden by opaque panel pixels on first paint. The panel always remains fully opaque where its mask is white.

D. TOKEN TABLE

Define every size and color in :root. Use these exact tokens:
--bg: #12100C;
--ink: #E8E2D6;
--ink-muted: rgba(232,226,214,0.62);
--ink-faint: rgba(232,226,214,0.38);
--moss: #7A8B5C;
--linen: #D9C9A3;
--deep: #1B2A2E;
--line: rgba(232,226,214,0.14);
--line-soft: rgba(232,226,214,0.07);
--shell-pad-x: 5.5556vw;
--shell-pad-y: 32px;
--header-h: 64px;
--footer-h: 58px;
--hero-h: calc(100dvh - 122px);
--grid-columns: minmax(0, 5fr) minmax(0, 7fr);
--grid-gap: 0px;
--headline-size: clamp(84px, 8.1vw, 156px);
--headline-leading: 0.78;
--headline-tracking: -0.072em;
--headline-weight: 600;
--eyebrow-size: 11px;
--eyebrow-leading: 1;
--eyebrow-tracking: 0.19em;
--body-size: 15px;
--body-leading: 1.55;
--meta-size: 10px;
--meta-leading: 1.4;
--meta-tracking: 0.14em;
--rule-size: 1px;
--swatch-w: 720px;
--swatch-h: 880px;
--swatch-crop: 86.4px;
--swatch-top: -96px;
--swatch-radius: 0px;
--button-h: 42px;
--button-pad-x: 18px;
--pill-radius: 999px;
--focus-width: 2px;
--focus-offset: 4px;
--ease-expo: cubic-bezier(.76,0,.24,1);
--reveal-duration: 1.1s;
--type-duration: 600ms;
--grain-seed-ms: 900ms;
--grain-rotate: 26s.

Use border-box sizing globally. Use the system stack -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif for controls and the Google Font request for “DM Mono” only, with ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace as fallback. Load the permitted font with display=swap and no other network request. The display face remains the system sans stack so a failed font request cannot alter the composition.

E. THE COMPOSITION

The document contains one header, one main, and one footer in source order. Header .site-header uses position:absolute; top:0; left:0; right:0; height:var(--header-h); padding:0 var(--shell-pad-x); display:grid; grid-template-columns:5fr 7fr; align-items:center; border-bottom:var(--rule-size) solid var(--line-soft). Its first child is a linked wordmark with exact accessible name “Sable & Weft home” and exact visible text “SABLE / WEFT”. Set it to font:600 13px/1 var(--font-mono); letter-spacing:0.08em. Its second child is a nav with aria-label="Primary navigation", display:flex; justify-content:flex-end; gap:28px. It contains exactly 3 links: “Selected work”, “Material practice”, and “Studio notes”. Each has exact visible copy in that capitalization, 11 px monospace text, and a 1 px bottom rule that expands from 0% to 100% on hover.

Main .hero uses position:absolute; inset:var(--header-h) 0 var(--footer-h); height:var(--hero-h); display:grid; grid-template-columns:var(--grid-columns); overflow:visible. The left .copy-column occupies the 5-column track with padding:clamp(96px,15vh,152px) 0 72px var(--shell-pad-x); position:relative; z-index:1. The right .art-column is the 7-column track and has position:relative; z-index:2; pointer-events:none.

Inside .copy-column, place an eyebrow first with exact text “PRINT + TEXTILE STUDIO / EST. 2018”. It uses --eyebrow-size, --eyebrow-leading, --eyebrow-tracking, color:var(--moss), and margin:0 0 28px. The only h1 has exact content “MADE BY HAND. / HELD BY / WEFT.” Use three block-level lines, font-size:var(--headline-size), line-height:var(--headline-leading), letter-spacing:var(--headline-tracking), font-weight:var(--headline-weight), text-transform:uppercase, color:var(--ink), and width:min(100%, 960px). The line containing “WEFT.” must extend 72 px beyond the nominal 5-column boundary into the art track. The h1 margin is 0. Set paint-order:stroke fill; -webkit-text-stroke:0.35px rgba(232,226,214,0.08) to counter subpixel softness without reducing type contrast.

Place .lede below the h1 with max-width:410px; margin:34px 0 0; exact text: “Pigment, pressure and patience. We print limited editions onto heavy cotton for rooms that keep their marks.” Use --body-size and --body-leading, color:var(--ink-muted). Beneath it place .actions with display:flex; gap:10px; margin-top:28px. The primary control is an anchor with exact visible text “VIEW THE EDITIONS” and accessible name “View the editions”. The secondary control is an anchor with exact visible text “MATERIAL NOTES” and accessible name “Read material notes”. Do not add icons to either control.

Add .edition-note in the lower left with margin-top:clamp(48px,10vh,104px); display:grid; grid-template-columns:1fr 1fr; gap:24px; width:410px; border-top:1px solid var(--line); padding-top:14px. The first block has label “LATEST DROP” and value “No. 08 / WET PAPER”. The second has label “SUBSTRATE” and value “12 OZ COTTON”. Use label color:var(--ink-faint), value color:var(--ink), 10 px monospace, and 14 px vertical separation.

The .art-column contains the only .swatch-wrap. At 1440 × 900, place it at left:-126px relative to the art track, top:var(--swatch-top), width:var(--swatch-w), height:var(--swatch-h), and do not scale it. The viewport crop will hide exactly 86.4 px. At 1920 × 1080, left:-112px and top:-118px. The .edge-mask and .swatch-art are both position:absolute; inset:0; width:720px; height:880px. The art starts at clip-path:inset(0 0 0 100%). A masked drop impression is allowed as a second filled path inside the same mask at translate(10px, 14px), fill rgba(0,0,0,0.28), but it must not extend the 720 × 880 coordinate system or add a CSS shadow.

Place one .material-tag inside the art-column, not inside the masked swatch, at left:42px; bottom:70px; z-index:5; transform:translateX(5.5556vw). It is a 2-row caption with border-left:2px solid var(--linen); padding:2px 0 2px 12px; color:var(--ink). Exact rows: “DYE LOT 08 / OLIVE CHALK” and “HAND-PULLED / 18 VARIATIONS”. Use --meta-size, --meta-leading, --meta-tracking, and opacity:0.84. The tag remains above the panel and therefore is not occluded.

Footer .site-footer is position:absolute; left:0; right:0; bottom:0; height:var(--footer-h); padding:0 var(--shell-pad-x); display:grid; grid-template-columns:5fr 7fr; align-items:center; border-top:1px solid var(--line-soft); color:var(--ink-faint); font:var(--meta-size)/var(--meta-leading) var(--font-mono); letter-spacing:var(--meta-tracking). The first cell has exact text “PORTLAND, OREGON / 45.5152° N”. The second cell has text-align:right and exact text “INDEPENDENT PRESS / 2025”. Neither is interactive.

F. THE UI LANGUAGE

Both action anchors use height:var(--button-h), padding:0 var(--button-pad-x), border-radius:var(--pill-radius), display:inline-flex; align-items:center; justify-content:center; font:600 10px/1 var(--font-mono); letter-spacing:0.12em; text-decoration:none; transition:transform 180ms var(--ease-expo), background-color 180ms ease, color 180ms ease, border-color 180ms ease. The primary uses background:linear-gradient(110deg,#D9C9A3 0%,#B8AE87 100%); color:#12100C; border:1px solid #D9C9A3. On hover, transform:translateY(-2px); background:linear-gradient(110deg,#E8E2D6 0%,#D9C9A3 100%); border-color:#E8E2D6. On active, transform:translateY(0). The secondary uses background:transparent; color:var(--ink); border:1px solid rgba(232,226,214,0.28). On hover, transform:translateY(-2px); background:rgba(232,226,214,0.07); border-color:rgba(232,226,214,0.62). On active, transform:translateY(0).

Navigation links have color:var(--ink-muted), text-decoration:none, and a pseudo-element with height:1px, bottom:-6px, left:0, width:0, background:var(--linen), transform-origin:right center, transition:width 220ms var(--ease-expo), transform 220ms var(--ease-expo). Hover and focus-visible use width:100% and transform-origin:left center. Every visible control receives a 2 px #D9C9A3 focus-visible outline with 4 px offset, never removed without replacement. Hover media queries must not hide focus.

G. MOTION

Register the custom property with @property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }. Animate .swatch-art with keyframes fringe-rotate { from { --a:0deg; } to { --a:360deg; } }, 26s linear infinite, animation-delay:-6.4s. Animate .swatch-wrap reveal with fringe-reveal { from { clip-path:inset(0 0 0 100%); transform:translate3d(64px,0,0); opacity:0.34; } to { clip-path:inset(0 0 0 0); transform:translate3d(0,0,0); opacity:1; } }, duration 1.1s, timing cubic-bezier(.76,0,.24,1), delay 120ms, fill-mode:both. The clip-path animation is permitted by the assignment as the one named reveal exception; during the ongoing rAF loop animate only transforms and opacity.

The exact initial stagger is:
.brand -> fade-up -> 0ms
nav -> fade-up -> 80ms
eyebrow -> fade-up -> 260ms
h1 -> fade-up -> 700ms
lede -> fade-up -> 860ms
actions -> fade-up -> 980ms
edition-note -> fade-up -> 1100ms
material-tag -> fade-up -> 1240ms
footer -> fade-up -> 460ms
swatch-wrap -> clip wipe -> 120ms
swatch-art -> conic rotation -> starts at 120ms and runs infinitely.

Define @keyframes fringe-up as from { opacity:0; transform:translate3d(0,18px,0); } to { opacity:1; transform:translate3d(0,0,0); }. Apply it for 600ms with cubic-bezier(.22,1,.36,1) and fill-mode:both. Define @keyframes fringe-rotate exactly as stated above. Define @keyframes fringe-reveal exactly as stated above. Do not add parallax, scroll-linked transforms, letter-by-letter effects, or looping movement to text. Do not alter DOM attributes except the one SVG turbulence seed every 900 ms.

H. RESPONSIVE TABLE

At 1440 × 900, use the root values without breakpoint overrides. The expected headline maximum is 116.64 px from 8.1vw. The art remains 720 × 880 with left:-126px and top:-96px. The right crop remains 86.4 px.

At 1920 × 1080, override --shell-pad-y:36px; --headline-size:155.52px; --lede max-width:430px; .art-column .swatch-wrap { left:-112px; top:-118px; }. The footer stays bottom-anchored and the page remains exactly 100dvh.

At 768 × 1024 and all widths from 601 through 900, set html, body, and .site-shell { height:auto; min-height:100dvh; overflow-x:hidden; overflow-y:auto; }. Change .site-header to position:relative; height:72px; padding:0 32px; grid-template-columns:1fr; nav { display:none; }. Set .hero to position:relative; inset:auto; height:auto; min-height:calc(100dvh - 72px); display:block; overflow:visible; padding:68px 32px 48px. Set .copy-column { padding:0; }. Set --headline-size:clamp(72px,13.2vw,101px); --headline-leading:0.82; .copy-column h1 { width:100%; }. Set .swatch-wrap { position:absolute; left:auto; right:-86.4px; top:332px; width:540px; height:660px; }. Because the internal SVG remains 720 × 880 and the wrapper uses a 0.75 scale, preserve the torn contour and keep 64.8 px outside the viewport. Hide .material-tag at this breakpoint. Set .edition-note { margin-top:610px; }. Set .site-footer { position:relative; height:64px; padding:0 32px; grid-template-columns:1fr 1fr; }. This breakpoint scrolls vertically but has no horizontal overflow.

At 390 × 844, set --shell-pad-x:20px; --headline-size:58px; --headline-leading:0.84; --headline-tracking:-0.065em; --body-size:14px. Set .site-header { height:62px; padding:0 20px; }. Set .hero { min-height:1230px; padding:54px 20px 46px; }. Set .eyebrow { margin-bottom:22px; }. Set .lede { max-width:320px; margin-top:26px; }. Set .actions { flex-direction:column; align-items:flex-start; gap:9px; margin-top:24px; }. Set .swatch-wrap { top:548px; right:-57.6px; width:384px; height:469.333px; }. Preserve an 8% crop. Set .edition-note { position:absolute; left:20px; top:1080px; width:320px; margin-top:0; }. Hide .material-tag. Set .site-footer { position:relative; height:70px; padding:0 20px; grid-template-columns:1fr; align-content:center; gap:5px; }. Footer first and second cells both use text-align:left.

At max-height:760px and min-width:901px, set --header-h:54px; --footer-h:48px; --headline-size:min(8.1vw,104px); .copy-column { padding-top:72px; padding-bottom:36px; }; .lede { margin-top:22px; }; .actions { margin-top:18px; }; .edition-note { margin-top:34px; }; .swatch-wrap { top:-132px; }. The page remains overflow:hidden and all footer content stays visible.

At max-height:680px and min-width:901px, set --header-h:50px; --footer-h:44px; --headline-size:86px; --headline-leading:0.76; .copy-column { padding-top:54px; padding-bottom:24px; }; .eyebrow { margin-bottom:18px; }; .lede { max-width:360px; font-size:13px; margin-top:16px; }; .actions { margin-top:14px; }. Set .edition-note { margin-top:22px; padding-top:10px; }. Set .swatch-wrap { top:-170px; }. Do not scale typography below 86 px.

I. FAILURE GUARDS

The final resting state of every text, control, rule, caption and panel is opacity:1; disabled opacity is never used to hide failed animation. All entrance animations use fill-mode:both and a deterministic final state. If SVG mask support or turbulence fails, the mask path still presents a visible hand-authored contour because the unfiltered white path remains the fallback base, and the panel must remain readable. If the custom-property animation is unsupported, --a remains 0deg and the conic gradient remains valid. If IntersectionObserver is unavailable, immediately mark all entrance targets as finished rather than waiting for observation.

Use a two-rAF fallback after DOMContentLoaded: first requestAnimationFrame schedules a second requestAnimationFrame; the second starts the reveal classes and telemetry loop. If requestAnimationFrame is unavailable, apply the final reveal classes immediately, set ready:true after a 0 ms timeout, and do not increment frames. If document.visibilityState is hidden, keep the page static and resume only after visibility returns; telemetry frames continue only while visible. Never leave controls at opacity:0 if scripting is disabled, so use a .js class on html only after the script begins and provide no-js-safe visible base styles.

The prefers-reduced-motion:reduce block must cancel fringe-up, fringe-rotate and fringe-reveal with animation:none !important; force animation-delay:0s; set transform:none; opacity:1; clip-path:inset(0); stop all CSS transitions and button hover translations. JavaScript must not start the continuous loop, must not change the noise seed, and must set ready:true after the second rAF or timeout. The reduced-motion page remains complete, static and fully interactive.

J. THE EXACT JS

Place this script as the final element in body with defer omitted because it is already last. It must use no imports, no fetch, no external data, no storage, and no console methods. The exact source logic is:

const demo = { name: 'fringe', ready: false, frames: 0, effects: [], errors: [] };
window.__DEMO__ = demo;
const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
const reveals = Array.from(document.querySelectorAll('[data-reveal]'));
const swatch = document.querySelector('.swatch-wrap');
const noise = document.querySelector('#fringe-noise-source');
const seeds = [17, 23, 31, 41, 53, 67, 79, 89];
let seedIndex = 0;
let nextSeed = 0;
let running = false;
let startedAt = 0;

window.addEventListener('error', function(event) {
  demo.errors.push(String(event.message || 'Unknown error'));
});

function finishReveals() {
  reveals.forEach(function(element) {
    element.classList.add('is-revealed');
  });
  if (swatch) swatch.classList.add('is-revealed');
}

function startFrameLoop(timestamp) {
  if (!running || motionQuery.matches) {
    demo.ready = true;
    return;
  }
  demo.frames += 1;
  if (!startedAt) startedAt = timestamp;
  if (noise && timestamp >= nextSeed) {
    seedIndex = (seedIndex + 1) % seeds.length;
    noise.setAttribute('seed', String(seeds[seedIndex]));
    nextSeed = timestamp + 900;
  }
  window.requestAnimationFrame(startFrameLoop);
}

function begin() {
  document.documentElement.classList.add('js');
  finishReveals();
  demo.effects.push('swatch-wipe', 'conic-rotation', 'grain-jitter', 'type-stagger');
  if (motionQuery.matches) {
    demo.ready = true;
    return;
  }
  running = true;
  nextSeed = 0;
  window.requestAnimationFrame(startFrameLoop);
}

motionQuery.addEventListener('change', function(event) {
  if (event.matches) {
    running = false;
    finishReveals();
  }
});

document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    running = false;
  } else if (!motionQuery.matches) {
    running = true;
    nextSeed = 0;
    window.requestAnimationFrame(startFrameLoop);
  }
});

if (typeof window.requestAnimationFrame === 'function') {
  window.requestAnimationFrame(function() {
    window.requestAnimationFrame(begin);
  });
} else {
  window.setTimeout(begin, 0);
}

The final HTML must include the three ambient rules as empty decorative elements with aria-hidden="true", a single SVG mask with aria-hidden="true", and no text duplicated in SVG. Navigation anchors may use href="#editions", "#materials", and "#notes"; those targets must resolve to existing noninteractive landmarks or sections within the same document, and clicking them must not create horizontal movement.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Grid Collapse

- Slug: `grid-collapse`
- Page: https://landingpageprompts.com/prompts/grid-collapse
- Effect: A perspective grid collapsing toward a vanishing point under terminal type
- Model: `kimi-k3` (Kimi-K3 (kimi-k3)) on Workbuddy proxy
- Build tokens: 13,811; total with repair and cross-check: 59,699
- Verification: 20/20 automated checks passed
- Independent cross-check: confirmed (confidence high)
- Acceptance criteria:
  - exactly one <h1> split into exactly 2 masked line elements (.line > .line-inner) with text 'Ship to the grid.' and 'Collapse the distance.'
  - canvas#grid paints non-blank content and keeps repainting (pixel hash changes across frames) at 1440x900
  - window.__DEMO__.ready becomes true, window.__DEMO__.frames increments in the rAF loop, effects contains 'perspective-grid' and 'scanline', errors stays empty
  - a .scanline element sweeps the viewport with a 4s linear infinite animation, and exactly 4 nav links + 3 footer links exist with accessible names
  - no horizontal overflow at 390px, 768px, 1440px, or 1920px; at >=901px body has overflow:hidden and .page height is 100dvh
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
Build one complete, self-contained `index.html` for **Vector** — a developer platform landing page. Document title: `Vector — Grid Collapse`. `<html lang="en">`. ONE file only: plain HTML + CSS + JS in `<style>`/`<script>`. No frameworks, no bundlers, no external media of any kind (no images, no video, no fonts other than Google Fonts, no CDN scripts). Every visual pixel is generated by CSS gradients, SVG, or `<canvas>`.

**Viewport rule:** on viewports `>= 901px` wide the page is a single frame: `html, body { height:100%; overflow:hidden }` and `.page { height:100dvh; overflow:hidden }`. NO SCROLL on desktop. On viewports `<= 900px` the page may scroll vertically. No horizontal overflow at any width.

**Do NOT build:** no video, no WebGL, no Three.js, no Lottie, no GSAP, no jQuery, no Tailwind, no React, no images (remote or base64), no audio, no forms, no pricing tables, no testimonials, no extra sections beyond the specified header / hero / footer, no footer links beyond the three specified, no cookie banner, no scroll indicator, no hamburger menu on desktop (menu only on `<=900px`).

---

## A. WHAT IS BEING BUILT

A single-viewport landing page for a developer platform called **Vector**. A full-bleed `<canvas>` renders an infinite perspective grid — a floor plane of hairlines receding toward a vanishing point at the vertical centre of the upper third, continuously accelerating toward the viewer (classic infinite-tunnel). The grid fades to pure black in the distance via a radial mask. Overlaid on top: monospace terminal-style type — a small prompt line, a large geometric-sans H1, a single-line muted "output" line. A thin horizontal scanning line sweeps the viewport top-to-bottom every 4 seconds. The aesthetic is black-terminal, precision-engineered, cinematic.

---

## B. THE BACKDROP — procedural canvas grid (the ONLY visual effect besides the scanline)

A single `<canvas id="grid">` fills the viewport: `position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block`. It is repainted every animation frame via `requestAnimationFrame`. It is NEVER a static image.

**Projection maths (canvas 2D, no libraries):**

- Camera at origin looking down -Z. Screen centre `(cx, cy)` where `cx = w/2`, `cy = h * 0.42` (vanishing point sits at 42% of viewport height — the upper-third anchor).
- Focal length `f = h * 0.9`.
- World floor plane at `y = 1` (camera height 1 unit).
- A world point `(x, 1, z)` with `z > 0` projects to screen:
  `sx = cx + (x * f) / z`
  `sy = cy + (f * 1) / z`   (floor projects below the horizon line `cy` because screen y grows downward and the camera looks level; the "+1" camera height pushes floor lines down)
- Depth range drawn: `z` from `zNear = 0.6` to `zFar = 80`.

**Longitudinal lines (the rails converging at the vanishing point):**

- `N = 26` lines, world x positions `x_i = (i - (N-1)/2) * 1.6` for `i = 0..25` (symmetric fan from `-20` to `+20` in world units, spacing 1.6).
- Each line is drawn as a polyline of 60 segments sampling z exponentially from `zNear` to `zFar`: `z_k = zNear * (zFar/zNear)^(k/59)`. Exponential sampling keeps segment density high near the camera where perspective stretches.
- Stroke colour: `rgba(110, 231, 168, alpha)` — the accent `#6ee7a8` — where alpha per segment is `0.34 * (1 - z_k/zFar)^1.6`. LineWidth 1px. Near segments are brightest; the far ones die out.

**Transverse lines (the rungs rushing toward the viewer):**

- Rungs sit at world depths `z_j = zNear * step^j` with `step = 1.14`, for all `j` with `z_j <= zFar` (≈ 38 rungs).
- Each rung is a horizontal line across the floor at depth `z_j`: project `(-22, 1, z_j)` and `(22, 1, z_j)` to screen and connect.
- Motion: a continuous phase `p = (t * speed) % 1` where `t` is seconds since start and `speed = 0.55`. Effective rung depth is `z_j' = z_j / step^p` — i.e. every rung's depth divides by the step as phase advances, so rungs accelerate toward the camera and wrap seamlessly (the classic infinite-corridor trick: when `p` wraps, rung `j` takes the exact place rung `j+1` held).
- Rung alpha: `0.30 * (1 - z_j'/zFar)^1.5`, same accent colour, 1px.

**Radial distance mask:** after all grid strokes, paint a radial gradient overlay centred at `(cx, cy)`: `rgba(0,0,0,0)` at radius 0 → `rgba(0,0,0,0)` at `r1 = min(w,h)*0.28` → `rgba(0,0,0,0.55)` at `r2 = min(w,h)*0.62` → `rgba(0,0,0,0.96)` at `r3 = max(w,h)*0.95`. This kills the grid at the edges and far distance so the frame fades to black.

**Vignette:** a second full-canvas radial gradient centred at screen centre: transparent to `rgba(0,0,0,0.42)` at the corners, drawn last, to deepen the cinematic frame.

**Frame budget:** total strokes per frame ≈ 26 polylines × 60 segments + ~38 rungs ≈ 1600 line segments. Use a single `ctx.beginPath()` per alpha bucket (bucket alphas into 8 quantised levels, one path per level) to keep draw calls under 10 per frame. Cap the device pixel ratio at `Math.min(window.devicePixelRatio, 2)`. Target 60fps; the loop must drop nothing — if `document.hidden`, skip painting but keep the rAF alive.

**Resize:** on window resize, set `canvas.width = innerWidth * dpr`, `canvas.height = innerHeight * dpr`, `ctx.setTransform(dpr,0,0,dpr,0,0)`, repaint immediately.

**Scanline (CSS, separate element):** a `div.scanline`, `position:fixed; left:0; right:0; height:1px; top:0; z-index:3; pointer-events:none; background: linear-gradient(90deg, transparent, rgba(110,231,168,0.55) 18%, rgba(110,231,168,0.55) 82%, transparent); box-shadow: 0 0 12px rgba(110,231,168,0.35)`. Keyframes `scan`: `0% { transform: translateY(-2vh); opacity:0 } 6% { opacity:1 } 92% { opacity:1 } 100% { transform: translateY(102vh); opacity:0 }`, `animation: scan 4s linear infinite`.

---

## C. LAYER STACK (back → front)

1. `html, body` — pure black `#000000`, forced twice (see Failure Guards).
2. `canvas#grid` — z-index 0, the perspective grid + radial masks + vignette.
3. `.scrim` — z-index 1, a fixed `linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 34%, rgba(0,0,0,0.12) 62%, rgba(0,0,0,0.72) 100%)` guaranteeing text contrast top and bottom.
4. `.page` — z-index 2, `position:relative; display:grid; grid-template-rows: auto 1fr auto; min-height:100dvh` (height:100dvh inside the desktop lock).
5. `.scanline` — z-index 3, above content (it sweeps over everything, terminal-style).
6. `.grain` — z-index 4, `position:fixed; inset:-50%; width:200%; height:200%; pointer-events:none; opacity:0.05`, an inline SVG `feTurbulence` noise (`<svg><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(#n)"/></svg>` as a data-URI background, tile size 160px), animated with `grain 0.9s steps(4) infinite` jittering `transform: translate` among 4 offsets `(0,0) (-2%,1%) (1%,-2%) (-1%,2%)`.

---

## D. TOKEN TABLE (defaults at ~1440px)

```
--bg:            #000000
--text:          #f2f2f2
--muted:         #8f8f8f
--dim:           #5c5c5c
--accent:        #6ee7a8
--accent-dim:    rgba(110,231,168,0.55)
--accent-line:   rgba(110,231,168,0.28)
--border:        rgba(255,255,255,0.14)
--border-soft:   rgba(255,255,255,0.09)
--logo:          15px
--logo-mark:     20px
--nav:           13.5px
--nav-h:         38px
--btn:           13.5px
--btn-h:         42px
--prompt:        13px
--h1:            56px
--output:        14px
--foot:          12.5px
--header-y:      24px
--header-x:      40px
--hero-x:        40px
--hero-y:        48px
--copy-max:      880px
--prompt-max:    560px
--mono:          "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
--sans:          "Inter", system-ui, -apple-system, "Segoe UI", sans-serif
```

Fonts (Google Fonts ONLY, with fallbacks as listed): `Inter:wght@400;500;600` and `JetBrains+Mono:wght@400;500`, loaded with one `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` and one stylesheet link with `display=swap`.

---

## E. THE COMPOSITION — exact build order

**.page** is the grid container with three rows: `<header>`, `<main>`, `<footer>`.

**HEADER** — `padding: var(--header-y) var(--header-x); display:flex; align-items:center; justify-content:space-between; gap:24px`.

- Left: `a.brand` (href `#`, accessible name "Vector home"): an inline SVG mark 20×20 — a right-pointing chevron built from two strokes: `<path d="M4 3 L16 10 L4 17" fill="none" stroke="#6ee7a8" stroke-width="2.2" stroke-linecap="square"/>` — followed by the word `vector` in `var(--mono)`, `font-size: var(--logo); font-weight:500; color:var(--text); letter-spacing:0.02em`. The underscore cursor `_` after the wordmark, `color: var(--accent)`, blinking: keyframes `blink` `0%,49% {opacity:1} 50%,100% {opacity:0}`, `animation: blink 1.06s steps(1) infinite`.
- Centre: `nav` with exactly 4 links: `docs`, `runtime`, `pricing`, `changelog` — all `href="#"`, mono, `font-size: var(--nav); color: var(--muted)`, each preceded by `./` in `var(--dim)` (so they read `./docs` etc.). Height `var(--nav-h)`, `display:flex; align-items:center; gap:30px`. Hover: `color: var(--accent)` over 0.18s ease; the `./` stays dim.
- Right: `a.cta` (href `#`) — the header button, text `$ npx vector init`, mono, `font-size: var(--btn); height: var(--btn-h); padding: 0 18px; display:inline-flex; align-items:center; border:1px solid var(--accent-line); border-radius:6px; color:var(--accent); background: rgba(110,231,168,0.06)`. Hover: `background: rgba(110,231,168,0.14); border-color: var(--accent-dim); box-shadow: 0 0 16px rgba(110,231,168,0.18)`, 0.2s ease.

**MAIN (hero)** — `display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding: var(--hero-y) var(--hero-x); max-width: var(--copy-max); margin: 0 auto; width:100%`. Left-aligned, vertically centred within the 1fr row — NOT bottom-anchored, NOT right-aligned.

1. `.prompt` — mono, `font-size: var(--prompt); color: var(--dim); max-width: var(--prompt-max)`. Exact copy: `hongvin@vector:~$ deploy --grid --watch`. The `hongvin@vector` part is `color: var(--accent)`; `:~$` is `var(--dim)`; the command is `var(--text)`. After the command, a block cursor `▉` (U+2589) in `var(--accent)` with the same `blink` animation.
2. `h1` — EXACTLY ONE `<h1>`, `var(--sans)`, `font-weight:600; font-size: var(--h1); letter-spacing:-0.04em; line-height:1.06; color:var(--text); margin: 22px 0 0`. Two masked lines (see Motion), exact copy:
   Line 1: `Ship to the grid.`
   Line 2: `Collapse the distance.`
   Line 2 contains `<em>distance</em>` styled `font-family: var(--mono); font-style:normal; font-weight:400; font-size:0.92em; color: var(--accent); letter-spacing:-0.02em`.
3. `.output` — mono, single line, `font-size: var(--output); color: var(--muted); margin-top:26px; white-space:nowrap`. Exact copy: `[ok] 214 nodes online · median latency 11ms · build 0.9.4`. The `[ok]` token is `color: var(--accent)`. On narrow screens it must shrink (see responsive), never wrap, never overflow.

**FOOTER** — `padding: 22px var(--header-x); display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--border-soft)`.

- Left: mono `var(--foot)`, `color: var(--dim)`: `© 2026 Vector Systems`.
- Centre: mono `var(--foot)`, `color: var(--dim)`: `status: all systems nominal` with a 7px square `background: var(--accent); box-shadow: 0 0 8px var(--accent-dim)` inline before it (a status pixel, `display:inline-block; margin-right:8px`).
- Right: exactly 3 links `github`, `x`, `irc` — mono, `var(--foot)`, `color: var(--muted)`, `gap:22px`, href `#`, hover `color: var(--text)`.

---

## F. THE UI LANGUAGE

There is exactly ONE button style in the page (the header CTA) — the terminal-chip: 6px radius, 1px `var(--accent-line)` border, 6% accent fill, mono text, accent glow on hover as specified above. Nav links are plain mono text with the `./` prefix convention — no pills, no backgrounds, no underline ever; hover swaps colour to accent. Footer links: same treatment in `var(--foot)`. Every interactive element gets `:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px }`. Selection: `::selection { background: rgba(110,231,168,0.28); color: #fff }`. No element on the page ever shows a default blue focus ring or a text underline.

---

## G. MOTION — entrance stagger + named keyframes

All entrance animations: `animation-duration: 0.95s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.16,1,0.3,1); animation-delay: var(--d, 0.08s)`. The `.appear` class is applied to each animated element with a modifier class selecting keyframes and an inline `--d`.

Stagger table (element → modifier → --d):
```
brand          appear--fade   0.08s
nav link 1     appear--fade   0.16s
nav link 2     appear--fade   0.24s
nav link 3     appear--fade   0.32s
nav link 4     appear--fade   0.40s
header cta     appear--chip    0.46s
prompt line    appear--type    0.55s
h1 line 1      appear--mask    0.70s
h1 line 2      appear--mask    0.86s
output line    appear--soft    1.06s  (duration 1.2s)
footer left    appear--fade    1.22s
footer centre  appear--fade    1.30s
footer right   appear--fade    1.38s
```

Named keyframes (all end at opacity 1 / identity transform):
```
in-fade   from { opacity: 0 }                                          to { opacity: 1 }
in-soft   from { opacity: 0; transform: translateY(12px) }             to { opacity: 1; transform: none }
in-mask   from { opacity: 0; transform: translateY(105%) }             to { opacity: 1; transform: none }
in-chip   from { opacity: 0; transform: translateY(10px) scale(0.96) } to { opacity: 1; transform: none }
in-type   from { opacity: 0; clip-path: inset(0 100% 0 0) }            to { opacity: 1; clip-path: inset(0 -5% 0 0) }
```

The H1 masking: each line of the H1 is wrapped in `<span class="line"><span class="line-inner appear appear--mask">…</span></span>` where `.line { display:block; overflow:hidden; padding: 0.04em 0.1em 0.10em }` and `.line-inner { display:inline-block }`. The `in-mask` translateY(105%) is clipped by the parent's overflow — the type rises out of a hard edge, terminal-style.

`in-type` on the prompt line reveals it left-to-right via clip-path, like a command being echoed.

The canvas grid, scanline, blink, and grain animations run continuously, independent of the entrance stagger.

---

## H. RESPONSIVE TABLE — token overrides per breakpoint (exact)

```
>= 1600px:
  --h1: 72px  --logo: 16px  --nav: 14.5px  --nav-h: 42px  --btn: 14.5px
  --btn-h: 46px  --prompt: 14px  --output: 15px  --foot: 13px
  --header-y: 28px  --header-x: 56px  --hero-x: 56px  --copy-max: 1020px

>= 1920px:
  --h1: 84px  --header-x: 72px  --hero-x: 72px  --copy-max: 1140px
  --output: 16px  --prompt: 15px

1280px – 1599px:
  --h1: 62px  --header-x: 48px  --hero-x: 48px  --copy-max: 920px

901px – 1279px:
  --h1: 46px  --nav-h: 34px  --header-x: 32px  --hero-x: 32px
  --copy-max: 760px  --output: 13px

>= 901px AND max-height 850px:
  --h1: 42px  --hero-y: 28px  --header-y: 18px  (h1 margin-top 16px, output margin-top 18px)

>= 901px AND max-height 720px:
  --h1: 36px  --hero-y: 18px  --header-y: 14px  --prompt: 12px  --output: 12.5px

>= 901px (desktop lock, all heights):
  html, body { height:100%; overflow:hidden }  .page { height:100dvh; overflow:hidden }

<= 900px:
  no vh lock; page may scroll; nav becomes a full-viewport overlay menu:
  - header keeps brand + burger button (<button class="burger" aria-label="Menu" aria-expanded="false">, three 18×1.5px bars in var(--text), gap 5px)
  - .menu { position:fixed; inset:0; z-index:10; background: rgba(0,0,0,0.92); backdrop-filter: blur(14px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding: 0 32px; gap: 26px; transform: translateY(-100%); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1) }
  - .menu.open { transform: none }
  - menu shows the 4 nav links stacked at --nav: 22px plus the CTA chip; Escape key, link click, and resize >900px all close it
  --h1: 40px  --header-x: 24px  --hero-x: 24px  --copy-max: 100%

<= 560px:
  --h1: 32px  --prompt: 11.5px  --output: 11.5px  --header-x: 20px  --hero-x: 20px
  footer becomes flex-direction:column; align-items:flex-start; gap:10px
  header CTA is hidden (it lives inside the menu on mobile)
```

Canvas constants also scale: below 901px the vanishing point `cy = h * 0.40`, longitudinal line count `N = 18`, rung step unchanged. The `.output` line at <=560px drops the `· build 0.9.4` segment via a `<span class="opt">` hidden at that breakpoint (so the line never overflows).

---

## I. FAILURE GUARDS — the page is never blank, never broken

1. **Black-first:** the FIRST CSS rule is `html, body { background:#000000 !important; color:#f2f2f2 }`; the body tag carries `style="background:#000;color:#f2f2f2"`; a later rule restates `html, body { background:#000000; background: var(--bg, #000000) }`.
2. **Resting opacity is 1:** every `.appear` element's un-animated computed style is its final state (opacity 1, no transform). Animations use `fill-mode: both` only to hold the FROM state during the delay. If CSS animations fail or JS never runs, the page renders complete and readable.
3. **rAF entrance fallback:** after two `requestAnimationFrame` ticks, if `el.getAnimations()` reports nothing running or finished for any `.appear`, JS adds `.is-in` to every `.appear` (`.is-in { animation:none !important; opacity:1 !important; transform:none !important; clip-path:none !important }`).
4. **Canvas fallback:** if `canvas.getContext('2d')` returns null, JS adds class `.no-canvas` to `<html>` and CSS paints a static CSS-only grid: `.no-canvas body { background-image: linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px); background-size: 48px 48px; }` — a flat hairline grid so the page still reads as "grid", statically.
5. **Reduced motion:** inside `@media (prefers-reduced-motion: reduce)`: `*, *::before, *::after { transition:none !important; animation:none !important }`; force `.appear, .line-inner, .prompt, .output` to `opacity:1 !important; transform:none !important; clip-path:none !important`; the canvas loop still runs but with `speed = 0` (grid drawn once, static) and the scanline is `display:none`.
6. **No console output** in the happy path: no `console.log`, no thrown exceptions; every canvas call guarded.

---

## J. THE EXACT JS (only this, vanilla, one IIFE at end of body)

1. **Telemetry first, before anything else:**
   `window.__DEMO__ = { name: 'grid-collapse', ready: false, frames: 0, effects: [], errors: [] };`
   Push `'perspective-grid'` and `'scanline'` into `effects` once implemented. Add `window.addEventListener('error', e => window.__DEMO__.errors.push(String(e.message || e)))`.
2. **Canvas loop:** get `#grid`, get 2d context (guard null → `.no-canvas` path), implement the projection maths from section B verbatim (26 lines, 60 segments, exponential z sampling, step 1.14, speed 0.55, 8 alpha buckets). Each frame: increment `window.__DEMO__.frames` by exactly 1, clear to `#000`, draw lines, rungs, radial mask, vignette. On the FIRST completed paint set `window.__DEMO__.ready = true`. Loop with `requestAnimationFrame`; skip painting while `document.hidden` but keep the loop alive.
3. **Resize handler** (debounced via rAF flag): resize canvas backing store with dpr cap 2, repaint.
4. **Entrance fallback:** two nested rAFs after DOMContentLoaded, then per `.appear`: if `el.getAnimations` exists and returns no running/finished animations, add `.is-in` to all `.appear` elements.
5. **Menu (mobile only):** burger click toggles `.menu.open` and `aria-expanded`; Escape closes; any menu link click closes; window resize to >900px closes.
6. **prefers-reduced-motion:** read `matchMedia('(prefers-reduced-motion: reduce)')` once at startup; if true, set grid speed to 0 (paint one static frame, still set ready, still count that 1 frame).

No other JS. No libraries. No console calls.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Halide

- Slug: `halide`
- Page: https://landingpageprompts.com/prompts/halide
- Effect: A camera iris of 8 SVG aperture blades breathing open and shut inside a rotating conic lens ring, with lens bloom and chromatic fringe
- Model: `xiaomi/mimo-v2.6-pro` (Xiaomi MiMo v2.6 Pro (xiaomi/mimo-v2.6-pro)) on cmd-code
- Build tokens: 28,032; total with repair and cross-check: 100,394
- Verification: 20/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - the document contains exactly one h1 built from exactly two .line > .line-inner masked lines with the visible copy 'Night is' and 'undeveloped light.', and uses semantic header, nav, main, and footer landmarks with exactly 3 nav links and 3 stat items
  - an svg.iris exists with exactly 8 .blade groups animating rotate(10deg) to rotate(56deg) on a 16s aperture-breathe loop, and a .iris-ring with a conic-gradient background rotating 360deg over 28s linear
  - window.__DEMO__ is initialized with name 'halide', ready becomes true after the first painted dust frame, frames increments once per requestAnimationFrame tick (>= 20 per 1.2s at 1440x900), effects contains aperture-iris, lens-bloom, chromatic-fringe, dust-motes and film-grain, and errors stays empty in the happy path
  - canvas#dust paints non-blank pixel content at 1440x900 and the script never calls ctx.filter, ctx.shadowBlur, or getBoundingClientRect inside the animation loop
  - no horizontal overflow at 390px, 768px, 1440px or 1920px; at >= 901px body has overflow:hidden and .page height is 100dvh; a prefers-reduced-motion: reduce block freezes all optics and dust while leaving every text element at opacity 1
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
## A. WHAT IS BEING BUILT

Build one complete, valid index.html — a single-viewport cinematic landing page for **Halide**, a computational photography-AI company. Document title: "Halide — Night is Undeveloped Light". html lang="en". ONE file: plain HTML + one style block + one vanilla script at end of body. No build step, no framework, no bundler.

**Viewport rule:** at width >= 901px the page is exactly one frame: html, body { height:100%; overflow:hidden } and .page { height:100dvh; overflow:hidden }. NO SCROLL on desktop. At width <= 900px the page may scroll vertically. No horizontal overflow at 390, 768, 1440 or 1920.

**Do NOT build:** no video, mp4/webm/gif, remote images, base64 photo blobs, third-party CDN URLs, WebGL, Three.js, GSAP, Lottie, jQuery, Tailwind, React, audio, forms, pricing tables, testimonials, blog, cookie banner, scroll indicator, modal dialogs, gallery grids, extra sections beyond header / hero / stats footer, footer content beyond the three specified stats, desktop hamburger (burger only <= 900px). Google Fonts is the ONLY network request.

**The single visual idea:** a black photographic darkroom, one light behind one lens. Centre-upper: a camera iris — 8 SVG aperture blades on barrel-ring pivots, breathing open and shut over 16s. A conic-gradient focus ring turns around it like a lens barrel (28s); a warm lens bloom breathes behind (9s); a 6px red/cyan chromatic fringe drifts on the blade rim (34s). Dust motes rise through the bloom on a tiny canvas. Over the optics: a bottom-anchored hero (eyebrow chip, two masked serif headline lines, lead, two buttons) and a three-item stats footer on a hairline.

---

## B. THE BACKDROP — the optical stack (counts, blur radii, gradient stops, drift periods)

Everything behind the type lives in one fixed .backdrop at inset:0, overflow:hidden, pointer-events:none, z-index:0.

1. **.room-bg** (inset:0, z-index:0) background layers, back to front: radial-gradient(ellipse 130% 85% at 50% 40%, rgba(255,180,84,0.10) 0%, rgba(255,150,60,0.045) 30%, transparent 62%); radial-gradient(circle at 50% 40%, rgba(255,240,214,0.06) 0%, transparent 26%); linear-gradient(180deg, #07060a 0%, #0b0908 38%, #060505 72%, #030202 100%).
2. **.bloom** (z-index:1) centred (left:50%, top:var(--iris-top), translate(-50%,-50%)), size calc(var(--iris) * 1.55); background:radial-gradient(circle, rgba(255,214,150,0.50) 0%, rgba(255,180,84,0.26) 24%, rgba(255,140,50,0.10) 46%, transparent 72%); filter:blur(48px); opacity:0.76; animation bloom-pulse 9s ease-in-out infinite (opacity 0.62 <-> 0.90, scale 1 <-> 1.05).
3. **.bloom-core** (z-index:2) size calc(var(--iris) * 0.5), same centring; background:radial-gradient(circle, rgba(255,240,214,0.55) 0%, rgba(255,196,120,0.18) 38%, transparent 70%); filter:blur(18px); opacity:0.8.
4. **.flare** (z-index:3) left:50%; top:var(--iris-top); width:150vw; height:3px; transform:translate(-50%,-50%) rotate(-2.4deg); background:linear-gradient(90deg, transparent 0%, rgba(122,200,255,0.20) 20%, rgba(255,220,170,0.42) 50%, rgba(255,92,122,0.18) 80%, transparent 100%); filter:blur(7px); opacity:0.42; animation flare-drift 22s ease-in-out infinite (translateX -2.5% <-> +2.5%, rotate -2.4deg <-> 1.6deg, opacity 0.34 <-> 0.58).
5. **.iris-ring** (z-index:5, the rotating conic ring) size var(--iris), centred, border-radius:50%, background:conic-gradient(from 0deg, rgba(255,180,84,0.00) 0deg, rgba(255,180,84,0.55) 40deg, rgba(255,240,214,0.85) 72deg, rgba(255,180,84,0.10) 130deg, rgba(255,180,84,0.00) 190deg, rgba(90,209,255,0.28) 250deg, rgba(255,180,84,0.42) 305deg, rgba(255,180,84,0.00) 360deg); mask plus -webkit-mask radial-gradient(circle, transparent 0 calc(50% - 26px), #000 calc(50% - 25px) 50%, transparent calc(50% + 1px)) — a 26px ring; rest rotate(24deg); animation ring-spin 28s linear infinite.
6. **.iris-ticks** (z-index:6) same box; background:repeating-conic-gradient(from 0deg, rgba(255,236,210,0.55) 0deg 0.5deg, transparent 0.5deg 7.5deg) — exactly 48 ticks; outer 8px mask ring radial-gradient(circle, transparent 0 calc(50% - 9px), #000 calc(50% - 8px) 50%, transparent calc(50% + 1px)); opacity:0.28; animation ticks-spin 40s linear infinite reverse.
7. **svg.iris** (z-index:7) viewBox "0 0 400 400" on a wrapper of size calc(var(--iris) * 0.72) centred on the axis. Exactly 8 blades. Barrel: <circle cx="200" cy="200" r="150" fill="none" stroke="rgba(255,196,120,0.22)" stroke-width="1.2"/>. Blade path, instanced 8 times: d="M200 50 A150 150 0 0 1 324.4 116.1 Z" — a circular segment: pivot corner (200,50) at the barrel top, leading corner (324.4,116.1), 56 degrees of arc clockwise. Each instance: outer <g transform="rotate(k * 45, 200, 200)"> for k = 0..7 wrapping <g class="blade"> with transform-box:view-box; transform-origin:200px 50px; transform:rotate(30deg) at rest; animation aperture-breathe 16s ease-in-out infinite. Keyframes swing rotate(10deg) (aperture radius 118 in the 400 viewBox, open) to rotate(56deg) (radius 16, nearly shut); the 8 straight leading edges form the opening. Blade fill <linearGradient id="bladeMetal" x1="0" y1="0" x2="1" y2="1"> stops offset 0 #35302a, 0.55 #1c1916, 1 #0f0d0b (fill url(#bladeMetal)); stroke="rgba(255,196,120,0.30)" stroke-width="1.2". Hairline rim <circle cx="200" cy="200" r="118" fill="none" stroke="rgba(90,209,255,0.16)" stroke-width="1"/>.
8. **.glass** (z-index:8) svg.iris box, border-radius:50%, background:radial-gradient(circle at 34% 28%, rgba(255,255,255,0.16) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(90,209,255,0.10) 0%, transparent 60%); box-shadow: inset 0 0 60px rgba(0,0,0,0.55).
9. **.fringe** (z-index:9, chromatic fringe) size calc(var(--iris) * 0.78), centred, border-radius:50%, background:conic-gradient(from 15deg, rgba(255,92,122,0.55) 0deg, transparent 70deg, rgba(90,209,255,0.55) 150deg, transparent 250deg, rgba(255,92,122,0.55) 360deg); 12px ring mask radial-gradient(circle, transparent 0 calc(50% - 13px), #000 calc(50% - 12px) calc(50% - 1px), transparent 50%); filter:blur(6px); opacity:0.32; mix-blend-mode:screen; animations fringe-spin 34s linear infinite reverse + fringe-breathe 7s ease-in-out infinite (opacity 0.24 <-> 0.38).
10. **canvas#dust** (z-index:10) fixed inset:0, size 100%, pointer-events:none. Exactly 34 motes at desktop, 24 at <= 900px, 16 at <= 560px. Per mote (deterministic LCG, seed 20260214): radius 0.6px–2.2px, rise 4px/s–11px/s, sway amplitude 8px–22px at 0.12Hz–0.31Hz, fill rgba(255,206,152, a) with a 0.05–0.18. Pure time function: y = (y0 - t * vy) mod (h + 60) - 30; x = x0 + sin(t * swayHz * 6.2832 + phase) * swayAmp. Cost: 34 arcs + 1 clear per frame — under 40 canvas primitives, ZERO ctx.filter, ZERO ctx.shadowBlur anywhere in the code.
11. **.grain** (z-index:30) fixed inset:-50%, size 200%, opacity:0.045; background: inline SVG feTurbulence data-URI (feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch" then feColorMatrix type="saturate" values="0"), tile 160px; animation grain 0.9s steps(4) infinite jittering translate among (0,0) (-2%,1%) (1%,-2%) (-1%,2%).

**Resolution trick:** dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = cssWidth * dpr; canvas.height = cssHeight * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0). Sizes are read once in resizeCanvas — getBoundingClientRect allowed THERE only. Resize: one boolean flag + requestAnimationFrame, no timers.

**Per-frame cost budget:** 1 clear + 34 arc fills, under 1.5ms at 1440x900. Ring, ticks, blades, fringe, bloom, flare, grain animate transform/opacity only — zero layout, zero JS paint. No DOM reads beyond cached handles in the loop. The loop sustains >= 20 frames per 1.2s at 1440x900 headless. If document.hidden, keep loop and counter alive, skip the paint.

---

## C. THE LAYER STACK (back -> front, z-index)

1. html, body — #07060a, forced twice (Failure Guards).
2. .backdrop — z-index:0, fixed inset:0, pointer-events:none, overflow:hidden. Inside it: .room-bg 0, .bloom 1, .bloom-core 2, .flare 3, .iris-stage 5 (fixed box left:50%, top:var(--iris-top), size var(--iris), transform:translate(-50%,-50%)) holding .iris-ring 5, .iris-ticks 6, svg.iris 7 (width calc(var(--iris) * 0.72), centred left:50% top:50% translate(-50%,-50%)), .glass 8, .fringe 9; canvas#dust 10; .grain 30.
3. .scrim — z-index:20, fixed inset:0, pointer-events:none, background:linear-gradient(180deg, rgba(3,2,2,0.55) 0%, rgba(3,2,2,0.10) 30%, rgba(3,2,2,0.28) 62%, rgba(3,2,2,0.86) 100%) so the bottom-anchored hero and stats always clear contrast over the bloom.
4. .page — z-index:40, position:relative; display:grid; grid-template-rows:auto minmax(0, 1fr) auto; min-height:100dvh (height:100dvh inside the desktop lock).
5. main.hero z-index:50; header.site-header and footer.stats-footer z-index:60.
6. .menu (mobile, when open) — fixed inset:0, z-index:80.

---

## D. TOKEN TABLE (defaults at 1440x900)

```
--bg:            #07060a
--bg-2:          #0b0908
--text:          #f6f1ea
--text-soft:     #d8cfc4
--muted:         #9b9287
--dim:           #6b645b
--accent:        #ffb454
--accent-hot:    #ffe3ae
--accent-soft:   rgba(255,180,84,0.55)
--accent-line:   rgba(255,180,84,0.30)
--fringe-r:      #ff5c7a
--fringe-b:      #5ad1ff
--border:        rgba(255,236,210,0.16)
--border-soft:   rgba(255,236,210,0.09)
--focus:         #ffe3ae
--serif:         "Instrument Serif", Georgia, "Times New Roman", serif
--sans:          "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
--mono:          "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
--logo:          16px
--logo-track:    0.22em
--nav:           13.5px
--nav-h:         38px
--btn:           13.5px
--btn-h:         44px
--chip-h:        30px
--eyebrow:       12px
--h1:            78px
--lead:          18px
--stat-val:      26px
--stat-label:    12px
--header-y:      26px
--header-x:      44px
--hero-x:        44px
--hero-bottom:   56px
--copy-max:      720px
--iris:          560px
--iris-top:      42%
--radius-pill:   999px
--focus-w:       2px
--focus-offset:  3px
--bloom-blur:    48px
--fringe-blur:   6px
--grain-op:      0.045
--ease-out:      cubic-bezier(0.16,1,0.3,1)
--enter-dur:     0.95s
```

Fonts: Google Fonts ONLY — Instrument Serif 400, Inter 400;500;600, JetBrains Mono 400;500 — one preconnect to https://fonts.gstatic.com (crossorigin) and one stylesheet link with display=swap, with the fallback stacks above.

---

## E. THE COMPOSITION — exact build order

**.page** holds <header class="site-header">, <main class="hero">, <footer class="stats-footer"> in grid rows auto / 1fr / auto.

**HEADER** — display:flex; align-items:center; justify-content:space-between; gap:24px; padding:var(--header-y) var(--header-x).

- a.brand (href "#", accessible name "Halide home"): inline SVG mark 22x22 — circle cx 11 cy 11 r 8.4 fill none stroke currentColor stroke-width 1.5 plus three 1px micro-iris chords in var(--accent) at 0/120/240 degrees — then "HALIDE", var(--sans), font-size var(--logo), weight 600, letter-spacing var(--logo-track), color var(--text), no underline.
- nav with exactly 3 links — "Optics", "Pipeline", "Journal" — href "#", var(--sans), font-size var(--nav), weight 500, color var(--muted), display:flex; gap:32px; height:var(--nav-h); align-items:center. Hover: color var(--text), 0.18s ease.
- a.cta (href "#", text "Request access"): height var(--btn-h); padding 0 20px; inline-flex; align-items:center; border-radius var(--radius-pill); font-size var(--btn); font-weight 600; color var(--accent-hot); border 1px solid var(--accent-line); background linear-gradient(180deg, rgba(255,180,84,0.16) 0%, rgba(255,180,84,0.05) 100%).

**MAIN (hero, bottom-anchored)** — display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding:0 var(--hero-x) var(--hero-bottom); copy hugs the LEFT page padding — never centred, right-aligned or vertically centred. Inner .hero-copy: width:100%; max-width:var(--copy-max); display:flex; flex-direction:column; align-items:flex-start.

1. .chip (a <p>, not interactive): height var(--chip-h); padding 0 14px; inline-flex; align-items:center; border-radius var(--radius-pill); border 1px solid var(--border); background rgba(255,180,84,0.06); var(--mono) at var(--eyebrow), letter-spacing 0.18em, color var(--accent). Exact copy: "COMPUTATIONAL PHOTOGRAPHY".
2. h1 — EXACTLY ONE <h1>, var(--serif), font-weight 400, font-size var(--h1), line-height 0.98, letter-spacing -0.015em, color var(--text), margin: 20px 0 0. Two masked lines (Motion): line 1 "Night is"; line 2 "undeveloped light." with <em>undeveloped</em> italic, color var(--accent-hot), text-shadow 1.5px 0 rgba(255,92,122,0.35), -1.5px 0 rgba(90,209,255,0.35) (the lens fringe).
3. .lead — var(--sans), var(--lead), line-height 1.55, letter-spacing -0.012em, color var(--text-soft), max-width 560px, margin: 22px 0 0. Exact copy: "Halide rebuilds the photograph your sensor almost saw — twelve-frame multi-exposure fusion, per-channel denoise and full lens simulation, resolved in 38 milliseconds."
4. .actions — display:flex; gap:12px; flex-wrap:wrap; margin-top: 30px. Two anchors: .btn--primary href "#" text "Request early access"; .btn--ghost href "#" text "See the pipeline".

**FOOTER (three-item stats)** — display:grid; grid-template-columns:repeat(3, 1fr); gap:0; padding: 22px var(--header-x) 28px; border-top:1px solid var(--border-soft). Exactly one <ul> with exactly three <li>, nothing else. Each li: display:grid; gap:6px; padding:0 30px; li:first-child padding-left:0; li:last-child padding-right:0; li + li border-left:1px solid var(--border-soft); li:nth-child(2) text-align:center; li:nth-child(3) text-align:right. Each li holds <strong class="stat-val"> (var(--mono), var(--stat-val), weight 500, letter-spacing -0.02em, color var(--text)) and <span class="stat-label"> (var(--mono), var(--stat-label), letter-spacing 0.14em, uppercase, color var(--dim)). Exact pairs left to right: "38 ms" / "RAW fusion latency"; "+1.4 EV" / "shadow detail recovered"; "12" / "frames per capture".

---

## F. THE UI LANGUAGE

- **.btn (shared base):** inline-flex; align-items:center; justify-content:center; height var(--btn-h); padding 0 22px; border-radius var(--radius-pill); font-family var(--sans); font-size var(--btn); font-weight 600; letter-spacing 0.01em; no underline; position:relative; overflow:hidden; transition transform/border-color/background/color/box-shadow 220ms var(--ease-out).
- **.btn--primary:** color #241403; border 1px solid rgba(255,227,174,0.65); background linear-gradient(180deg, #ffe3ae 0%, #ffb454 52%, #e08f2c 100%); box-shadow 0 14px 44px rgba(255,180,84,0.22), inset 0 1px 0 rgba(255,255,255,0.62). Hover: background linear-gradient(180deg, #fff4dd 0%, #ffc272 48%, #ea9a38 100%), translateY(-1px), box-shadow 0 18px 54px rgba(255,180,84,0.32). Active translateY(0).
- **.btn--ghost:** color var(--text-soft); border 1px solid var(--border); background rgba(255,236,210,0.035). Hover: color var(--text), border-color var(--accent-line), background rgba(255,180,84,0.08), translateY(-1px).
- **Glint** on .btn and .cta: content ""; position:absolute; inset:-1px; background linear-gradient(112deg, transparent 0%, transparent 36%, rgba(255,240,214,0.20) 50%, transparent 64%, transparent 100%); transform translateX(-140%); transition transform 680ms var(--ease-out); hover drives it to translateX(140%).
- **.cta (header)** takes .btn base at padding 0 20px with section E's amber hairline look; hover: border-color var(--accent-soft), background linear-gradient(180deg, rgba(255,180,84,0.24) 0%, rgba(255,180,84,0.08) 100%), box-shadow 0 0 20px rgba(255,180,84,0.20).
- **Nav links** plain, no pills, no underline; hover color var(--text). **.chip** never reacts.
- **Focus:** every a and button gets :focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); border-radius: var(--radius-pill) }. Selection: ::selection { background: rgba(255,180,84,0.30); color: #1a1005 }. No default blue ring, no underline anywhere.

---

## G. MOTION — entrance stagger and named keyframes

Entrance animations: animation-duration var(--enter-dur); animation-fill-mode both; animation-timing-function var(--ease-out); animation-delay var(--d, 0.08s). Each element: .appear + one modifier + inline --d. Resting state is the final state.

Stagger table (element -> modifier -> --d):
```
brand            appear--fade   0.08s
nav link 1       appear--fade   0.16s
nav link 2       appear--fade   0.24s
nav link 3       appear--fade   0.32s
header cta       appear--chip   0.40s
iris stage       appear--open   0.18s   (duration 1.4s)
eyebrow chip     appear--pop    0.62s
h1 line 1        appear--mask   0.76s
h1 line 2        appear--mask   0.92s
lead             appear--soft   1.10s
primary button   appear--chip   1.24s
ghost button     appear--chip   1.32s
stat 1           appear--stat   1.42s
stat 2           appear--stat   1.50s
stat 3           appear--stat   1.58s
```

Named entrance keyframes (all end at opacity 1 / identity):
```
in-fade   from { opacity: 0 }                                                to { opacity: 1 }
in-soft   from { opacity: 0; transform: translateY(14px); filter: blur(4px) } to { opacity: 1; transform: none; filter: blur(0) }
in-mask   from { opacity: 0; transform: translateY(108%) }                   to { opacity: 1; transform: none }
in-chip   from { opacity: 0; transform: translateY(10px) scale(0.96) }       to { opacity: 1; transform: none }
in-pop    0% { opacity: 0; transform: scale(0.94) }  68% { opacity: 1; transform: scale(1.03) }  100% { opacity: 1; transform: none }
in-open   from { opacity: 0; transform: scale(0.86) }                        to { opacity: 1; transform: none }
```

Named continuous keyframes (the optics):
```
aperture-breathe  16s ease-in-out infinite
  0% { transform: rotate(10deg) }  44% { transform: rotate(56deg) }
  52% { transform: rotate(56deg) }  96% { transform: rotate(10deg) }
  100% { transform: rotate(10deg) }
ring-spin         28s linear infinite          from { transform: rotate(24deg) } to { transform: rotate(384deg) }
ticks-spin        40s linear infinite reverse  (360deg)
fringe-spin       34s linear infinite reverse  (360deg)
bloom-pulse       9s ease-in-out infinite  0%,100% { opacity: 0.62; transform: translate(-50%,-50%) scale(1) }  50% { opacity: 0.90; transform: translate(-50%,-50%) scale(1.05) }
fringe-breathe    7s ease-in-out infinite  0%,100% { opacity: 0.24 }  50% { opacity: 0.38 }
flare-drift       22s ease-in-out infinite  0%,100% { transform: translate(-50%,-50%) translateX(-2.5%) rotate(-2.4deg); opacity: 0.34 }  50% { transform: translate(-50%,-50%) translateX(2.5%) rotate(1.6deg); opacity: 0.58 }
grain             0.9s steps(4) infinite  translate among (0,0) (-2%,1%) (1%,-2%) (-1%,2%)
```

H1 masking: each line is <span class="line"><span class="line-inner appear appear--mask" style="--d:0.76s">…</span></span> with .line { display:block; overflow:hidden; padding: 0.06em 0.06em 0.12em } and .line-inner { display:inline-block } — type rising from a hard edge. Periods 16s/28s/34s/40s/9s/7s are non-harmonic so the optics never re-sync.

---

## H. RESPONSIVE TABLE — exact token overrides per breakpoint

```
>= 1600px:
  --iris: 640px  --h1: 92px  --lead: 19px  --logo: 17px  --nav: 14px  --nav-h: 40px
  --btn: 14px  --btn-h: 46px  --stat-val: 30px
  --header-y: 30px  --header-x: 56px  --hero-x: 56px  --hero-bottom: 64px  --copy-max: 820px

>= 1920px:
  --iris: 720px  --h1: 106px  --lead: 20px  --stat-val: 34px  --stat-label: 12.5px
  --header-x: 72px  --hero-x: 72px  --hero-bottom: 72px  --copy-max: 900px

1280px – 1599px:
  --iris: 520px  --h1: 74px  --copy-max: 680px

901px – 1279px:
  --iris: 440px  --iris-top: 38%  --h1: 58px  --lead: 16px  --stat-val: 24px
  --nav: 12.5px  --btn: 12.5px  --header-x: 30px  --hero-x: 30px  --hero-bottom: 44px  --copy-max: 600px

>= 901px AND max-height 850px:
  --iris: 420px  --iris-top: 35%  --h1: 54px  --lead: 16px  --stat-val: 22px  --chip-h: 28px
  --header-y: 18px  --hero-bottom: 36px  (h1 margin-top 14px, lead 16px, actions 22px)

>= 901px AND max-height 720px:
  --iris: 340px  --iris-top: 32%  --h1: 44px  --lead: 15px  --eyebrow: 11px  --stat-val: 20px  --stat-label: 11px
  --chip-h: 26px  --btn-h: 38px  --header-y: 14px  --hero-bottom: 26px  (footer padding 14px top, 18px bottom)

>= 901px (desktop lock, all heights):
  html, body { height:100%; overflow:hidden }  .page { height:100dvh; overflow:hidden }

<= 900px:
  no viewport lock; vertical scroll; nav + CTA move into a burger menu:
  - header keeps .brand + <button class="burger" aria-label="Open navigation" aria-expanded="false">, three 18x1.5px bars, var(--text), gap 5px
  - .menu { position:fixed; inset:0; z-index:80; background: rgba(7,6,10,0.94); backdrop-filter: blur(14px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding: 0 32px; gap: 26px; transform: translateY(-100%); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1) }  .menu.open { transform: none }
  - menu shows 3 nav links at 22px + the .cta chip; Escape, any link click, resize > 900px close it
  --iris: min(78vw, 460px)  --iris-top: 34%  --h1: 46px  --lead: 16px  --stat-val: 22px
  --header-x: 24px  --hero-x: 24px  --hero-bottom: 40px  --copy-max: 100%   (dust: 24 motes)

<= 560px:
  --iris: min(86vw, 340px)  --iris-top: 30%  --h1: 36px  --lead: 15px  --eyebrow: 11px
  --stat-val: 19px  --stat-label: 10.5px  --header-x: 20px  --hero-x: 20px  --hero-bottom: 32px
  stats footer stacks: grid-template-columns:1fr; li { padding: 12px 0; text-align: left !important }; li + li { border-left: 0; border-top: 1px solid var(--border-soft) }
  .actions { width:100% }  .btn { flex: 1 1 100% }   (dust: 16 motes)
```

---

## I. FAILURE GUARDS — the page is never blank, never broken

1. **Black-first:** the FIRST CSS rule is html, body { background:#07060a !important; color:#f6f1ea }; body carries style="background:#07060a;color:#f6f1ea"; a later rule restates html, body { background:#07060a; background: var(--bg, #07060a) }.
2. **Resting opacity is 1:** every .appear element's un-animated computed style is its final state (opacity 1, no transform, no filter); keyframes own the FROM states; fill-mode:both holds them only during the delay. If CSS animation fails or JS never runs, the page renders complete.
3. **Two-rAF entrance fallback:** after two nested requestAnimationFrame callbacks, for each .appear call el.getAnimations({ subtree:false }); if none reports playState "running"/"finished", add .is-in to ALL .appear. No getAnimations: run the sweep unconditionally after the two rAFs. .is-in forces animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important.
4. **Canvas fallback:** if canvas or getContext("2d") is missing, add .no-canvas to <html>, push "canvas-unavailable" into window.__DEMO__.errors, and paint static dust on .backdrop::after with two radial-gradient dot layers (rgba(255,206,152,0.14) 0 1.5px, transparent 2px) at background-size 180px 220px and 260px 300px, offsets 40px 0 and 0 90px. Optics stay fully visible; only motes degrade.
5. **Reduced motion:** inside @media (prefers-reduced-motion: reduce): *, *::before, *::after { transition:none !important; animation:none !important }, and .appear / .appear.is-in forced to opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important. Optics freeze at mid-breath resting transforms: .blade rotate(30deg) (half-open), .iris-ring rotate(24deg), .iris-ticks rotate(-12deg), .fringe rotate(38deg) opacity 0.32, .bloom translate(-50%,-50%) scale(1) opacity 0.76, .flare translate(-50%,-50%) rotate(-2.4deg) opacity 0.42, .grain display:none. Dust paints exactly ONE static frame at t = 0 then stops; ready still becomes true, frames stops at 1. Nothing moves.
6. **Contrast floor:** h1 and stat values #f6f1ea on #07060a, lead #d8cfc4 over the scrim, labels #6b645b 12px uppercase above 4.5:1 — never drop text opacity below 0.86.
7. **Zero console output:** no console calls anywhere, no thrown exceptions, every canvas and DOM call guarded.

---

## J. THE EXACT JS (only this, vanilla, one IIFE at end of body)

1. **Telemetry first:** window.__DEMO__ = { name: 'halide', ready: false, frames: 0, effects: [], errors: [] }; then push exactly these effect names once, in order: 'aperture-iris', 'lens-bloom', 'chromatic-fringe', 'dust-motes', 'film-grain'. Then window.addEventListener('error', function (e) { window.__DEMO__.errors.push(String(e.message || e)); }).
2. **Canvas dust loop:** cache document.documentElement, canvas#dust, the 2D context (null -> .no-canvas path, push "canvas-unavailable"), the 34 motes of section B ({ x0, y0, r, vy, swayAmp, swayHz, phase, alpha }), and a cached { w, h } refreshed only on resize. drawDust(t) clears and fills each mote with the time-pure formulas — one beginPath, one arc, one fill, fillStyle 'rgba(255,206,152,' + alpha + ')'. NEVER ctx.filter, ctx.shadowBlur, or getBoundingClientRect in the loop. Each rAF tick increments window.__DEMO__.frames by exactly 1 then paints; the FIRST completed paint sets ready = true. While document.hidden, skip paint, keep loop and counter.
3. **Resize:** resizeCanvas() reads canvas.getBoundingClientRect() ONCE (the only permitted call), recomputes { w, h }, sets dpr = Math.min(window.devicePixelRatio || 1, 2), canvas.width = w * dpr, canvas.height = h * dpr, ctx.setTransform(dpr, 0, 0, dpr, 0, 0), repaints. Schedule via one boolean resizeQueued + requestAnimationFrame — no timers.
4. **Entrance fallback:** the two nested rAFs, the getAnimations check, the .is-in sweep (Guard 3).
5. **Mobile menu (<= 900px):** burger click toggles .menu.open and aria-expanded; Escape, any menu link click, and resize past 900px close it.
6. **prefers-reduced-motion:** read matchMedia('(prefers-reduced-motion: reduce)') once; if it matches, drawDust(0) once, set ready on that paint, count that frame, schedule no further rAF.

No other JS. No libraries. No timers. No console calls.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Headlight

- Slug: `headlight`
- Page: https://landingpageprompts.com/prompts/headlight
- Effect: A procedural night-city long-exposure canvas that evolves continuously behind a bottom-anchored Nocturne ride-service interface.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 63,961; total with repair and cross-check: 85,269
- Verification: 20/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - The output is one valid index.html with no external media or framework dependencies, contains exactly one h1, and has real header, main, footer, and nav landmarks.
  - At 1440x900, html, body, and the app shell are 100dvh high with overflow:hidden; at 390x844, 768x1024, 1440x900, and 1920x1080, document scrollWidth never exceeds clientWidth.
  - The runtime object exists as window.__DEMO__ with name headlight, ready becomes true after first paint, frames increments once per rAF callback, effects contains the four named effects, and errors captures window errors.
  - The canvas starts with exactly 140 seeded particles, uses an offscreen 6-percent fading buffer, lighter compositing, 3px vertical stamps, hue values between 18 and 42 degrees for sodium particles, and never calls ctx.filter or ctx.shadowBlur in the particle loop.
  - With prefers-reduced-motion: reduce, the page remains readable with all text at opacity 1, the canvas renders a static seeded frame, cursor parallax is disabled, and no repeating rAF loop is scheduled.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT

Build one complete single-file index.html for a cinematic landing page titled “Headlight”. Set the document language to lang="en", use the document title “Headlight — Nocturne”, and include the viewport meta tag with width=device-width, initial-scale=1, viewport-fit=cover. The page is a night-city ride-service brand presentation for Nocturne, operating only from 23:00 through 05:00.

At viewport widths of 901px and wider, html, body, and the app shell must be exactly 100dvh high, with overflow:hidden. There is no page scroll at desktop sizes. At widths of 900px and narrower, the document may scroll vertically, but it must never scroll horizontally. The canvas is a visual background, not a video. All visible content remains readable when animation is reduced.

Use semantic real page structure: one header, one main, one footer, and one navigation region. There must be exactly one visible h1. Every visible interactive element must have an accessible name through visible text or aria-label. Every focusable control must have a visible :focus-visible ring.

The design direction is editorial, restrained, and cinematic: a black road surface, accumulated sodium-amber traffic trails, sparse red brake-light interruptions, and cool white-blue headlight accents. The interface is left-heavy and typographic, with the copy anchored in the lower-left quadrant and a single CTA pill anchored in the lower-right. The visual should feel like a long-exposure photograph taken from a moving car, not a gradient or neon particle demo.

Do NOT build a video element, image element, remote asset, base64 asset, third-party CDN, React, Tailwind, GSAP, Three.js, Lottie, WebGL renderer, audio player, cookie banner, modal, authentication flow, map, pricing calculator, route planner, or multi-page navigation. Do NOT use an external font request. Use only CSS gradients, inline SVG, or canvas. Do NOT add a second h1. Do NOT make the lower third visually noisy. Do not use horizontal scrolling. Do not add decorative controls without an accessible name. Do not use ctx.filter or ctx.shadowBlur inside any per-particle loop.

B. THE BACKDROP

Create one black canvas with id="traffic-canvas", positioned as a fixed full-viewport layer. Use a black background matching #050507. The canvas is decorative with aria-hidden="true", but it must remain the principal visual backdrop.

The procedural particle system contains exactly 140 particles. Seed the particle data once at startup with a deterministic seeded pseudo-random generator using seed 27041986. Each particle has a normalized x position, normalized y position, velocity, length, width, alpha, hue, and phase. No particle is recreated after startup. Seed the positions so 104 particles use sodium amber, 39 particles use brake red, and 17 particles use headlight blue-white, producing 74.3% amber, 27.9% red, and 12.1% blue-white within rounding tolerance.

The advection field is:
a = sin(x * 0.004 + t * 0.2) * cos(y * 0.003)

Treat x and y as canvas pixel coordinates. Convert the scalar angle-like value into a cheap velocity rotation. Each frame, calculate vx = cos(a) * speed and vy = sin(a) * speed, where speed varies by particle from 0.42 to 1.18 pixels per frame. Add a small forward velocity of 0.24 to 0.62 pixels per frame in the x direction. Keep particles in an infinite conceptual field by wrapping x from -40 to width + 40 and y from -40 to height + 40.

Each particle must leave a 6px to 34px trail by stamping points into an offscreen buffer. Create one offscreen canvas with the same backing dimensions as the visible canvas. Every frame, fade the offscreen buffer to 6% opacity rather than clearing it. Implement the fade by filling the buffer with rgba(5,5,7,0.06) using source-over. Then draw all particle stamps with globalCompositeOperation = "lighter". Each particle contributes a 3px vertical smear: draw its previous and current positions with a 3px-wide rounded line or three adjacent alpha-weighted stamps. Trail alpha is 0.12 to 0.42. Hues are restricted to 18deg through 42deg for sodium trails, 358deg through 8deg for brake red, and 204deg through 222deg for headlight blue. Do not use a rainbow palette.

The visible canvas composites the offscreen buffer onto a CSS-filtered canvas with filter: blur(0.4px). The canvas element is not allowed to use a larger blur. The offscreen buffer is not allowed to use ctx.filter or ctx.shadowBlur. Composite the buffer onto the visible canvas with globalCompositeOperation = "lighter" and globalAlpha controlled by the exposure ramp.

Place exactly two oversized radial-gradient glow fields behind the canvas. Use one 500px circle with center rgba(42,22,8,0.42), transparent edge rgba(42,22,8,0), placed left:18%, top:24%, and one 500px circle with center rgba(10,20,32,0.34), transparent edge rgba(10,20,32,0), placed right:12%, bottom:8%. Each uses filter: blur(70px). These are static CSS layers at z-index 0, not animated particles. They create road-surface value without competing with the type.

At 60fps, apply a 6% per-frame buffer fade, equivalent to a visible tail of approximately 16 frames. Do not use a hard reset, timed scene loop, or particle respawn sequence. The field is continuously evolving and must not visibly repeat. Apply cursor parallax to the entire canvas container: translate it by a maximum of 10px in x and 10px in y toward the pointer. Use a 0.04 lerp per frame. Pointer values are normalized from the viewport center and clamped to [-1,1].

For the canvas backing resolution, use a maximum device pixel ratio of 1.5. Set backing width to Math.round(clientWidth * dpr), backing height to Math.round(clientHeight * dpr), cap the total backing pixel count at 2,500,000, and reduce dpr to 1 if the cap would be exceeded. The offscreen buffer uses the same dimensions. Set canvas.width and canvas.height only on resize, never inside the animation loop.

The per-frame cost budget is 140 particle updates, 140 current-position stamps, 140 previous-position stamps, one buffer fade fill, and one visible-buffer composite. Use no more than 420 draw operations per frame. Cache the canvas contexts, dimensions, particle objects, color strings, and alpha values before the loop. Never call getBoundingClientRect inside rAF. The rAF loop must sustain at least 20 frames per 1.2 seconds at 1440x900 headless desktop resolution. Use transform and opacity for DOM motion. The canvas drawing itself may update pixels, but all DOM animation must be transform/opacity only.

C. THE LAYER STACK

Use these exact z-index values from back to front:

z-index 0: the two static glow fields inside .road-glows.
z-index 1: the black canvas layer .canvas-wrap, containing the traffic canvas and its exposure overlay.
z-index 2: a full-viewport vignette .vignette with transparent center and rgba(0,0,0,0.52) edges.
z-index 3: a fine grain layer .grain using a CSS repeating radial-gradient pattern at opacity 0.045, pointer-events:none.
z-index 4: the semantic page shell .site-shell, containing header, main, and footer.
z-index 5: focus rings and dialogs if any, although no dialog is required.
z-index 6: the bottom-right CTA cluster .cta-cluster.

The canvas-wrap must have inset:-12px so its ±10px parallax never exposes an unpainted edge. The canvas itself must be width:100%, height:100%, display:block. The page shell must use position:relative and pointer-events:none for decorative regions only; all text and controls must receive pointer-events:auto.

D. TOKEN TABLE

Define every visual size and color as CSS custom properties on :root:

--bg: #050507;
--ink: #F4F0E8;
--muted: #A39D92;
--dim: #6F6A63;
--amber: #FFB347;
--red: #FF5E3A;
--blue: #7FB2FF;
--line: rgba(244,240,232,0.18);
--line-strong: rgba(244,240,232,0.34);
--panel: rgba(5,5,7,0.34);
--focus: #F4F0E8;
--max-width: 1440px;
--content-x: 72px;
--header-height: 82px;
--footer-height: 34px;
--hero-top: 26vh;
--hero-bottom: 0px;
--hero-gap: 34px;
--type-display: clamp(54px, 7.2vw, 128px);
--type-body: 16px;
--type-small: 12px;
--type-label: 11px;
--button-height: 52px;
--button-padding-x: 24px;
--radius-pill: 999px;
--radius-small: 8px;
--canvas-blur: 0.4px;
--glow-blur: 70px;
--glow-size: 500px;
--parallax-max: 10px;
--exposure-duration: 1400ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

Use the system font stack: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif. Inter may be used only if already installed; no Google Fonts request is needed.

E. THE COMPOSITION

Build the page in this order.

First, add the static backdrop elements inside a div.road-backdrop. Add two .glow elements with exact 500px dimensions and blur(70px), then the canvas-wrap and vignette. The canvas-wrap receives the canvas and an absolutely positioned .exposure-wash with background:#050507 and opacity:0.

Second, create header.site-header with position:absolute, top:0, left:var(--content-x), right:var(--content-x), height:var(--header-height), display:flex, align-items:center, justify-content:space-between, z-index:4. The left brand is a link or span with the exact visible text “NOCTURNE” and aria-label “Nocturne home”. Set it to font-size:13px, font-weight:700, letter-spacing:0.24em, color:var(--ink). The right nav contains exactly two visible links: “The service” and “Safety”. Both must have href="#service” and href="#safety” respectively, with accessible names, color:var(--muted), font-size:var(--type-small), and a 22px horizontal gap.

Third, create main#service.hero. Position it as a full-height flex container using display:grid, grid-template-columns:minmax(0, 1fr) auto, grid-template-rows:1fr auto, align-items:end, column-gap:var(--hero-gap), row-gap:24px, padding:0 var(--content-x) 62px. The hero must sit above the footer and leave the lower third visually readable. The copy block is grid-column:1, grid-row:2, max-width:700px. The CTA cluster is grid-column:2, grid-row:2, align-self:end, padding-bottom:4px.

The copy block contains a small eyebrow with exact text “NIGHT SERVICE / 23:00—05:00”, followed by exactly one h1 with the exact text “Take the long way home.” Set h1 margin:16px 0 22px, max-width:700px, color:var(--ink), font-size:var(--type-display), line-height:0.91, font-weight:650, letter-spacing:-0.065em. Add a paragraph with exact text “Nocturne moves you through the sleeping city with a driver, a quiet cabin, and the road already awake.” Set max-width:410px, margin:0, color:var(--muted), font-size:var(--type-body), line-height:1.55.

Fourth, add a service-status strip above the CTA or directly below the paragraph with exact text “LIVE WINDOW · NEXT DEPARTURE 23:18” and a small 7px amber status dot. The strip must be inline-flex, gap:10px, align-items:center, height:30px, margin-top:26px, border-top:1px solid var(--line), border-bottom:1px solid var(--line), color:var(--muted), font-size:var(--type-label), letter-spacing:0.14em.

The CTA cluster contains one primary pill button with exact visible text “Book a Nocturne” and aria-label “Book a Nocturne ride”. It is 52px high, padding 0 24px, border-radius:999px, and uses a horizontal gradient from #FFB347 to #FFD27A. Text is #050507, font-size:13px, font-weight:750. It must be a real button or link. Beside it, place one quiet text link with exact text “See how it works”, href="#how-it-works”, color:var(--ink), font-size:13px, and underline offset:5px. The CTA cluster is display:flex, align-items:center, gap:20px.

Sixth, create footer.site-footer with position:absolute, left:var(--content-x), right:var(--content-x), bottom:0, height:var(--footer-height), display:flex, align-items:center, justify-content:space-between, color:var(--dim), font-size:10px, letter-spacing:0.1em. Left text: “NOCTURNE / CITY TRANSIT AFTER DARK”. Right text: “23:00—05:00 / 365 NIGHTS”. Do not add another navigation control.

The darkest quadrant is the lower-left. The particle field must be biased toward y positions between 4% and 62% of the canvas height. Exactly 24 particles may enter the lower 38% at reduced alpha, but no particle may be rendered over the h1 at opacity above 0.18. Apply a CSS linear-gradient from rgba(5,5,7,0.04) at 42% to rgba(5,5,7,0.84) at 78% as a readability scrim inside the page shell.

F. THE UI LANGUAGE

The primary button uses background:linear-gradient(100deg, #FFB347 0%, #FFC76B 52%, #FFD98C 100%), border:1px solid rgba(255,235,190,0.72), box-shadow:0 8px 26px rgba(255,179,71,0.18). Its resting transform is translate3d(0,0,0). On hover, change transform to translate3d(0,-2px,0), increase box-shadow to 0 12px 30px rgba(255,179,71,0.28), and change the gradient endpoint to #FFE1A2. On active, translate to translate3d(0,1px,0) and use box-shadow:none. The transition is transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms linear.

The quiet link rests with color:#F4F0E8 and opacity:0.78. On hover, opacity:1 and color:#FFB347. The transition is opacity 160ms linear, color 160ms linear. All links have text-decoration:none except the quiet link, which uses text-decoration:underline.

Buttons and links use border-radius:999px or the defined small radius. The visible focus state is outline:2px solid var(--focus), outline-offset:4px, with a 1px dark inner contrast ring. Do not remove native focus styles without replacement. The cursor is default except for links and buttons, where cursor:pointer is used.

G. MOTION

Use CSS keyframes named exposure-ramp, copy-rise, eyebrow-rise, cta-rise, and status-pulse. The canvas exposure begins at opacity:0 and reaches opacity:1 over 1400ms using exposure-ramp from opacity:0 to opacity:1. The canvas-wrap itself translates from translate3d(-10px, 6px, 0) to translate3d(0,0,0), but pointer parallax writes inline transform on the same element after the initial animation. To prevent conflict, put the entrance animation on .canvas-inner and the parallax transform on .canvas-wrap.

The DOM entrance sequence is:

- header: opacity 0→1, transform translate3d(0,-10px,0)→translate3d(0,0,0), duration 700ms, delay 80ms, easing var(--ease-out).
- eyebrow: opacity 0→1, transform translate3d(0,12px,0)→translate3d(0,0,0), duration 620ms, delay 260ms.
- h1: opacity 0→1, transform translate3d(0,24px,0)→translate3d(0,0,0), duration 900ms, delay 340ms.
- paragraph: opacity 0→1, transform translate3d(0,18px,0)→translate3d(0,0,0), duration 720ms, delay 520ms.
- status strip: opacity 0→1, transform translate3d(0,10px,0)→translate3d(0,0,0), duration 600ms, delay 720ms.
- CTA cluster: opacity 0→1, transform translate3d(14px,0,0)→translate3d(0,0,0), duration 720ms, delay 620ms.
- footer: opacity 0→1, transform translate3d(0,8px,0)→translate3d(0,0,0), duration 600ms, delay 900ms.
- canvas: exposure-ramp 1400ms, delay 0ms.
- status dot: status-pulse 1800ms ease-in-out infinite, scaling 0.82 to 1.18 and opacity 0.55 to 1.

Use the following named keyframes exactly:
@keyframes exposure-ramp { from { opacity: 0; } to { opacity: 1; } }
@keyframes copy-rise { from { opacity: 0; transform: translate3d(0,24px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes eyebrow-rise { from { opacity: 0; transform: translate3d(0,12px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes cta-rise { from { opacity: 0; transform: translate3d(14px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes status-pulse { 0%,100% { opacity: 0.55; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1.18); } }

The JavaScript animation loop continuously updates the particle buffer, exposure, and pointer parallax. Effects pushed into telemetry must be exactly “field-advection”, “trail-decay”, “cursor-parallax”, and “exposure-ramp”. Increment window.__DEMO__.frames once for every rAF callback.

H. THE RESPONSIVE TABLE

At 1920x1080, set --content-x:96px, --type-display:128px, --hero-bottom:0px, --button-height:52px. Keep the desktop grid as minmax(0,1fr) auto.

At 1440x900, set --content-x:72px, --type-display:104px, --header-height:82px, --hero-bottom:0px, and hero padding-bottom:62px.

At 768x1024, set --content-x:36px, --header-height:70px, --type-display:76px, --hero-bottom:0px, and --button-height:50px. Change .hero to grid-template-columns:1fr, grid-template-rows:1fr auto auto, padding-bottom:48px. Copy occupies grid-column:1 and grid-row:2. The CTA cluster occupies grid-column:1, grid-row:3, justify-self:start, padding-bottom:0. The canvas glow positions become left:8%, top:18% and right:2%, bottom:18%. Allow vertical document scrolling because 768 is below 901px.

At 390x844, set --content-x:22px, --header-height:62px, --type-display:58px, --type-body:15px, --type-small:11px, --button-height:50px, --button-padding-x:20px, and --hero-gap:22px. Hide the footer’s left text while keeping the right operating-hours text. Header navigation gap is 14px. The CTA cluster is width:100%, flex-direction:column, align-items:flex-start, gap:14px. The h1 max-width:350px, line-height:0.94, margin-bottom:18px. The paragraph max-width:335px. The status strip width:100%, font-size:9px, letter-spacing:0.1em. Canvas glow size is 360px, blur is 58px, and the glow positions are left:-90px, top:18% and right:-120px, bottom:12%. Keep all content inside the viewport width and allow vertical scrolling.

Add a max-height:760px desktop override for widths 901px and above. Reduce --header-height to 64px, --type-display to 72px, --hero-bottom to 0px, hero padding-bottom to 42px, and h1 margin-top to 12px. Reduce paragraph line-height to 1.4 and button height to 46px. Keep the bottom third clear.

Add a max-height:620px desktop override for widths 901px and above. Reduce --header-height to 54px, --type-display to 58px, --hero-bottom to 0px, hero padding-bottom to 30px, h1 margin:10px 0 14px, and footer height to 24px. Hide the paragraph only if its measured content would extend below 30px from the viewport bottom; otherwise preserve it. No CSS overflow-x is allowed at any breakpoint.

I. FAILURE GUARDS

Every animated DOM element must have a resting opacity:1 rule after its entrance animation, so a failed CSS animation cannot leave invisible copy. The canvas wrapper must default to opacity:1, and the exposure wash must default to opacity:1 after the ramp. Do not use an animation-fill-mode that permanently leaves an element hidden.

Implement a two-rAF fallback. After DOMContentLoaded, schedule the first animation frame with requestAnimationFrame(begin), and schedule a second with requestAnimationFrame(begin) only if the first callback did not start the loop. The begin function must be idempotent, guarded by a boolean named loopStarted. If requestAnimationFrame is unavailable, start a static seeded frame once, set exposure to 1, set window.__DEMO__.ready = true after first paint, and do not schedule further frames.

If ResizeObserver is unavailable, use a cached window resize listener. Resize handling may read client dimensions and update canvas dimensions outside the rAF loop. During resize, preserve the previous offscreen image by copying it into a temporary canvas at the old size and drawing it into the new buffer with globalAlpha 0.55. Debounce resize work by 120ms.

Under prefers-reduced-motion: reduce, remove all entrance animations, stop cursor parallax, and render one static seeded canvas frame with exposure 1. Keep the page fully readable. Do not stop semantic controls or hover focus states. Set the animation loop to a static mode and do not increment frames after the first static frame.

J. THE EXACT JS

The script must be plain JavaScript placed at the end of body. It must use this structure and behavior:

const demo = window.__DEMO__ = { name: "headlight", ready: false, frames: 0, effects: [], errors: [] };
window.addEventListener("error", event => { demo.errors.push(String(event.message || "Unknown error")); });

const canvas = document.getElementById("traffic-canvas");
const context = canvas.getContext("2d", { alpha: true });
const buffer = document.createElement("canvas");
const bufferContext = buffer.getContext("2d", { alpha: true });
const wrap = document.querySelector(".canvas-wrap");
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
let width = 0, height = 0, dpr = 1, bufferWidth = 0, bufferHeight = 0;
let pointerX = 0, pointerY = 0, targetX = 0, targetY = 0, currentX = 0, currentY = 0;
let loopStarted = false, running = true, lastTime = 0, elapsed = 0, exposure = 0;
let seed = 27041986;
const random = () => { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 4294967296; };
const particles = Array.from({ length: 140 }, (_, index) => {
  const group = index < 39 ? "red" : index < 56 ? "blue" : "amber";
  const color = group === "red" ? "255,94,58" : group === "blue" ? "127,178,255" : "255,179,71";
  return { x: random() * Math.max(window.innerWidth, 1), y: random() * Math.max(window.innerHeight * 0.62, 1), px: 0, py: 0, speed: 0.42 + random() * 0.76, forward: 0.24 + random() * 0.38, length: 6 + random() * 28, alpha: 0.12 + random() * 0.30, hue: group === "red" ? 358 + random() * 10 : group === "blue" ? 204 + random() * 18 : 18 + random() * 24, color, group };
});
particles.forEach(particle => { particle.px = particle.x; particle.py = particle.y; });

function resize() {
  width = window.innerWidth;
  height = window.innerHeight;
  dpr = Math.min(window.devicePixelRatio || 1, 1.5);
  if (width * height * dpr * dpr > 2500000) dpr = 1;
  bufferWidth = canvas.width = Math.round(width * dpr);
  bufferHeight = canvas.height = Math.round(height * dpr);
  buffer.width = bufferWidth;
  buffer.height = bufferHeight;
  context.setTransform(dpr, 0, 0, dpr, 0, 0);
  bufferContext.setTransform(dpr, 0, 0, dpr, 0, 0);
  bufferContext.fillStyle = "#050507";
  bufferContext.fillRect(0, 0, width, height);
}
function frame(time) {
  if (!running) return;
  if (!lastTime) lastTime = time;
  const delta = Math.min(32, time - lastTime);
  lastTime = time;
  elapsed += delta * 0.0166667;
  exposure = Math.min(1, exposure + delta / 1400);
  currentX += (targetX - currentX) * 0.04;
  currentY += (targetY - currentY) * 0.04;
  wrap.style.transform = "translate3d(" + (currentX * 10).toFixed(2) + "px," + (currentY * 10).toFixed(2) + "px,0)";
  bufferContext.globalCompositeOperation = "source-over";
  bufferContext.fillStyle = "rgba(5,5,7,0.06)";
  bufferContext.fillRect(0, 0, width, height);
  bufferContext.globalCompositeOperation = "lighter";
  for (const particle of particles) {
    const angle = Math.sin(particle.x * 0.004 + elapsed * 0.2) * Math.cos(particle.y * 0.003);
    const vx = Math.cos(angle) * particle.speed + particle.forward;
    const vy = Math.sin(angle) * particle.speed;
    particle.px = particle.x;
    particle.py = particle.y;
    particle.x += vx;
    particle.y += vy;
    if (particle.x < -40) particle.x = width + 40;
    if (particle.x > width + 40) particle.x = -40;
    if (particle.y < -40) particle.y = height + 40;
    if (particle.y > height + 40) particle.y = -40;
    const lowerFade = particle.y > height * 0.62 ? Math.max(0.18, 1 - (particle.y - height * 0.62) / (height * 0.38)) : 1;
    const alpha = particle.alpha * lowerFade;
    bufferContext.strokeStyle = "hsla(" + particle.hue + ",100%,68%," + alpha.toFixed(3) + ")";
    bufferContext.lineWidth = 3;
    bufferContext.lineCap = "round";
    bufferContext.beginPath();
    bufferContext.moveTo(particle.px, particle.py);
    bufferContext.lineTo(particle.x, particle.y);
    bufferContext.stroke();
  }
  context.globalCompositeOperation = "source-over";
  context.clearRect(0, 0, width, height);
  context.globalCompositeOperation = "lighter";
  context.globalAlpha = exposure;
  context.drawImage(buffer, 0, 0, width, height);
  context.globalAlpha = 1;
  context.globalCompositeOperation = "source-over";
  demo.frames += 1;
  if (exposure >= 1 && demo.effects.indexOf("exposure-ramp") === -1) demo.effects.push("exposure-ramp");
  if (demo.effects.indexOf("field-advection") === -1) demo.effects.push("field-advection");
  if (demo.effects.indexOf("trail-decay") === -1) demo.effects.push("trail-decay");
  if (demo.effects.indexOf("cursor-parallax") === -1) demo.effects.push("cursor-parallax");
  if (demo.frames === 1) requestAnimationFrame(() => { demo.ready = true; });
  requestAnimationFrame(frame);
}
function begin() {
  if (loopStarted) return;
  loopStarted = true;
  if (reduceMotion.matches) {
    elapsed = 0;
    exposure = 1;
    bufferContext.fillStyle = "#050507";
    bufferContext.fillRect(0, 0, width, height);
    particles.forEach(particle => {
      const angle = Math.sin(particle.x * 0.004) * Math.cos(particle.y * 0.003);
      particle.px = particle.x - Math.cos(angle) * particle.length;
      particle.py = particle.y - Math.sin(angle) * particle.length;
      bufferContext.strokeStyle = "hsla(" + particle.hue + ",100%,68%," + particle.alpha.toFixed(3) + ")";
      bufferContext.lineWidth = 3;
      bufferContext.lineCap = "round";
      bufferContext.beginPath();
      bufferContext.moveTo(particle.px, particle.py);
      bufferContext.lineTo(particle.x, particle.y);
      bufferContext.stroke();
    });
    context.globalCompositeOperation = "lighter";
    context.drawImage(buffer, 0, 0, width, height);
    demo.effects.push("field-advection", "trail-decay", "cursor-parallax", "exposure-ramp");
    demo.frames = 1;
    demo.ready = true;
    return;
  }
  requestAnimationFrame(frame);
}
window.addEventListener("pointermove", event => {
  targetX = Math.max(-1, Math.min(1, event.clientX / width * 2 - 1));
  targetY = Math.max(-1, Math.min(1, event.clientY / height * 2 - 1));
}, { passive: true });
window.addEventListener("resize", resize, { passive: true });
resize();
requestAnimationFrame(begin);
requestAnimationFrame(begin);

The script must not log to the console. It must not throw when pointer events, ResizeObserver, rAF, or canvas contexts are unavailable. If a context is unavailable, leave the CSS backdrop and readable content visible, set ready to true after first paint, and record no uncaught exception.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Lattice

- Slug: `lattice`
- Page: https://landingpageprompts.com/prompts/lattice
- Effect: A slowly rotating gyroid wireframe lattice projected to depth-faded hairlines over a thin horizon glow
- Model: `xiaomi/mimo-v2.6-pro` (Xiaomi MiMo v2.6 Pro (xiaomi/mimo-v2.6-pro)) on cmd-code
- Build tokens: 19,261; total with repair and cross-check: 76,324
- Verification: 20/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - the document contains exactly one h1 with the text 'Matter, architected. Down to the unit cell.' and uses semantic header, nav, main, and footer landmarks with every anchor and button carrying an accessible name
  - canvas#lattice paints non-blank 3D wireframe content at 1440x900, its pixels change across consecutive frames, and window.__DEMO__.frames increments exactly once per requestAnimationFrame tick
  - window.__DEMO__ is initialized with name 'lattice', ready becomes true after the first painted lattice frame, effects contains 'gyroid-lattice' and 'horizon-glow', and errors stays empty in the happy path
  - the rAF loop sustains at least 20 painted frames within a 1.2s window at 1440x900 headless, and the render loop body never calls getBoundingClientRect, ctx.filter, or ctx.shadowBlur
  - no horizontal overflow at 390px, 768px, 1440px, or 1920px; at >=901px body has overflow:hidden and .page is 100dvh; a prefers-reduced-motion reduce block forces all entrance elements to opacity 1 and freezes the lattice to a static frame
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
Build one complete, self-contained `index.html` for **Lattice** — a materials-science company that architects gyroid-phase ceramics. Document title: `Lattice — Matter, Architected`. `<html lang="en">`. ONE file only: plain HTML + CSS + JS in `<style>` and one `<script>` at end of body. No build step, no framework, no bundler, no React, Tailwind, GSAP, Three.js, Lottie, jQuery, or external scripts. NO EXTERNAL MEDIA: no mp4/webm/gif, no remote images, no base64 blobs, no third-party CDN URLs. Google Fonts is the ONLY permitted network request (Inter + IBM Plex Mono) with system fallback stacks. Every visible pixel comes from CSS gradients, inline SVG, text, or canvas.

**Viewport rule:** at widths `>= 901px` the page is one frame: `html, body { height:100%; overflow:hidden }` and `.page { height:100dvh; overflow:hidden }`. NO SCROLL on desktop. At widths `<= 900px` the page may scroll vertically. No horizontal overflow at 390x844, 768x1024, 1440x900, or 1920x1080, ever.

**Do NOT build:** no WebGL, no video, no audio, no images, no forms, no newsletter capture, no pricing table, no testimonials, no logos wall, no case-study carousel, no blog feed, no dashboard, no cookie banner, no scroll indicator, no hamburger on desktop (burger only at `<=900px`), no sections beyond the specified header / hero / footer, no footer links beyond the three specified, no second `<h1>`, no `console.log` in the shipped file.

---

## A. WHAT IS BEING BUILT

A single-viewport landing page for **Lattice**, a materials-science company. A full-bleed `<canvas>` renders a slowly rotating 3D wireframe lattice — a cubic node grid whose vertices are Newton-projected onto the gyroid isosurface `F = 0`, so the wireframe reads as an architected minimal surface, not a plain cube. A pinhole camera projects it to 2D; hairline edges are depth-bucketed and alpha-faded so far geometry dissolves and near geometry stays crisp. Behind it a thin horizon glow: a soft band plus a 1px core line dying at both ends. Everything is monochrome — one cold near-white on near-black — precise and technical. Over the field: a compact left-aligned type block (eyebrow, one H1 of two masked lines, one lead sentence, one mono spec readout, two buttons) and a hairline footer with batch status. Composition is asymmetric: type in the left 44%, lattice right-of-centre, never covered by text on desktop.

---

## B. THE BACKDROP — procedural gyroid lattice on canvas (the ONLY visual effect besides the grain)

A single `<canvas id="lattice">` fills the viewport: `position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none`. Repainted every animation frame; NEVER a static image.

**Geometry, built ONCE at startup:**

- Node grid: `i, j, k ∈ 0..8` at `(x,y,z) = ((i-4)*0.62, (j-4)*0.62, (k-4)*0.62)`. Spacing 0.62, cube half-extent 2.48, exactly 729 nodes.
- Gyroid field with `a = 0.9`: `F(p) = sin(a x)cos(a y) + sin(a y)cos(a z) + sin(a z)cos(a x)`.
- Analytic gradient: `dF/dx = a cos(a x)cos(a y) - a sin(a z)sin(a x)`; `dF/dy = -a sin(a x)sin(a y) + a cos(a y)cos(a z)`; `dF/dz = -a sin(a y)sin(a z) + a cos(a z)cos(a x)`.
- Newton projection onto `F = 0`: `p' = p - 0.9 * F(p) * grad / |grad|^2`, once per node; skip when `|grad|^2 < 0.05`; clamp displacement length to 0.34. This bends the cubic grid into a gyroid-like saddle mesh.
- Edges: `+x`, `+y`, `+z` neighbours where they exist: `3 * 8 * 9 * 9 = 1944` edges. Nodes in `Float32Array(2187)`, edge pairs in `Uint16Array(3888)`. Nothing is allocated during animation.

**Camera and projection (per frame):**

- Rotation per node, in order: yaw about Y `theta = t * (2*PI/48)` (48s per revolution), pitch about X `phi = 0.42 + 0.10 * sin(t * 2*PI/74)`, roll about Z `psi = 0.06 * sin(t * 2*PI/90)`; `t` = seconds since start.
- Pinhole projection: camera at `z = CAM_Z = 9.0` on the origin; `depth = 9.0 - zRot`; `sx = cx + xRot * f / depth`, `sy = cy - yRot * f / depth`. Focal `f = min(h, w * 1.35) * zoom` with `zoom = 1.0`, or `0.88` at desktop max-height 850px, `0.78` at max-height 720px. Centre: desktop `cx = w * 0.635, cy = h * 0.54`; `<=900px` `cx = w * 0.5, cy = h * 0.42`. At 1440x900 with `f = h` the structure spans `5.56 * 900 / 9 = 556px` = 62% of viewport height, the designed size.

**Depth sorting and fade (the core look):**

- Per node store `sx`, `sy`, `depth`, validity in preallocated `Float32Array(729)` x3 + `Uint8Array(729)`; invalid when `depth < 5.8` or `depth > 12.4` (near cull + fog cutoff).
- Per edge mean depth `dm = (d0 + d1) / 2`; drop the edge if either endpoint is invalid. Bucket `b = floor((dm - 5.8) / (12.4 - 5.8) * 12)` clamped `0..11` (b0 = nearest); push the edge index into one of 12 preallocated `Uint16Array(1944)` buffers with an integer count each — zero allocation per frame.
- Paint buckets 11 (far) → 0 (near): one `beginPath()`, the bucket's `moveTo/lineTo` pairs, one `stroke()`. Exactly 12 stroke calls per frame.
- Stroke: `lineWidth = 1`, `lineCap = 'butt'`, colour `rgba(223, 233, 243, alpha)` where `alpha[b] = 0.03 + 0.29 * pow(1 - b / 11, 1.25)` (near ≈ 0.32, far ≈ 0.03). Cache the 12 `strokeStyle` strings at startup.

**Horizon glow (2 fill primitives, gradients cached on resize):**

- Band: `fillRect(0, cy - h*0.13, w, h*0.26)` with vertical gradient stops `rgba(223,233,243,0) 0%`, `rgba(223,233,243,0.11) 50%`, `rgba(223,233,243,0) 100%`.
- Core line: `fillRect(cx - w*0.36, cy - 0.5, w*0.72, 1)` with a horizontal linear gradient stopped `rgba(223,233,243,0) 0%`, `rgba(223,233,243,0.26) 50%`, `rgba(223,233,243,0) 100%`.
- Both draw BEFORE the wireframe and are built once in `resizeCanvas()` — `createLinearGradient` is never called inside the loop.

**Vignette (1 fill primitive, gradient cached on resize):** full-canvas radial gradient centred `(w/2, h/2)`, radius `max(w,h) * 0.78`, stops `rgba(3,5,8,0) 0%`, `rgba(3,5,8,0.18) 55%`, `rgba(3,5,8,0.62) 100%`, drawn last.

**Per-frame cost budget:** 729 node rotations (~18 flops each) + 729 perspective divides + up to 1944 moveTo/lineTo pairs + 12 strokes + 3 gradient fills = **15 draw calls, ≈ 45k flops per frame**, far under the 20-frames-per-1.2s bar. NEVER call `getBoundingClientRect` in the loop; cache `document.hidden`, canvas and context handles outside it. NEVER set `ctx.filter` or `ctx.shadowBlur`. The glow's softness comes from gradient stops alone.

**Resolution trick:** `canvas.width = cssW * dpr`, `canvas.height = cssH * dpr`, then `ctx.setTransform(dpr,0,0,dpr,0,0)`, with `dpr = Math.min(devicePixelRatio, 2)` at `>=901px`, `Math.min(devicePixelRatio, 1.5)` at `<=900px`. Resize is scheduled by one boolean + rAF flag, never a timer.

**Grain (CSS element):** `.grain` fixed, `inset:-50%; width:200%; height:200%; opacity:0.04`, data-URI inline-SVG `feTurbulence` (`type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"` + `feColorMatrix saturate 0`), tile 180px, `animation: grain 0.95s steps(4) infinite` among offsets `(0,0) (-2%,1%) (1%,-2%) (-1%,2%)`.

---

## C. LAYER STACK (back → front)

1. `html, body` — `#05070a`, with a base gradient `linear-gradient(180deg, #070a0e 0%, #05070a 46%, #030508 100%)` forced twice (see Failure Guards).
2. `canvas#lattice` — z-index 0: horizon glow, 12 depth-sorted wire batches, vignette.
3. `.scrim` — z-index 1, fixed: desktop `linear-gradient(90deg, rgba(5,7,10,0.88) 0%, rgba(5,7,10,0.66) 32%, rgba(5,7,10,0.10) 60%, rgba(5,7,10,0.34) 100%)` (text-protection left, structure breathing right); at `<=900px` `linear-gradient(180deg, rgba(5,7,10,0.55) 0%, rgba(5,7,10,0.20) 40%, rgba(5,7,10,0.80) 100%)`.
4. `.page` — z-index 2, `position:relative; display:grid; grid-template-rows:auto 1fr auto; min-height:100dvh`.
5. `.grain` — z-index 5, pointer-events none.
6. `.menu` — z-index 80 when open (`<=900px` only).
Focus rings stay above local stacking contexts.

---

## D. TOKEN TABLE (defaults at ~1440px)

```
--bg:            #05070a
--bg-deep:       #030508
--bg-top:        #070a0e
--text:          #eef3f8
--muted:         #97a4b0
--dim:           #616e7a
--accent:        #dfe9f3
--accent-dim:    rgba(223,233,243,0.55)
--accent-line:   rgba(223,233,243,0.30)
--accent-fill:   rgba(223,233,243,0.06)
--wire:          rgba(223,233,243,1)
--border:        rgba(255,255,255,0.14)
--border-soft:   rgba(255,255,255,0.08)
--logo:          15px
--logo-mark:     22px
--nav:           13px
--nav-h:         38px
--eyebrow:       11.5px
--h1:            62px
--lead:          16px
--spec:          12.5px
--btn:           13px
--btn-h:         42px
--foot:          12px
--header-y:      26px
--header-x:      44px
--hero-x:        44px
--hero-y:        40px
--hero-max:      640px
--hero-gap:      24px
--copy-gap-h1:   22px
--copy-gap-lead: 24px
--radius-btn:    4px
--focus-w:       2px
--focus-off:     3px
--mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
--sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
--ease-out:      cubic-bezier(0.16,1,0.3,1)
--enter-dur:     0.95s
--grain-dur:     0.95s
```

Canvas constants mirror the tokens in JS: `NODES_N 9`, `SPACING 0.62`, `GYROID_A 0.9`, `NEWTON 0.9`, `DISPLACE_MAX 0.34`, `CAM_Z 9.0`, `DEPTH_NEAR 5.8`, `DEPTH_FAR 12.4`, `BUCKETS 12`, `YAW_PERIOD 48`, `PITCH_PERIOD 74`, `ROLL_PERIOD 90`, `DPR_MAX 2`, `DPR_MAX_MOBILE 1.5`.

Fonts (Google Fonts ONLY): `Inter:wght@400;500;600` and `IBM+Plex+Mono:wght@400;500`, one `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` plus one stylesheet link with `display=swap`.

---

## E. THE COMPOSITION — exact build order

**.page** is the grid container with three rows: `<header>`, `<main>`, `<footer>`.

**HEADER** — `padding: var(--header-y) var(--header-x); display:flex; align-items:center; justify-content:space-between; gap:24px`.

- Left: `a.brand` (href `#`, accessible name "Lattice home"): inline SVG mark 22x22 — a wireframe unit cell: `<path d="M11 2 L20 7 L20 16 L11 21 L2 16 L2 7 Z M11 2 L11 11.5 M11 11.5 L20 7 M11 11.5 L2 7" fill="none" stroke="#dfe9f3" stroke-width="1.3" stroke-linejoin="miter"/>` — then the wordmark `lattice`, `var(--sans); font-size:var(--logo); font-weight:600; letter-spacing:0.14em; text-transform:lowercase; color:var(--text)`, then a blinking underscore `_` in `var(--accent)` (`blink` keyframes, `animation: blink 1.06s steps(1) infinite`).
- Centre: `nav` with exactly 4 links — `01 materials`, `02 process`, `03 research`, `04 index` — all `href="#"`, mono, `font-size:var(--nav)`; container `height:var(--nav-h); display:flex; align-items:center; gap:28px`. Numerals sit in `<span class="num">` at `color:var(--dim)`, words at `color:var(--muted)`. Hover over 0.18s ease: word → `var(--text)`, numeral → `var(--accent)`.
- Right: `a.cta` (href `#`), text `Request data sheet` — mono, `font-size:var(--btn); height:var(--btn-h); padding:0 18px; display:inline-flex; align-items:center; border:1px solid var(--accent-line); border-radius:var(--radius-btn); color:var(--text); background:var(--accent-fill)`. Hover 0.2s ease: `background:rgba(223,233,243,0.13); border-color:var(--accent-dim); box-shadow:0 0 18px rgba(223,233,243,0.14); transform:translateY(-1px)`.

**MAIN (hero)** — `display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:var(--hero-y) var(--hero-x); width:100%`; inner `.hero-copy { width:100%; max-width:var(--hero-max) }`. Left-aligned, vertically centred in the 1fr row; on desktop it never exceeds 44vw so it cannot collide with the lattice at `cx = w*0.635`.

1. `.eyebrow` — mono, `font-size:var(--eyebrow); letter-spacing:0.18em; color:var(--dim); text-transform:uppercase`. Exact copy: `LATTICE MATERIALS · ARCHITECTED SOLIDS · EST. 2021`.
2. `h1` — EXACTLY ONE `<h1>`, `var(--sans); font-weight:600; font-size:var(--h1); letter-spacing:-0.045em; line-height:1.04; color:var(--text); margin:var(--copy-gap-h1) 0 0`. Two masked lines (see Motion), exact copy:
   Line 1: `Matter, architected.`
   Line 2: `Down to the unit cell.`
   Line 2 wraps `<em>unit cell</em>` styled `font-family:var(--mono); font-style:normal; font-weight:400; font-size:0.86em; letter-spacing:-0.02em; color:var(--accent)`.
3. `p.lead` — `var(--sans); font-size:var(--lead); line-height:1.6; letter-spacing:-0.012em; color:var(--muted); margin:var(--copy-gap-lead) 0 0; max-width:520px`. Exact copy: `Lattice grows gyroid-phase ceramics whose stiffness is programmed by geometry, then verified one unit cell at a time.`
4. `.spec` — mono, `font-size:var(--spec); color:var(--dim); margin-top:18px; white-space:nowrap`. Exact copy: `G-surface · Si–O system · ρ* 0.42 g/cm³ · E*/E_s 3.1`. The `G-surface` token is `color:var(--accent)`. At `<=560px` the `· E*/E_s 3.1` tail sits in `<span class="opt">` and is hidden so the line never wraps.
5. `.actions` — `display:flex; gap:12px; flex-wrap:wrap; margin-top:30px`. `a.btn.btn--primary` text `Request the data sheet`; `a.btn.btn--ghost` text `Read the method`. Both `href="#"`; treatments in section F.

**FOOTER** — `padding:22px var(--header-x); display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--border-soft)`.

- Left: mono `var(--foot)`, `color:var(--dim)`: `© 2026 Lattice Materials`.
- Centre: mono `var(--foot)`, `color:var(--dim)`: `SEM batch 07 · released 12 MAR`, preceded by a 7px square status pixel `display:inline-block; margin-right:8px; background:var(--accent); box-shadow:0 0 8px var(--accent-dim)`.
- Right: exactly 3 links `papers`, `patents`, `contact` — mono `var(--foot)`, `color:var(--muted)`, `gap:22px`, `href="#"`, hover `color:var(--text)` over 0.18s.

---

## F. THE UI LANGUAGE

Two button treatments, both squared and instrument-like. `.btn` is `display:inline-flex; align-items:center; justify-content:center; height:var(--btn-h); padding:0 20px; border-radius:var(--radius-btn); font-family:var(--mono); font-size:var(--btn); letter-spacing:0.01em; text-decoration:none; transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out), box-shadow 200ms var(--ease-out)`.

- `.btn--primary`: `color:#05070a; font-weight:500; border:1px solid rgba(255,255,255,0.55); background:linear-gradient(180deg, #f4f8fc 0%, #dfe9f3 55%, #c3cfdb 100%); box-shadow:0 12px 30px rgba(223,233,243,0.12), inset 0 1px 0 rgba(255,255,255,0.7)`. Hover: `background:linear-gradient(180deg, #ffffff 0%, #eaf1f8 52%, #d0dbe6 100%); transform:translateY(-1px); box-shadow:0 16px 38px rgba(223,233,243,0.20), inset 0 1px 0 rgba(255,255,255,0.8)`. Active: `transform:translateY(0)`.
- `.btn--ghost`: `color:var(--text); border:1px solid var(--border); background:rgba(255,255,255,0.03)`. Hover: `border-color:var(--accent-line); background:rgba(223,233,243,0.07); transform:translateY(-1px)`. Active: `transform:translateY(0)`.

The header CTA reuses the ghost family with `background:var(--accent-fill)`. Nav and footer links are plain mono text with numeral prefixes — no pills, no backgrounds, no underlines. Focus: every `a`/`button` gets `:focus-visible { outline:var(--focus-w) solid var(--accent); outline-offset:var(--focus-off); border-radius:2px }`; `::selection { background:rgba(223,233,243,0.22); color:#ffffff }`.

---

## G. MOTION — entrance stagger + named keyframes

All entrance animations: `animation-duration:var(--enter-dur); animation-fill-mode:both; animation-timing-function:var(--ease-out); animation-delay:var(--d, 0.08s)`. Each animated element carries `.appear`, one modifier selecting keyframes, and inline `--d`.

Stagger table (element → modifier → --d):
```
brand            appear--fade   0.08s
nav link 1       appear--fade   0.16s
nav link 2       appear--fade   0.23s
nav link 3       appear--fade   0.30s
nav link 4       appear--fade   0.37s
header cta       appear--chip   0.44s
eyebrow          appear--type   0.52s
h1 line 1        appear--mask   0.66s
h1 line 2        appear--mask   0.80s
lead             appear--soft   0.98s   (duration 1.15s)
spec line        appear--soft   1.12s
primary button   appear--chip   1.24s
ghost button     appear--chip   1.32s
footer left      appear--fade   1.44s
footer centre    appear--fade   1.52s
footer right     appear--fade   1.60s
```

Named keyframes (all end at opacity 1 / identity transform):
```
in-fade   from { opacity: 0 }                                          to { opacity: 1 }
in-soft   from { opacity: 0; transform: translateY(12px) }             to { opacity: 1; transform: none }
in-mask   from { opacity: 0; transform: translateY(104%) }             to { opacity: 1; transform: none }
in-chip   from { opacity: 0; transform: translateY(8px) scale(0.97) }  to { opacity: 1; transform: none }
in-type   from { opacity: 0; clip-path: inset(0 100% 0 0) }            to { opacity: 1; clip-path: inset(0 -4% 0 0) }
blink     0%,49% { opacity: 1 }  50%,100% { opacity: 0 }
grain     0% { transform: translate(0,0) }  25% { transform: translate(-2%,1%) }
          50% { transform: translate(1%,-2%) }  75% { transform: translate(-1%,2%) }
```

H1 masking: each line is `<span class="line"><span class="line-inner appear appear--mask">…</span></span>` with `.line { display:block; overflow:hidden; padding:0.03em 0.06em 0.09em }`, `.line-inner { display:inline-block }`. `in-mask` rises out of that hard edge; `in-type` reveals the eyebrow left-to-right like a typed label. Canvas rotation and grain jitter run continuously, independent of the stagger.

---

## H. RESPONSIVE TABLE — token overrides per breakpoint (exact)

```
>= 1600px:
  --h1: 74px  --logo: 16px  --nav: 13.5px  --btn: 13.5px  --btn-h: 44px
  --lead: 17px  --spec: 13px  --foot: 12.5px
  --header-y: 30px  --header-x: 60px  --hero-x: 60px  --hero-max: 700px

>= 1920px:
  --h1: 86px  --header-x: 76px  --hero-x: 76px  --hero-max: 780px
  --lead: 18px  --nav-h: 42px  --btn-h: 46px

1280px – 1599px:
  --h1: 56px  --header-x: 40px  --hero-x: 40px  --hero-max: 600px

901px – 1279px:
  --h1: 44px  --nav-h: 34px  --header-x: 30px  --hero-x: 30px
  --hero-max: 520px  --lead: 15px  --spec: 12px

>= 901px AND max-height 850px:
  --h1: 46px  --hero-y: 24px  --header-y: 18px  --lead: 15px
  --copy-gap-h1: 16px  --copy-gap-lead: 18px   (spec margin-top 14px, actions margin-top 22px)
  canvas zoom: 0.88

>= 901px AND max-height 720px:
  --h1: 38px  --hero-y: 14px  --header-y: 12px  --eyebrow: 11px
  --lead: 13.5px  --spec: 11.5px  --btn-h: 36px  --foot: 11px
  canvas zoom: 0.78

>= 901px (desktop lock, all heights):
  html, body { height:100%; overflow:hidden }   .page { height:100dvh; overflow:hidden }
  .scrim uses the 90deg gradient; hero-copy max-width never exceeds 44vw

<= 900px:
  no height lock; page may scroll; nav becomes a full-viewport overlay menu:
  - header keeps brand + burger <button class="burger" aria-label="Menu" aria-expanded="false">
    (three 18x1.5px bars in var(--text), gap 5px); the header CTA hides here
  - .menu { position:fixed; inset:0; z-index:80; background:rgba(5,7,10,0.94); backdrop-filter:blur(12px);
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:0 32px;
    gap:24px; transform:translateY(-100%); transition:transform 0.45s var(--ease-out) }
  - .menu.open { transform:none }; links at --nav: 22px + the CTA chip; Escape, link click, or resize >900px all close it
  canvas: cx = w*0.5, cy = h*0.42, dpr cap 1.5
  --h1: 40px  --header-x: 24px  --hero-x: 24px  --hero-max: 100%  --hero-y: 64px

<= 560px:
  --h1: 32px  --lead: 14.5px  --spec: 11px  --eyebrow: 10.5px  --header-x: 20px  --hero-x: 20px
  .spec .opt { display:none }
  footer becomes flex-direction:column; align-items:flex-start; gap:10px
```

The `min-height:100dvh` stays at every breakpoint; only the `901px+` lock adds `overflow:hidden`. No element exceeds `100vw` at the four required viewports.

---

## I. FAILURE GUARDS — the page is never blank, never broken

1. **Black-first:** the FIRST CSS rule is `html, body { background:#05070a !important; color:#eef3f8 }`; the body tag carries `style="background:#05070a;color:#eef3f8"`; a later rule restates `html, body { background:#05070a; background-image:linear-gradient(180deg,#070a0e 0%,#05070a 46%,#030508 100%) }`.
2. **Resting opacity is 1:** every `.appear` element's un-animated computed style is its final state (opacity 1, no transform, no clip-path). `fill-mode: both` only holds the FROM state during the delay. If animations fail or JS never runs, the page renders complete.
3. **Two-rAF entrance fallback:** after two nested rAF ticks, for every `.appear` run `el.getAnimations({subtree:false})`; if none reports `playState` "running" or "finished", add `.is-in` to ALL `.appear`. If `getAnimations` is missing, apply `.is-in` after the two rAFs. `.is-in { animation:none !important; opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important }`.
4. **Canvas fallback:** if `canvas.getContext('2d')` returns null or throws, add `.no-canvas` to `<html>`, push the string `'canvas-unavailable'` into `window.__DEMO__.errors`, and CSS paints a static wire substitute: `.no-canvas body { background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 56px 56px; background-position: center; }` plus `.no-canvas .scrim::after` a static 1px horizon `linear-gradient(90deg, transparent, rgba(223,233,243,0.22), transparent)` at `top:54%; height:1px`.
5. **Reduced motion:** inside `@media (prefers-reduced-motion: reduce)`: `*, *::before, *::after { transition:none !important; animation:none !important }`; force `.appear, .line-inner, .eyebrow` to `opacity:1 !important; transform:none !important; clip-path:none !important`; hide `.grain` and the cursor blink; the rAF loop keeps running (`frames` increments) with `t` frozen at 7.5s, painting one identical static frame per tick — readable, static, never blank.
6. **Zero console output:** no `console.*` calls, no thrown exceptions, every canvas call guarded, the geometry builder wrapped so a maths failure degrades to the raw cubic grid.

---

## J. THE EXACT JS (only this, vanilla, one IIFE at end of body)

1. **Telemetry first, before anything else:**
   `window.__DEMO__ = { name: 'lattice', ready: false, frames: 0, effects: [], errors: [] };`
   Push `'gyroid-lattice'`, `'horizon-glow'`, `'grain-texture'` into `effects` in that order, exactly once. Then `window.addEventListener('error', e => window.__DEMO__.errors.push(String(e.message || e)))`.
2. **Build geometry once:** `pts = new Float32Array(2187)`, `idx = new Uint16Array(3888)`, working `rx/ry/rz` and `sx/sy/dd` `Float32Array(729)`, `ok = new Uint8Array(729)`. Fill the 9x9x9 grid at spacing 0.62, Newton-project per section B inside try/catch (on failure keep raw grid points), build the 1944 edge pairs (`+x/+y/+z` neighbours). Allocate 12 `Uint16Array(1944)` bucket buffers + counts and 12 cached `'rgba(223,233,243,' + alpha[b] + ')'` strings with `alpha[b] = 0.03 + 0.29 * Math.pow(1 - b/11, 1.25)`.
3. **Canvas setup:** grab `#lattice`, guard the 2d context (null → `.no-canvas` + one errors push). `resizeCanvas()`: read `innerWidth/innerHeight` (never getBoundingClientRect), `dpr = Math.min(devicePixelRatio, innerWidth <= 900 ? 1.5 : 2)`, set the backing store, `ctx.setTransform(dpr,0,0,dpr,0,0)`, rebuild the three cached gradients and `cx, cy, f` per section B. Resize queues via a boolean + rAF only.
4. **Render loop:** one `requestAnimationFrame` callback. Each tick: `window.__DEMO__.frames++` once; if `document.hidden`, skip paint but keep the loop alive; `t = reduced ? 7.5 : ms/1000`; compute `theta, phi, psi` per section B (sin/cos computed 3 times per frame, not per node); rotate all 729 nodes into `rx/ry/rz`; project to `sx/sy/dd`; validity `5.8 < depth < 12.4`; reset bucket counts, bucket every edge by mean depth; `clearRect(0,0,w,h)`; paint horizon band, horizon core; for `b = 11..0`: `beginPath()`, `moveTo/lineTo` the bucket, `stroke()` at `lineWidth 1`; paint the vignette. On the FIRST completed paint set `window.__DEMO__.ready = true`. NO allocation, NO getBoundingClientRect, NO ctx.filter, NO ctx.shadowBlur, NO gradient recreation in the loop.
5. **Entrance fallback:** two nested rAFs after DOMContentLoaded, then the `.appear` `getAnimations` check and `.is-in` sweep per I.3.
6. **Mobile menu (`<=900px` only):** burger toggles `.menu.open` + `aria-expanded`; Escape, any link click, or resize to `>900px` closes.
7. **Reduced motion:** read `matchMedia('(prefers-reduced-motion: reduce)')` once at startup; when true freeze `t` at 7.5 (loop and `frames` keep running) and hide `.grain` via CSS.

No other JS. No libraries. No timers. No console calls.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Margin

- Slug: `margin`
- Page: https://landingpageprompts.com/prompts/margin
- Effect: Two counter-scrolling columns of procedural deadstock garment plates frame a static marketplace message.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 56,960; total with repair and cross-check: 213,992
- Verification: 20/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - The page contains exactly one h1, semantic header, nav, main, and footer, and document.documentElement.scrollHeight does not exceed window.innerHeight at 1440x900.
  - At 1440x900, both marquee sections contain 12 plate articles, each plate measures 320 by 440 CSS pixels, and the two tracks use opposite 34-second linear animations.
  - Every plate contains an inline SVG with exactly three garment paths, a 3px repeating-linear-gradient texture layer, a centered 0.6-scale hang-tag group, and one readable size label.
  - At 390x844, document.documentElement.scrollWidth is no greater than window.innerWidth, both counter-scrolling columns remain visible, and the hero switches to the stacked responsive composition.
  - window.__DEMO__ exists with name margin, ready becomes true after first paint, frames increases inside the rAF loop, effects contains the named effects, and the page has no uncaught browser errors.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. BUILD TARGET

Create one complete, framework-free index.html for the Second Skin marketplace landing page. Set the document title to "Second Skin — Deadstock, kept in motion" and set lang="en". Load the only permitted network resource, the Open Sans stylesheet from fonts.googleapis.com, followed by fonts.gstatic.com, with a system fallback of Arial, Helvetica, sans-serif; if the request fails, all typography must remain legible. No other network request is allowed.

At viewport widths of 901px and wider, the document must use height: 100dvh, min-height: 700px, and overflow: hidden. The page itself is a fixed, full-viewport editorial marketplace scene and must not scroll. At widths of 900px and below, replace that rule with height: auto, min-height: 100dvh, overflow-x: hidden, and normal vertical document scrolling. This is not a scroll-driven concept: the counters run continuously rather than responding to page scroll.

Use semantic header, nav, main, section, article, figure, and footer elements. Include exactly one h1. Every visible link, button, nav item, and size label must have an accessible name. Decorative SVGs and texture layers must use aria-hidden="true". Add :focus-visible outlines using a 2px solid #B4674E outline with a 3px #F4F1EA offset.

Do NOT build a product grid, shopping cart, account modal, filter drawer, checkout flow, video background, image carousel, external image, photograph, WebGL scene, Three.js canvas, scroll-linked reveal, horizontal page scroll, text marquee, or mobile pin. Do not include a second h1, a cookie notice, a newsletter modal, autoplay sound, a cursor follower, or a JavaScript animation library. Do not use Tailwind, React, GSAP, Lottie, MP4, WebM, GIF, remote raster media, CDN-hosted scripts, base64 imagery, or data-URI photography.

B. THE BACKDROP

The page background is a flat #F4F1EA bone field. Place one fixed decorative canvas behind all content at z-index 0. It is not a garment renderer: it is a low-cost ambient weave that prevents the large bone areas from reading as empty. The canvas is pointer-events: none and has the same dimensions as the viewport.

Create the canvas at devicePixelRatio, capped at 1.5. In JavaScript, multiply window.innerWidth and window.innerHeight by the capped ratio, assign those values to canvas.width and canvas.height, and set the CSS size to 100% by 100%. This is the canvas resolution trick. Redraw it only on resize, not on every animation frame.

The static canvas background is transparent. Draw a 3px lattice in two passes. First draw horizontal lines at y = 0, 3, 6 through height using rgba(26,24,21,0.018). Then draw vertical lines at x = 0, 3, 6 through width using rgba(26,24,21,0.012). The resulting average composite cost is under 0.7 fill rectangles at a 1.5 DPR cap. Do not call ctx.filter, ctx.shadowBlur, ctx.drawImage, or any per-item blur operation. The visible garment cards supply the detailed texture; the canvas is only a page-level paper grain.

The primary moving backdrop is the pair of column tracks. Each column contains 12 article elements: 6 authored garment plates followed by an exact DOM duplicate of those 6 articles. Each card is 320px wide by 440px high on the desktop scale. The 12-card track uses 16px row gaps and is 6,768px tall including the six repeated cards and eleven inter-card gaps. The first and second columns are identical in dimensions but use different authored plate order and opposite motion direction. Their transform animation travels exactly 50% of the duplicated track, 3,384px, over 34 seconds with linear timing. The duplicated boundary contains the same 16px gap as every internal boundary, so the loop is visually continuous.

Each card has a flat #E8E4DC field. Inside every card, render one inline SVG with viewBox="0 0 320 440", width 320px, height 440px. The SVG must contain exactly three overlapping garment-body path shapes: a left shoulder and sleeve path, a main body path, and a right shoulder and sleeve path. All three paths use the same muted dye color selected for that card, a 1.5px #1A1815 stroke, and a solid fill. Over the SVG, place a 3px repeating-linear-gradient weave layer with background-image repeating-linear-gradient(0deg, rgba(26,24,21,0.04) 0px, rgba(26,24,21,0.04) 1px, transparent 1px, transparent 3px), plus a second repeating-linear-gradient rotated 90 degrees at the same opacity.

Use six dye colors in this exact order: #7C8B7A, #9B9A78, #A97862, #6F7D82, #B4674E, and #8A786D. Cycle those six colors through the first authored six cards in each column, then repeat the colors in the duplicated six. Use these silhouettes in the SVG, with the path coordinates measured in the 320 by 440 viewBox: left path "M80 112 C54 118 38 141 28 177 L45 245 L80 224 L88 137 Z"; body path "M88 118 C108 101 134 101 158 118 L177 345 C153 360 96 360 72 345 Z"; right path "M158 112 C184 118 200 141 210 177 L193 245 L158 224 L150 137 Z". Apply the same geometry to all cards and vary the SVG group transform by card: identity for the first row, translateY(0) for all rows, and use a 0.92 to 1.04 scale range across the six cards. The variation must not alter the 320 by 440 card bounds.

Add one hang-tag rectangle inside each SVG. Center it at x=250, y=86, width 54px, height 78px, with a 1.5px #1A1815 outline, a small 4px circular punch hole at x=250 y=99, and a 0.35 opacity #F4F1EA diagonal fold line. Set the tag rectangle group to transform-origin 250px 86px and scale(0.6). Render the size text at x=250, y=133, using the card's own selected font stack, font-size 15px, font-weight 700, text-anchor middle, fill #1A1815, and the exact size string assigned to that plate. Alternate the size strings XS, S, M, L, XL, and 2XL by card index.

The apparent travel of each fade region is 900px: each column is covered by a 128px top gradient and a 128px bottom gradient. The gradients are static and do not animate. They are #F4F1EA at 0% opacity 1, #F4F1EA at 58% opacity 0.86, transparent at 100%, with the bottom gradient mirrored by reversing its stop sequence. Place them inside each column, outside the moving track, with pointer-events: none.

C. THE LAYER STACK

The stacking order is explicit and must not be changed.

z-index 0: the ambient weave canvas, fixed to the viewport, pointer-events none.

z-index 1: the page bone background on body and the full-width hero shell.

z-index 2: the left marquee column, at the left edge of the central desktop grid.

z-index 3: the left column's top and bottom fade overlays.

z-index 4: the center message panel, positioned in the 40vw horizontal gap.

z-index 5: the right marquee column.

z-index 6: the right column's top and bottom fade overlays.

z-index 7: the header navigation, which remains above all moving material.

z-index 8: the footer metadata, which remains above all moving material.

z-index 9: a single 1px transparent focus-ring utility, pointer-events none, used only as a visual stacking helper when needed.

The columns must not overlap the center panel on desktop. The center panel is 40vw wide at widths from 901px through 1920px, capped at 640px. The two column cards remain 320px wide. At 1440px, use a centered three-column grid with 320px, minmax(320px, 40vw), 320px and 40px gaps. The grid occupies 1,296px at 1440px, leaving 72px of outer breathing room. At 1920px, the 640px center cap creates 400px of intentional page margin on each side of the full composition.

D. TOKEN TABLE

Define every value used by the page in :root:

--bg: #F4F1EA
--ink: #1A1815
--plate: #E8E4DC
--sage: #7C8B7A
--rust: #B4674E
--white-muted: rgba(244,241,234,0.72)
--line: rgba(26,24,21,0.18)
--line-strong: rgba(26,24,21,0.34)
--grain: rgba(26,24,21,0.04)
--dye-1: #7C8B7A
--dye-2: #9B9A78
--dye-3: #A97862
--dye-4: #6F7D82
--dye-5: #B4674E
--dye-6: #8A786D
--page-min: 700px
--header-height: 76px
--footer-height: 66px
--grid-gap: 40px
--card-width: 320px
--card-height: 440px
--card-gap: 16px
--fade-height: 128px
--center-width: 40vw
--center-max: 640px
--gutter: 32px
--radius-pill: 999px
--radius-tag: 4px
--type-display: clamp(3.5rem, 6.2vw, 7.75rem)
--type-title: clamp(1.75rem, 3.15vw, 4rem)
--type-body: 16px
--type-small: 12px
--type-label: 11px
--leading-display: 0.88
--leading-title: 0.98
--leading-body: 1.45
--track-label: 0.14em
--motion-counter: 34s
--motion-hover: 220ms
--motion-tag: 400ms
--ease-hover: cubic-bezier(.2,.8,.2,1)
--ease-entrance: cubic-bezier(.25,.1,.25,1)

E. THE COMPOSITION

Build the document in this order.

First create body and the semantic page wrapper. Body has margin 0, background var(--bg), color var(--ink), font-family Arial, Helvetica, sans-serif, overflow-x hidden, and -webkit-font-smoothing: antialiased. Set the header height to var(--header-height), display grid with grid-template-columns 1fr auto 1fr, align-items center, padding 0 var(--gutter), and border-bottom 1px solid var(--line). Place the wordmark link at the left with exact visible copy "SECOND SKIN", font-size 14px, font-weight 800, letter-spacing 0.18em, and accessible label "Second Skin home". Place the nav in the center with two links, exact visible copy "SHOP DEADSTOCK" and "HOW IT WORKS", both 11px, uppercase, 700, letter-spacing 0.12em. Place the right-side link at the right with exact visible copy "SELL A PIECE", border-bottom 1px solid var(--ink), and accessible label "Sell a piece". Header z-index is 7.

Then create main and the single hero section. The hero is width 100%, height calc(100dvh - var(--header-height) - var(--footer-height)), min-height 560px, and display grid. The desktop grid is grid-template-columns var(--card-width) minmax(320px, var(--center-width)) var(--card-width), column-gap var(--grid-gap), align-items stretch, justify-content center, padding 0 32px. The center block has z-index 4, display flex, flex-direction column, justify-content center, align-items flex-start, padding 0 28px, and text-align left.

Create the center message with the following exact copy. The eyebrow is "THE DEADSTOCK EDIT / 06". The h1 is "Wear the / in-between." The h1 uses max-width 560px, font-size var(--type-display), line-height var(--leading-display), font-weight 500, letter-spacing -0.075em, margin 0, and wraps on the literal slash using a line break. The paragraph is "Discontinued shapes, unworn surplus, and hard-to-find layers. Browse pieces that no longer make it to the shelf." Its max-width is 390px, margin 26px 0 0, font-size var(--type-body), line-height var(--leading-body), color rgba(26,24,21,0.72). The primary action is an accessible link with visible copy "EXPLORE THE EDIT" and aria-label "Explore the deadstock edit". The secondary action is a text link with visible copy "VIEW SELLING GUIDE" and aria-label "View the selling guide". The action row uses margin-top 32px, display flex, gap 18px, align-items center, flex-wrap wrap.

Below the center message, add a compact inventory line with exact copy "2,481 pieces rescued" and a 6px sage dot. It sits 44px below the action row, with font-size 12px, letter-spacing 0.08em, and color rgba(26,24,21,0.62). This line is informational, not a control.

Create the left and right marquee columns as two section elements with aria-label "Discontinued garment plates". Each section is 320px wide, height 100%, overflow hidden, position relative. Inside each section, create a .track containing 12 .plate articles. Set track position absolute at top 0 and left 0, width 320px, display flex, flex-direction column, gap 16px, and will-change transform. Animate the left track with keyframes columnUp from translateY(0) to translateY(-3384px), and the right track with keyframes columnDown from translateY(-3384px) to translateY(0). Both animations are 34s linear infinite, with animation-delay 0s on the left and -17s on the right. Do not pause either track on hover.

Each plate article has position relative, width 320px, height 440px, flex 0 0 440px, overflow hidden, background var(--plate), border 1px solid rgba(26,24,21,0.08), and transform-origin center. Add a figure element with margin 0 and an SVG filling the article. Add a small plate index in the upper-left corner at 16px 16px, font-size 10px, font-weight 700, letter-spacing 0.12em, and copy "SS / 01" through "SS / 12" by authored row. The index must not obscure the garment body.

Place the exact top fade in each column with position absolute, inset 0 0 auto, height 128px, background linear-gradient(to bottom, #F4F1EA 0%, rgba(244,241,234,0.86) 58%, transparent 100%), z-index 3. Place the bottom fade with position absolute, inset auto 0 0, height 128px, background linear-gradient(to top, #F4F1EA 0%, rgba(244,241,234,0.86) 58%, transparent 100%), z-index 3.

Create the footer as a grid with height var(--footer-height), padding 0 var(--gutter), border-top 1px solid var(--line), display grid, grid-template-columns 1fr auto 1fr, align-items center, font-size 11px, letter-spacing 0.08em. Left copy is "CURATED IN LONDON / 2025". Center copy is "NO SEASON. NO SAMPLE SALE.". Right copy is "SCROLL LESS. FIND MORE." and is right-aligned. Footer is not sticky on mobile.

F. THE UI LANGUAGE

The primary action is a 48px high pill with padding 0 22px, border-radius 999px, background linear-gradient(135deg, #1A1815 0%, #34302A 100%), color #F4F1EA, font-size 11px, font-weight 800, letter-spacing 0.13em, and border 1px solid #1A1815. Its hover state is background linear-gradient(135deg, #34302A 0%, #1A1815 100%), transform translateY(-2px), and box-shadow 0 6px 0 rgba(180,103,78,0.36). The primary action must return to its original position in 180ms when focus or hover ends.

The secondary action has no filled background, a 1px bottom border, padding 0 0 4px, and color var(--ink). Its hover state is color var(--rust), border-color var(--rust), and transform translateX(3px). The selling link is not a pill. Header links use color var(--ink) and a 2px bottom border that changes from transparent to var(--rust) on hover and focus-visible. No link changes layout on hover.

Plate hover is 220ms with var(--ease-hover): transform translateY(-6px) scale(1.03), border-color var(--line-strong), and a subtle box-shadow 0 12px 24px rgba(26,24,21,0.08). Because the card is inside a moving track, apply hover transform to the article and never stop the parent track. The SVG tag group swings from rotate(-2deg) to rotate(4deg) over 400ms with ease-out, using transform-origin 250px 86px. Return to rotate(0deg) on pointer leave over 400ms. All hover motion is disabled under reduced motion.

G. MOTION

The entrance grammar is opacity 0 to 1 plus translateY(20px) to translateY(0), duration 620ms, using var(--ease-entrance), fill mode both. Apply .rise once on load.

Use this exact stagger:

header .wordmark: rise, delay 0ms.
header nav: rise, delay 80ms.
header .sell-link: rise, delay 120ms.
center .eyebrow: rise, delay 180ms.
center h1: rise, delay 260ms.
center p: rise, delay 380ms.
center .actions: rise, delay 480ms.
center .inventory: rise, delay 560ms.
footer .footer-left: rise, delay 620ms.
footer .footer-center: rise, delay 680ms.
footer .footer-right: rise, delay 740ms.

Define rise as opacity 0 and transform translateY(20px) at 0%, opacity 1 and transform translateY(0) at 100%. Define columnUp and columnDown as the two exact transform tracks described in the composition. Define tagSwing as rotate(0deg) at 0%, rotate(4deg) at 55%, and rotate(0deg) at 100%. Use only transform and opacity in animated CSS. The marquee uses transform only. Entrance uses transform and opacity only. The tag uses transform only.

H. RESPONSIVE TABLE

At 1440px by 900px and 1920px by 1080px, retain the desktop values. The composition remains one viewport, the center width is min(40vw, 640px), and the two 320px columns remain visible. At a viewport height of 760px, override --header-height to 64px, --footer-height to 54px, --gutter to 24px, --type-display to clamp(3rem, 5.7vw, 6rem), and set the hero minimum height to 520px. At a viewport height of 680px, override --header-height to 58px, --footer-height to 48px, --gutter to 20px, --type-display to clamp(2.6rem, 5.2vw, 5rem), set the center paragraph max-width to 330px, and reduce the action row margin-top to 22px.

At 901px through 1023px, set --card-width: 280px, --card-height: 386px, --grid-gap: 24px, --gutter: 24px, --fade-height: 104px, and --center-width: 40vw. Render the cards at 280 by 386 in CSS, but keep the SVG viewBox at 0 0 320 440 so the silhouettes do not distort. Update the track's exact half travel to 2,976px using the duplicated six-card geometry and 14px card gap. The 34s duration remains unchanged.

At 768px by 1024px, switch to the stacked mobile composition. Set body and the document to normal vertical flow. Set header height 64px, footer height 58px, gutter 24px, and hero height auto. Use a single-column main grid with grid-template-rows: auto 520px; row-gap 24px. Put the center message first, then place both columns in a two-column subgrid with grid-template-columns 1fr 1fr and column-gap 16px. Each mobile column is width 100%, max-width 360px, and height 520px. Set cards to 100% width, 440px high, and use the same SVG viewBox with preserveAspectRatio="xMidYMid slice". Reduce the card gap to 14px and set the mobile track half travel to 2,964px. The mobile fade height is 96px. The center text uses a max-width of 520px, text-align left, and padding 0 24px.

At 390px by 844px, set header height 60px, footer height auto with min-height 92px, gutter 16px, row-gap 18px, grid-template-rows: auto 420px, and grid-template-columns 1fr 1fr. Set the mobile columns to 171px wide, cards to 171px wide and 300px high, card gap 12px, fade height 78px, and mobile track half travel to 1,872px. The SVG uses preserveAspectRatio="xMidYMid slice". The center message has padding 0 8px, h1 font-size 48px, line-height 0.9, paragraph max-width 340px, and action row gap 12px. Reduce the inventory line margin-top to 28px. Keep the two-column counter-scroll; do not hide either column.

At max-width 900px, header navigation keeps both links but reduces the gap to 14px, the sell link becomes text-only, and the header uses grid-template-columns 1fr auto. Put the sell link in the second row of the nav? No: move the sell link to the footer by duplicating no controls. Hide the header sell link with display:none, which removes it from the accessibility tree, and keep the two center nav links. The footer becomes a 2-row layout with the left and right metadata on the first row and the center statement on the second row. At 390px, footer padding is 14px 16px and all footer text is 9px.

I. FAILURE GUARDS

Set every animated entrance element's resting opacity to 1 and resting transform to translateY(0). Do not leave opacity 0 if JavaScript fails. The plate tracks have their authored content in the DOM before animation begins. If CSS animation is unavailable, cards remain visible in a static, usable column. If fonts fail, the fallback stack renders all copy without layout collapse. If SVG path rendering fails, the plate field, index, and size tag remain readable.

Use a two-requestAnimationFrame fallback to set the telemetry ready flag: first rAF schedules the second rAF, and the second rAF sets ready true. The telemetry object must exist before either frame is scheduled. If reduced motion is enabled, cancel the marquee animations by setting animation: none, show the first six cards in each column at opacity 1, and do not call requestAnimationFrame continuously. Read the media query once at startup and again on its change event.

J. THE EXACT JS

Use this JavaScript at the end of body:

const telemetry = {
  name: "margin",
  ready: false,
  frames: 0,
  effects: [],
  errors: []
};
window.__DEMO__ = telemetry;

window.addEventListener("error", event => {
  telemetry.errors.push(String(event.message || "window error"));
});

const reduceMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
const canvas = document.querySelector("[data-weave]");
const context = canvas && canvas.getContext("2d", { alpha: true });
const ratio = Math.min(window.devicePixelRatio || 1, 1.5);
let running = true;
let previous = 0;

function drawWeave() {
  if (!canvas || !context) return;
  const width = window.innerWidth;
  const height = window.innerHeight;
  canvas.width = Math.max(1, Math.floor(width * ratio));
  canvas.height = Math.max(1, Math.floor(height * ratio));
  canvas.style.width = width + "px";
  canvas.style.height = height + "px";
  context.setTransform(ratio, 0, 0, ratio, 0, 0);
  context.clearRect(0, 0, width, height);
  context.fillStyle = "rgba(26,24,21,0.018)";
  for (let y = 0; y < height; y += 3) {
    context.fillRect(0, y, width, 1);
  }
  context.fillStyle = "rgba(26,24,21,0.012)";
  for (let x = 0; x < width; x += 3) {
    context.fillRect(x, 0, 1, height);
  }
}

function markReady() {
  telemetry.ready = true;
  requestAnimationFrame(frame);
}

function frame(time) {
  if (!running) return;
  if (previous === 0) previous = time;
  const delta = Math.min(50, time - previous);
  previous = time;
  telemetry.frames += 1;
  if (telemetry.frames === 1) telemetry.effects.push("ambient-weave");
  if (telemetry.frames === 1) telemetry.effects.push("counter-scroll");
  if (telemetry.frames === 1) telemetry.effects.push("rise");
  if (delta > 40) telemetry.effects.push("frame-recovery");
  requestAnimationFrame(frame);
}

function stopForReducedMotion() {
  running = false;
  telemetry.effects.push("reduced-motion");
}

drawWeave();
window.addEventListener("resize", drawWeave, { passive: true });
if (reduceMotionQuery.matches) {
  stopForReducedMotion();
} else {
  requestAnimationFrame(() => requestAnimationFrame(markReady));
}
reduceMotionQuery.addEventListener("change", event => {
  if (event.matches) stopForReducedMotion();
});

window.__DEMO__ = telemetry;

The implementation must keep the rAF loop at one request per frame, increment frames exactly once inside that callback, avoid getBoundingClientRect entirely, avoid layout reads after initial setup, and produce no console output.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Monolith Type

- Slug: `monolith-type`
- Page: https://landingpageprompts.com/prompts/monolith-type
- Effect: A giant extruded wordmark with a specular sweep and a floor reflection
- Model: `gpt-5.5` (GPT-5.5 (gpt-5.5)) on Workbuddy proxy
- Build tokens: 28,254; total with repair and cross-check: 117,198
- Verification: 17/18 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - the generated index.html contains exactly one h1, and the h1 exposes aria-label="MONOLITH" while its visual wordmark is split into exactly eight .letter spans per visible word copy
  - there are exactly 12 extrusion layers plus one top-face layer for the MONOLITH wordmark, and the page contains a .specular-mask with an active specular-sweep CSS animation
  - window.__DEMO__ exists with name "monolith-type", ready becomes true after first paint, frames increments via requestAnimationFrame, and effects contains css-extruded-wordmark, specular-sweep, floor-reflection, procedural-css-stage, letter-cascade, and mobile-menu
  - at viewport widths 1440 and 1920, html/body and .page are locked to one 100dvh frame with overflow hidden; at 390px and 768px there is no horizontal overflow
  - the document performs no network requests except Google Fonts and contains no canvas, video, img, iframe, external media URLs, framework scripts, or third-party CDN assets
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. Build one complete valid index.html for a single-viewport landing page for a type-design studio named MONOLITH. Document title: Monolith Type — Monumental Letterforms. Set lang="en". One file only: plain HTML, inline CSS, and one small inline script. No build step, no framework, no bundler. Google Fonts is the only permitted network request; use it for Inter and Instrument Serif with system fallbacks, and do not load any other URL. No external media: no images, no video, no GIF, no canvas, no WebGL, no Three.js, no Lottie, no icon CDN, no base64 photo blobs. Every visible pixel must be generated from HTML, CSS gradients, SVG primitives, pseudo-elements, and text. Desktop is exactly one frame with no scroll at width >= 901px: html and body height:100%; overflow:hidden; .page height:100dvh; overflow:hidden. Mobile and tablet at width <= 900px may scroll vertically but must never overflow horizontally. Create exactly one h1, and split the word MONOLITH into per-letter spans so each letter can cascade in. The page contains only: header, main hero, and footer with three small stat items. Do NOT build extra sections, cards, pricing, forms, testimonials, case studies, blog links, app screenshots, video controls, dark-mode toggles, cookie banners, or a large footer sitemap. The core visual idea is a giant extruded wordmark with a slow specular sweep across its top face and a blurred vertically-faded floor reflection beneath it.

B. THE BACKDROP. Use pure CSS and SVG only; no canvas. The cinematic field is a procedural stage built from three fixed elements behind the page: .stage-field, .stage-grid, and .stage-noise. .stage-field covers inset:0 with background color #050505 and these layered gradients, back to front: radial-gradient(circle at 50% 118%, rgba(242,242,232,0.16) 0%, rgba(242,242,232,0.075) 14%, rgba(242,242,232,0.025) 31%, transparent 52%); radial-gradient(ellipse at 50% 65%, rgba(138,138,122,0.075) 0%, rgba(82,82,74,0.032) 36%, transparent 68%); linear-gradient(180deg, #050505 0%, #070706 38%, #020202 100%). .stage-field::before is the horizon haze: position absolute; left:50%; top:58%; width:min(86vw, 1280px); height:1px; transform:translateX(-50%); background:linear-gradient(90deg, transparent 0%, rgba(242,242,232,0.10) 18%, rgba(242,242,232,0.32) 50%, rgba(242,242,232,0.10) 82%, transparent 100%); filter:blur(0.5px); opacity:0.75. .stage-field::after is the floor plane: position absolute; left:50%; bottom:-12%; width:min(118vw, 1640px); height:46%; transform:translateX(-50%) perspective(760px) rotateX(66deg); transform-origin:50% 100%; border-radius:50% 50% 0 0; background:radial-gradient(ellipse at 50% 0%, rgba(255,255,245,0.105) 0%, rgba(230,230,215,0.045) 22%, rgba(120,120,108,0.018) 48%, transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 82px), repeating-linear-gradient(0deg, rgba(255,255,255,0.032) 0 1px, transparent 1px 70px); opacity:0.68; mask-image:linear-gradient(180deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.54) 40%, transparent 100%). .stage-grid covers inset:0; opacity:0.35; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size:96px 96px; background-position:center calc(50% + 8px); mask-image:radial-gradient(ellipse at 50% 58%, black 0%, black 36%, transparent 74%). Animate .stage-grid with grid-drift for 28s linear infinite from background-position:center calc(50% + 8px) to calc(50% + 96px) calc(50% + 104px). .stage-noise is an inline SVG filter texture element, not an external image: an absolutely positioned div with opacity:0.12, mix-blend-mode:screen, pointer-events:none, background generated by an inline SVG data URL is not allowed; instead create an inline svg element in the HTML containing feTurbulence baseFrequency 0.72, numOctaves 2, seed 17, stitchTiles stitch, and use a full-viewport rect with filter url(#noise-filter). Its CSS opacity is 0.105 on desktop and 0.075 on mobile. The backdrop frame budget is light: animate only transform and background-position; no blur animation; no layout-affecting properties in loops. The only continuously moving visual effects are grid-drift at 28s, the wordmark specular sweep at 7.2s, the optional floor gleam at 9.6s, and the rAF telemetry counter.

C. THE LAYER STACK, back to front. html and body are #050505 at z-index auto. .backdrop is fixed inset:0 z-index:0 pointer-events:none overflow:hidden. Inside .backdrop: .stage-field z-index:0, .stage-grid z-index:1, .stage-noise svg z-index:2. .page is position:relative z-index:10 min-height:100dvh display:grid grid-template-rows:auto 1fr auto. header.site-header is z-index:30. main.hero is z-index:20. .wordmark-scene is z-index:20. The H1 .monolith-stack is position:relative z-index:3. The extrusion layers inside the H1 sit in ordered z-index values: .extrude[data-depth="12"] z-index:1 through .extrude[data-depth="1"] z-index:12, .top-face z-index:20, .specular-mask z-index:24, .letter spans within .top-face z-index:25. The reflection .reflection is z-index:1 beneath the wordmark but above the floor glow. .floor-glow is z-index:0. .hero-copy is z-index:25. footer.metrics is z-index:30. .mobile-menu-panel, when open, is fixed z-index:80. .grain-vignette is fixed z-index:100 pointer-events:none, but keep its opacity under 0.18 so text contrast remains readable.

D. TOKEN TABLE. Define tokens in :root for the 1440px desktop default. Colors: --bg:#050505; --bg-2:#090908; --text:#f7f4ea; --text-soft:#d8d4c9; --muted:#98958b; --muted-2:#6f6c64; --accent:#f2f2e8; --accent-dim:#b9b6aa; --line:rgba(255,255,245,0.14); --line-strong:rgba(255,255,245,0.28); --line-soft:rgba(255,255,245,0.09); --black:#000000; --metal-1:#fbfaef; --metal-2:#dedacf; --metal-3:#a4a095; --metal-4:#4d4b46; --metal-5:#1d1c1a; --floor:rgba(242,242,232,0.13); --focus:#fff7c2. Type: --font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-serif:"Instrument Serif", Georgia, serif; --logo:16px; --nav:13px; --eyebrow:12px; --copy:16px; --stat:12.5px; --button:13px; --word:clamp(118px, 17.8vw, 258px); --word-track:-0.095em; --letter-depth:1.8px; --word-line:0.78; --small-caps-track:0.16em. Layout: --header-x:42px; --header-y:28px; --header-h:44px; --page-pad-x:42px; --hero-pad-top:22px; --hero-pad-bottom:36px; --hero-gap:26px; --copy-max:610px; --word-wrap-max:1380px; --footer-x:42px; --footer-y:28px; --metrics-gap:34px. Shapes: --radius-pill:999px; --radius-soft:14px; --button-h:40px; --nav-h:38px; --chip-h:30px; --focus-w:2px; --focus-offset:4px. Wordmark: --extrude-count:12; --extrude-x:3.8px; --extrude-y:4.4px; --top-shadow:0 1px 0 rgba(255,255,255,0.42), 0 18px 40px rgba(0,0,0,0.66); --body-shadow:0 34px 80px rgba(0,0,0,0.62); --reflection-y:21px; --reflection-blur:8px; --reflection-opacity:0.28; --reflection-height:0.72; --specular-w:32%; --specular-o:0.42. Motion: --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-metal:cubic-bezier(0.65,0,0.35,1); --enter-dur:1.05s; --soft-dur:1.2s; --letter-dur:0.92s; --sweep-dur:7.2s; --grid-dur:28s; --gleam-dur:9.6s.

E. THE COMPOSITION. First CSS rule must be exactly html, body { background: #050505 !important; color: #f7f4ea; } and the body tag must include style="background:#050505;color:#f7f4ea" to prevent a white flash. Body uses margin:0; min-width:320px; font-family:var(--font-sans); text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased. Page grid: .page { position:relative; z-index:10; min-height:100dvh; display:grid; grid-template-rows:auto minmax(0, 1fr) auto; } Desktop lock at >=901px sets html, body { height:100%; overflow:hidden; } and .page { height:100dvh; overflow:hidden; }. Header build order: create header.site-header with display:flex; align-items:center; justify-content:space-between; height:var(--header-h); padding:var(--header-y) var(--header-x) 0; gap:24px. The brand is an anchor with accessible name MONOLITH home and text MONOLITH, font-size var(--logo), font-weight 650, letter-spacing:0.18em, line-height:1, color:var(--text), text-decoration:none. Before the brand text include a 20px by 20px SVG mark: a vertical stone slab rectangle with x=5 y=2 width=10 height=16 rx=1.5 fill none stroke currentColor stroke-width=1.6 and a diagonal highlight path M8 15 L14 4 opacity 0.55. Header nav contains exactly three links: Work, Foundry, Contact. Each link is a pill built to the UI language below. Header right CTA is an anchor with text Request specimen. Mobile burger appears only at <=900px and is a button with aria-label="Open navigation", aria-expanded toggled, and three 16px bars.

Hero build order: main.hero is display:grid; place-items:center; min-width:0; padding:var(--hero-pad-top) var(--page-pad-x) var(--hero-pad-bottom); overflow:visible. Inside it, .hero-inner is width:100%; max-width:var(--word-wrap-max); display:grid; justify-items:center; align-content:center; gap:var(--hero-gap); transform:translateY(-1.2vh) on desktop. Place a small chip above the wordmark: text VARIABLE TYPE SYSTEMS / 2026, height var(--chip-h), padding 0 13px, border 1px solid var(--line), border-radius var(--radius-pill), font-size var(--eyebrow), letter-spacing var(--small-caps-track), color var(--muted), background rgba(255,255,245,0.035). The H1 is visually the giant word only and contains the accessible text MONOLITH once. Structure: h1.monolith-title aria-label="MONOLITH" with .monolith-stack aria-hidden="true" containing exactly 13 visible stacked copies: 12 extrusion spans with class extrude and data-depth values 12 down to 1, then one .top-face. Every copy spells MONOLITH with exactly eight child spans class letter containing M, O, N, O, L, I, T, H. Do not add another h1 or duplicate readable h1 text outside aria-label. H1 CSS: margin:0; width:100%; max-width:var(--word-wrap-max); font-size:var(--word); line-height:var(--word-line); letter-spacing:var(--word-track); font-weight:900; font-family:var(--font-sans); text-align:center; text-transform:uppercase; white-space:nowrap; user-select:none. .monolith-stack is position:relative; display:block; min-height:0.78em; perspective:900px; transform-style:preserve-3d. Extrude layers are position:absolute; inset:0; display:flex; justify-content:center; color set per depth; transform:translate(calc(var(--depth) * var(--extrude-x)), calc(var(--depth) * var(--extrude-y))); text-shadow:0 1px 0 rgba(255,255,255,0.05); filter:brightness(var(--b)). Set depth colors explicitly from nearest to farthest: depth 1 #c9c5b9, 2 #aaa69b, 3 #8e8a80, 4 #747066, 5 #5d5a52, 6 #484640, 7 #37352f, 8 #292721, 9 #201e19, 10 #181611, 11 #11100d, 12 #0b0a08. .top-face is position:relative; display:flex; justify-content:center; color:transparent; background:linear-gradient(180deg, #fffdf2 0%, #e4e0d4 24%, #9d998d 54%, #4d4a43 100%); -webkit-background-clip:text; background-clip:text; text-shadow:var(--top-shadow). .top-face::after is the dark lower bevel: content:""; position:absolute; left:0; right:0; bottom:-0.05em; height:0.14em; background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.52)); -webkit-background-clip:text; background-clip:text; color:transparent; pointer-events:none. .specular-mask is an absolutely positioned child overlay inset:-0.08em -0.04em 0; pointer-events:none; mix-blend-mode:screen; background:linear-gradient(115deg, transparent 0%, transparent 39%, rgba(255,255,255,0.0) 43%, rgba(255,255,255,var(--specular-o)) 50%, rgba(255,255,255,0.10) 54%, transparent 61%, transparent 100%); transform:translateX(-72%); clip-path:inset(0 0 0 0); -webkit-background-clip:text; background-clip:text; color:transparent; animation:specular-sweep var(--sweep-dur) var(--ease-metal) infinite; animation-delay:1.2s. Because background-clip:text cannot clip an empty overlay in all browsers, duplicate the MONOLITH letters inside .specular-mask with aria-hidden="true" and identical letter spans.

Reflection build order: place .reflection immediately after the H1 in .wordmark-scene. It duplicates the top-face MONOLITH only, aria-hidden="true", font settings identical to h1, transform:translateY(var(--reflection-y)) scaleY(calc(-1 * var(--reflection-height))); transform-origin:50% 0%; filter:blur(var(--reflection-blur)); opacity:var(--reflection-opacity); color:transparent; background:linear-gradient(180deg, rgba(255,255,245,0.28) 0%, rgba(255,255,245,0.12) 28%, rgba(255,255,245,0.035) 58%, transparent 100%); -webkit-background-clip:text; background-clip:text; mask-image:linear-gradient(180deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.26) 36%, transparent 78%); pointer-events:none. Add .floor-glow under it: width:min(82vw, 1120px); height:120px; margin-top:-42px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(242,242,232,0.16) 0%, rgba(242,242,232,0.058) 32%, transparent 72%); filter:blur(18px); animation:floor-gleam var(--gleam-dur) ease-in-out infinite. Hero copy below the scene is exactly: Custom lettering for interfaces that need mass, silence, and impossible polish. It is a p.hero-copy with margin:0; max-width:var(--copy-max); color:var(--muted); font-size:var(--copy); line-height:1.65; text-align:center; letter-spacing:-0.012em. Footer metrics: footer.metrics contains nav-free small facts only, exactly three items in a ul: 01 Variable wordmarks, 02 Optical correction, 03 UI type systems. Footer CSS: padding:0 var(--footer-x) var(--footer-y); display:flex; justify-content:center; align-items:center. The ul is display:flex; gap:var(--metrics-gap); list-style:none; padding:0; margin:0; flex-wrap:wrap; justify-content:center. Each li uses font-size var(--stat), letter-spacing:0.13em, text-transform:uppercase, color:var(--muted-2). The numeric prefix is a span color var(--accent-dim), opacity 0.82, margin-right:8px.

F. THE UI LANGUAGE. All clickable header pills share .pill. CSS: height:var(--nav-h); display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,245,0.12); color:var(--text-soft); text-decoration:none; font-size:var(--nav); font-weight:560; letter-spacing:-0.01em; line-height:1; background:linear-gradient(180deg, rgba(255,255,245,0.055) 0%, rgba(255,255,245,0.018) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 34px rgba(0,0,0,0.24); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); position:relative; overflow:hidden; transition:transform 240ms var(--ease-out), border-color 240ms var(--ease-out), color 240ms var(--ease-out), background 240ms var(--ease-out). .pill::before is a 115deg shine: content:""; position:absolute; inset:-1px; background:linear-gradient(115deg, transparent 0%, transparent 34%, rgba(255,255,255,0.16) 50%, transparent 66%, transparent 100%); transform:translateX(-130%); transition:transform 620ms var(--ease-out); pointer-events:none. .pill:hover transforms translateY(-1px), border-color rgba(255,255,245,0.30), color var(--text), background linear-gradient(180deg, rgba(255,255,245,0.095) 0%, rgba(255,255,245,0.032) 100%). .pill:hover::before transform:translateX(130%). .pill:active transform:translateY(0). The CTA .pill--primary uses border-color rgba(242,242,232,0.32), color #11110f, background linear-gradient(180deg, #fbfaef 0%, #d8d4c8 100%), box-shadow inset 0 1px 0 rgba(255,255,255,0.72), 0 16px 46px rgba(242,242,232,0.16); hover background linear-gradient(180deg, #ffffff 0%, #e6e2d6 100%). Focus: every a and button has :focus-visible outline var(--focus-w) solid var(--focus); outline-offset:var(--focus-offset); border-radius:var(--radius-pill). The chip uses the same material but never appears clickable. The mobile menu panel uses a dark glass sheet: background rgba(5,5,5,0.88); backdrop-filter blur(22px); border-top 1px solid var(--line); links height 56px, font-size 22px, letter-spacing -0.03em.

G. MOTION. Resting opacity is always 1 on .appear elements; animations define from states only, and the page remains readable if animation fails. Apply .appear plus a modifier to each animated element. Stagger table: brand mark and word .appear--scale delay 0.06s; nav Work .appear--soft delay 0.14s; nav Foundry .appear--soft delay 0.20s; nav Contact .appear--soft delay 0.26s; header CTA .appear--scale delay 0.32s; chip .appear--pop delay 0.24s; extrusion group .appear--depth delay 0.30s; top-face letter M in-letter delay 0.44s; O delay 0.49s; N delay 0.54s; second O delay 0.59s; L delay 0.64s; I delay 0.69s; T delay 0.74s; H delay 0.79s; specular sweep begins delay 1.20s; reflection .appear--reflect delay 0.88s; hero copy .appear--soft delay 1.02s; metric 01 .appear--stat delay 1.10s; metric 02 delay 1.22s; metric 03 delay 1.34s. Keyframes: in-scale from opacity:0 transform:scale(0.88) to opacity:1 transform:none. in-soft from opacity:0 transform:translateY(14px) filter:blur(5px) to opacity:1 transform:none filter:blur(0). in-pop from 0% opacity:0 transform:scale(0.92), 68% opacity:1 transform:scale(1.035), 100% opacity:1 transform:scale(1). in-depth from opacity:0 transform:translateY(22px) rotateX(12deg) scale(0.985) to opacity:1 transform:none. in-letter from opacity:0 transform:translateY(0.42em) rotateX(72deg) scaleY(0.82); transform-origin:50% 100%; to opacity:1 transform:none. in-reflect from opacity:0 transform:translateY(calc(var(--reflection-y) + 22px)) scaleY(calc(-1 * var(--reflection-height))) to opacity:var(--reflection-opacity) transform:translateY(var(--reflection-y)) scaleY(calc(-1 * var(--reflection-height))). in-stat from opacity:0 transform:translateY(16px) to opacity:1 transform:none. specular-sweep keeps opacity 1 and animates transform from translateX(-76%) to translateX(76%) at 56%, then holds translateX(76%) until 100% so the shine pauses after each pass. grid-drift moves the grid by exactly 96px on both axes. floor-gleam animates opacity 0.52 at 0%, 0.78 at 50%, 0.52 at 100% and scaleX 0.96 to 1.04 to 0.96. Each animation uses animation-fill-mode:both and animation-timing-function:var(--ease-out). On animationend for each .appear element, add .is-in and set inline animation none only for that target through a class rule: .appear.is-in { opacity:1; transform:none; filter:none; clip-path:none; animation:none; }.

H. RESPONSIVE TABLE. Defaults above are for 1440x900. For width >= 1600px set --header-x:56px; --header-y:34px; --logo:17px; --nav:14px; --nav-h:40px; --button:14px; --word:clamp(150px, 17.6vw, 316px); --copy:17px; --copy-max:660px; --word-wrap-max:1660px; --hero-gap:30px; --footer-x:56px; --footer-y:32px; --metrics-gap:42px; --extrude-x:4.4px; --extrude-y:5.0px; --reflection-blur:10px. For width >= 1920px set --header-x:72px; --header-y:38px; --logo:18px; --nav:14.5px; --nav-h:42px; --word:clamp(176px, 17.2vw, 360px); --copy:18px; --copy-max:710px; --word-wrap-max:1840px; --hero-gap:34px; --footer-y:36px; --metrics-gap:52px; --extrude-x:4.8px; --extrude-y:5.4px; --reflection-y:24px; --reflection-blur:11px. For 1280px to 1599px set --header-x:42px; --word:clamp(112px, 17.4vw, 238px); --copy-max:590px; --hero-gap:24px; --extrude-x:3.6px; --extrude-y:4.2px. For 901px to 1279px set --header-x:30px; --header-y:22px; --page-pad-x:30px; --footer-x:30px; --footer-y:22px; --nav:12.5px; --nav-h:36px; --button:12.5px; --logo:15px; --word:clamp(86px, 16.4vw, 188px); --copy:15px; --copy-max:540px; --hero-gap:20px; --metrics-gap:24px; --extrude-x:2.9px; --extrude-y:3.5px; --reflection-y:16px; --reflection-blur:7px. For desktop max-height <= 850px and width >= 901px set --header-y:20px; --hero-pad-bottom:22px; --hero-gap:18px; --word:clamp(82px, 15.8vw, 210px); --copy:14.5px; --footer-y:18px; .hero-inner transform:translateY(-0.4vh). For desktop max-height <= 720px and width >= 901px set --header-y:16px; --header-h:38px; --hero-pad-top:8px; --hero-pad-bottom:14px; --hero-gap:12px; --word:clamp(72px, 14.2vw, 174px); --copy:13.5px; --chip-h:26px; --eyebrow:11px; --footer-y:12px; --stat:11.5px; .reflection opacity:0.20; .floor-glow height:84px. For width <= 900px remove the desktop height lock: html, body { min-height:100%; overflow-x:hidden; } .page { min-height:100dvh; height:auto; overflow:hidden; grid-template-rows:auto minmax(560px, 1fr) auto; } tokens: --header-x:22px; --header-y:20px; --page-pad-x:22px; --footer-x:22px; --footer-y:24px; --header-h:42px; --logo:15px; --word:clamp(54px, 15.5vw, 118px); --word-track:-0.075em; --copy:15px; --copy-max:520px; --hero-pad-top:46px; --hero-pad-bottom:44px; --hero-gap:20px; --metrics-gap:18px; --extrude-x:2.1px; --extrude-y:2.7px; --reflection-y:13px; --reflection-blur:6px; --reflection-opacity:0.22. Hide desktop nav and desktop CTA, show burger. Mobile menu: closed visibility:hidden opacity:0 transform:translateY(-8px); open visibility:visible opacity:1 transform:none; transition 220ms var(--ease-out). For width <= 560px set --header-x:18px; --page-pad-x:18px; --word:clamp(43px, 14.8vw, 78px); --copy:14.5px; --copy-max:340px; --hero-pad-top:54px; --hero-pad-bottom:38px; --hero-gap:18px; --chip-h:28px; --eyebrow:10.5px; --stat:11px; --metrics-gap:13px; --extrude-x:1.35px; --extrude-y:1.8px; --reflection-y:10px; --reflection-blur:4px; .metrics ul flex-direction:column; align-items:center. For width <= 400px set --word:clamp(38px, 14.2vw, 58px); --word-track:-0.062em; --copy-max:310px; --page-pad-x:16px; --header-x:16px; --extrude-x:1.05px; --extrude-y:1.45px. At all widths ensure body, .page, header, main, footer, and .monolith-title use max-width:100%; box-sizing:border-box; and no element exceeds 100vw.

I. FAILURE GUARDS. The .appear class must have opacity:1 as its resting declaration before animation names are applied; animation keyframes handle initial opacity so a failed animation never leaves content invisible. Add .no-motion class only if needed by script after fallback; do not depend on it for readability. JS fallback: after two requestAnimationFrame callbacks, inspect every .appear element with el.getAnimations({ subtree:false }); if none of its animations has playState "running" or "finished", add .is-in to every .appear and add .is-in to every .letter. If an element fires animationend, add .is-in to that element. If the browser lacks getAnimations, run the same .is-in fallback after the two rAFs. prefers-reduced-motion: reduce must set *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } and force .appear, .appear.is-in, .letter, .reflection, .specular-mask, .stage-grid, .floor-glow { opacity:1; transform:none; filter:none; clip-path:none; } except .reflection must retain transform:translateY(var(--reflection-y)) scaleY(calc(-1 * var(--reflection-height))) and opacity:var(--reflection-opacity) so it remains visually correct. In reduced motion, hide the moving shine by setting .specular-mask { display:none; }. Maintain contrast: body text color #f7f4ea on #050505 and muted copy #98958b on #050505 exceed 4.5:1 for paragraph-sized text; do not lower opacity on text below 0.86. Add visible focus rings for all controls. Add a window error listener before running animation code and push String(event.message || event.error || "unknown error") to window.__DEMO__.errors. No console.log, console.warn, or console.error in the happy path.

J. THE EXACT JS. Keep the script as a small IIFE at the end of body. It must do only telemetry, animation fallback, and mobile menu behavior. First line inside the script sets window.__DEMO__ = { name: "monolith-type", ready: false, frames: 0, effects: [], errors: [] }; then push implemented effect names exactly once in this order: "css-extruded-wordmark", "specular-sweep", "floor-reflection", "procedural-css-stage", "letter-cascade", "mobile-menu". Add the error listener immediately after creating the object. Start a requestAnimationFrame loop named tick that increments window.__DEMO__.frames once per animation frame; do not perform DOM reads inside the loop. After the first tick has executed and the browser has had one paint opportunity, set window.__DEMO__.ready = true; use requestAnimationFrame(function(){ window.__DEMO__.ready = true; }) from inside the first tick or the immediately following scheduled frame. Cache document.documentElement, the menu button, the mobile panel, and all nav links. Burger behavior: clicking the burger toggles class menu-open on documentElement, updates aria-expanded to "true" or "false", updates aria-label to "Close navigation" or "Open navigation", and sets panel aria-hidden to the inverse. Escape closes the menu. Clicking any link inside the mobile panel closes the menu. Resizing to width > 900 closes the menu. Closing means remove menu-open, button aria-expanded="false", button aria-label="Open navigation", panel aria-hidden="true". Animation behavior: add animationend listeners to every .appear and every .letter; on end add .is-in. Run the two-rAF fallback described above. The script must not create elements, must not fetch, must not use timers, must not write to localStorage, and must not log. Guard every optional element check so missing elements cannot throw.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Nebula

- Slug: `nebula`
- Page: https://landingpageprompts.com/prompts/nebula
- Effect: Precomputed volumetric nebula drift with 240 depth-sorted stars and restrained observatory copy.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 52,834; total with repair and cross-check: 97,543
- Verification: 20/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - A headless browser at 1440x900 finds document.documentElement.scrollHeight <= 900 and document.documentElement.scrollWidth <= 1440.
  - The page contains exactly one h1, semantic header/nav/main/footer elements, and the exact visible strings “NEBULA”, “IN THE DARK”, “Explore the signal”, and “Read our mission”.
  - After load, window.__DEMO__.name is “nebula”, window.__DEMO__.ready is true, and window.__DEMO__.effects contains “precomputed-nebula”, “depth-stars”, and “camera-drift”.
  - At 390x844, 768x1024, 1440x900, and 1920x1080, document.documentElement.scrollWidth equals or is less than the viewport width and all visible controls have accessible names.
  - With prefers-reduced-motion: reduce, the canvas remains painted, the hero text has computed opacity 1, and window.__DEMO__.frames does not increase after the initial static paint.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT

Create one file named index.html containing a complete, framework-free landing page for a fictional space-observatory company named “NEBULA”. Set the document title to “NEBULA — Deep Space Observatory”, set the document language to en, and include <meta name="viewport" content="width=device-width, initial-scale=1">. Build with semantic <header>, <nav>, <main>, and <footer> elements. Include exactly one <h1> and no additional h1 elements.

The page is a single-viewport cinematic observatory landing page. It must present a precomputed five-layer canvas nebula, 240 canvas stars, a centred dark readability scrim, compact navigation, one primary call to action, and a small telemetry footer. The visual target is deep black-indigo space with a violet cloud core, cyan lower-left fringe, warm rose right fringe, and crisp white-violet stars.

At widths of 901px and above, set html, body, and the page shell to width:100%; height:100dvh; min-height:100dvh; overflow:hidden. Do not permit document scrolling. At widths of 900px and below, allow vertical document scrolling and prevent horizontal overflow. The page must render without errors at 390x844, 768x1024, 1440x900, and 1920x1080.

Do NOT build a dashboard, article, pricing page, form, modal, carousel, secondary page, login screen, account system, video background, image gallery, loading screen, onboarding sequence, cookie banner, external feed, or multi-section scrolling site. Do NOT use React, Tailwind, GSAP, Three.js, Lottie, SVG filters, CSS animation filters, remote images, external media, base64 image data, third-party scripts, or third-party stylesheets. The only permitted network request is an optional Google Fonts stylesheet; use Georgia as the required system fallback if it is unavailable. Do not generate clouds or stars through per-pixel work in the requestAnimationFrame loop.

B. THE BACKDROP

Use one fixed full-viewport <canvas id="space" aria-hidden="true"> as the visual backdrop. Render the nebula and stars in that single visible canvas. Do not expose any decorative visual as a focus target or duplicate it as DOM markup.

Create five offscreen canvas layers at startup. Use a seeded value-noise generator built from a 256-entry seeded permutation table and deterministic integer hash arithmetic. Each cloud layer must be generated once into its own OffscreenCanvas when supported, otherwise into a detached regular canvas. Each layer uses a logical canvas resolution equal to viewportWidth divided by 2 and viewportHeight divided by 2, clamped to a maximum width of 960 and maximum height of 540. Set each visible canvas backing-store resolution to viewportWidth multiplied by devicePixelRatio and viewportHeight multiplied by devicePixelRatio, capped at a pixel ratio of 2.

Generate the five cloud layers from this fixed layer set:

1. Core violet: 2,048x1,152 offscreen canvas at 0.5 viewport scale, six octaves, base frequency 0.0042, amplitude 0.31, colour stops rgba(55,27,115,0), rgba(124,78,226,0.34), rgba(190,157,255,0.42), rgba(49,18,91,0).
2. Lower cyan veil: 2,048x1,152 offscreen canvas at 0.5 viewport scale, five octaves, base frequency 0.0031, amplitude 0.24, colour stops rgba(17,55,91,0), rgba(30,164,192,0.22), rgba(117,235,230,0.28), rgba(9,39,72,0).
3. Right rose cloud: 2,048x1,152 offscreen canvas at 0.5 viewport scale, five octaves, base frequency 0.0028, amplitude 0.22, colour stops rgba(94,27,70,0), rgba(224,91,138,0.19), rgba(255,182,191,0.22), rgba(75,18,62,0).
4. Upper indigo fog: 2,048x1,152 offscreen canvas at 0.5 viewport scale, four octaves, base frequency 0.0022, amplitude 0.19, colour stops rgba(18,22,68,0), rgba(57,63,154,0.20), rgba(126,122,226,0.18), rgba(9,14,43,0).
5. Dark central dust: 2,048x1,152 offscreen canvas at 0.5 viewport scale, four octaves, base frequency 0.0036, amplitude 0.27, colour stops rgba(4,5,19,0), rgba(5,7,24,0.38), rgba(1,3,13,0.44), rgba(0,0,0,0).

The 2,048x1,152 values describe the maximum precompute texture coordinate system. Actual texture dimensions are viewport-scaled by 0.5 and clamped by the maximum dimensions above. Do not recompute noise when the viewport changes; regenerate all five layers only on a debounced resize of 180ms, and only when the rendered canvas dimensions change.

Draw the backdrop in this fixed order per frame: fill the full visible canvas with #03040c; draw the five cloud textures using source-over with globalAlpha values 0.94, 0.76, 0.68, 0.74, and 0.86; draw the star field; draw the central CSS scrim over the complete canvas; draw a 1px inner border. The cloud drift periods are 74s, 91s, 113s, 137s, and 157s. Each layer receives a fixed sinusoidal translation of no more than 18px horizontally and 12px vertically, plus a scale from 1.00 to 1.025. Translation is derived from elapsed milliseconds and is applied with ctx.setTransform or ctx.translate. Do not alter cloud pixels, filter state, or shadow state during the loop.

Generate exactly 240 star specks. Split them into 3 depth groups: 72 near stars with radius 0.7 to 1.3px and brightness 0.62 to 0.92; 112 middle stars with radius 0.45 to 0.9px and brightness 0.35 to 0.70; 56 far stars with radius 0.25 to 0.55px and brightness 0.20 to 0.48. Seed every position, radius, brightness, and drift phase deterministically. Draw the far group first, then the middle group, then the near group. Apply a near-group horizontal drift of 4px over 62s, a middle-group drift of 2px over 88s, and a far-group drift of 1px over 131s. Draw stars as filled circles with no shadowBlur and no ctx.filter. A star’s twinkle is opacity-only and uses its seeded phase with a 3.8s, 5.1s, or 7.4s period. The total per-frame work must remain below 12ms on a 1440x900 headless viewport. The loop may perform one canvas clear, one background fill, five precomputed drawImage calls, one 240-item star loop, and one scrim draw. Do not allocate arrays, objects, gradients, or strings inside the loop.

C. THE LAYER STACK

Build the stacking context on the page shell with position:relative and isolation:isolate. Use these z-index values from back to front:

- Backdrop canvas: z-index:0.
- Backdrop vignette: z-index:1, pointer-events:none.
- Readability scrim: z-index:2, pointer-events:none.
- Content scrim accent: z-index:3, pointer-events:none.
- Header: z-index:10.
- Main hero: z-index:20.
- Footer: z-index:30.
- Focus ring treatment: z-index:40.
- Reduced-motion notice: z-index:50, display:none by default.

The canvas must use position:fixed; inset:0; width:100%; height:100%; display:block. The page shell must have no transform, filter, or backdrop-filter that creates an unintended containing block for fixed positioning. Do not add a second canvas.

D. TOKEN TABLE

Define these exact custom properties on :root and use them consistently:

--ink: #03040c
--ink-raised: #0a0b1c
--text: #f5f3ff
--text-soft: #c6c1df
--text-muted: #918ba9
--accent: #a78bfa
--accent-bright: #ddd6fe
--accent-deep: #6d4bd1
--cyan: #75ebe6
--rose: #ffb6bf
--line: rgba(245,243,255,0.18)
--line-strong: rgba(221,214,254,0.38)
--scrim: rgba(3,4,12,0.56)
--scrim-soft: rgba(3,4,12,0.28)
--glass: rgba(12,10,31,0.48)
--button-shadow: rgba(0,0,0,0.32)
--font-display: Georgia, 'Times New Roman', serif
--font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
--page-padding-x: 40px
--page-padding-top: 26px
--page-padding-bottom: 22px
--header-height: 42px
--nav-gap: 26px
--hero-max-width: 920px
--hero-copy-width: 720px
--eyebrow-size: 11px
--eyebrow-tracking: 0.24em
--title-size: clamp(58px, 7.2vw, 122px)
--title-line: 0.88
--title-weight: 400
--title-spacing: -0.065em
--lede-size: clamp(16px, 1.35vw, 21px)
--lede-line: 1.55
--lede-width: 590px
--button-height: 48px
--button-padding-x: 24px
--button-radius: 999px
--pill-height: 30px
--pill-radius: 999px
--footer-gap: 18px
--footer-size: 10px
--footer-tracking: 0.16em
--scrim-center: rgba(3,4,12,0.70)
--scrim-edge: rgba(3,4,12,0)
--ease-ui: cubic-bezier(0.22, 1, 0.36, 1)
--ease-drift: linear

Do not introduce undocumented sizing or colour literals in CSS. The canvas paint may use the fixed colour literals specified in section B.

E. THE COMPOSITION

Header is positioned absolute at top:0, left:0, right:0, height:var(--header-height), padding:var(--page-padding-top) var(--page-padding-x) 0, display:flex, align-items:center, justify-content:space-between. The brand is an anchor with accessible name “NEBULA home” and exact visible text “NEBULA”. Use the display font at 17px, letter-spacing:0.22em, colour:var(--text). Navigation contains exactly three links in this order: “Mission”, “Signals”, and “Contact”. The nav display:flex; gap:var(--nav-gap); align-items:center. Each link is colour:var(--text-soft), font-size:12px, letter-spacing:0.08em, text-decoration:none. Each link has a 4px focus-visible ring.

Main is a full-viewport grid with min-height:100dvh, display:grid; place-items:center; padding:112px var(--page-padding-x) 92px; text-align:center. The hero is width:min(var(--hero-max-width), 100%); margin-inline:auto. The hero contains an eyebrow pill reading “DEEP SPACE OBSERVATORY / 01”, a single h1 with the exact two-line markup “NEBULA<br><span>IN THE DARK</span>”, a lede reading “We map the invisible structures between stars, turning quiet photons into a clearer view of the universe.”, and two controls. The controls are an anchor with visible text “Explore the signal” and a secondary anchor with visible text “Read our mission”. The title span uses colour:var(--accent-bright). The h1 uses the display font, font-size:var(--title-size), line-height:var(--title-line), font-weight:var(--title-weight), letter-spacing:var(--title-spacing), margin:18px 0 24px, text-wrap:balance. The lede uses width:min(var(--lede-width), 100%), margin:0 auto 30px, colour:var(--text-soft), font-size:var(--lede-size), line-height:var(--lede-line), text-wrap:balance. Controls use display:flex; justify-content:center; gap:12px; flex-wrap:wrap.

Footer is absolute at bottom:0, left:0, right:0, padding:0 var(--page-padding-x) var(--page-padding-bottom), display:flex; align-items:center; justify-content:space-between; gap:var(--footer-gap); font-size:var(--footer-size), letter-spacing:var(--footer-tracking), text-transform:uppercase, colour:var(--text-muted). The left text is “NEBULA / OBSERVATORY SYSTEMS”. The right text is “LIVE FIELD WINDOW  ·  23° 41′ N”. A centred footer rule is not required. Do not place any other visible copy in the viewport.

F. THE UI LANGUAGE

The primary anchor has height:var(--button-height), padding:0 var(--button-padding-x), display:inline-flex, align-items:center, justify-content:center, border-radius:var(--button-radius), background:linear-gradient(135deg, #c4b5fd 0%, var(--accent) 52%, #7c5ce2 100%), color:#100a22, font-size:12px, font-weight:700, letter-spacing:0.06em, text-decoration:none, box-shadow:0 10px 28px var(--button-shadow). Hover state changes transform:translateY(-2px), background:linear-gradient(135deg, #ede9fe 0%, #c4b5fd 52%, #a78bfa 100%), and box-shadow:0 14px 34px rgba(167,139,250,0.28). The secondary anchor has the same height, padding, radius, font-size, letter-spacing, and border treatment, with border:1px solid var(--line-strong), background:rgba(12,10,31,0.36), color:var(--text). Hover state changes background:rgba(167,139,250,0.14), border-color:var(--accent), and transform:translateY(-2px).

The eyebrow pill is display:inline-flex, align-items:center, height:var(--pill-height), padding:0 13px, border:1px solid var(--line), border-radius:var(--pill-radius), background:var(--glass), color:var(--accent-bright), font-size:var(--eyebrow-size), font-weight:700, letter-spacing:var(--eyebrow-tracking), line-height:1. Hover is not required because the pill is not a control. Every anchor must have a visible :focus-visible ring using outline:3px solid var(--accent-bright); outline-offset:4px. Do not remove native focus visibility.

G. MOTION

Use named CSS keyframes exactly as follows:

@keyframes nebulaRise {
  from { opacity:0; transform:translate3d(0,18px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes nebulaFade {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes signalPulse {
  0%,100% { transform:scale(1); opacity:0.88; }
  50% { transform:scale(1.04); opacity:1; }
}

Apply nebulaFade with duration:1200ms, fill-mode:both, to the header, footer, and eyebrow. Apply nebulaRise with duration:1100ms, fill-mode:both, to the h1, lede, primary anchor, and secondary anchor. Use these delays:

header -> nebulaFade -> 80ms
footer -> nebulaFade -> 420ms
eyebrow -> nebulaFade -> 180ms
h1 -> nebulaRise -> 300ms
lede -> nebulaRise -> 460ms
primary anchor -> nebulaRise -> 620ms
secondary anchor -> nebulaRise -> 700ms

Do not animate layout properties. Do not animate opacity below 0.2 after entrance completion. The canvas drift is controlled by JavaScript using elapsed time and transform-equivalent canvas translation, not CSS keyframes. On every frame, increment window.__DEMO__.frames exactly once while the rAF loop is active. Push these effect names into window.__DEMO__.effects in this order: "precomputed-nebula", "depth-stars", "camera-drift". Do not push CSS animation names.

H. RESPONSIVE TABLE

Apply these exact overrides:

Base, 901px and above:
--page-padding-x:40px
--page-padding-top:26px
--header-height:42px
--nav-gap:26px
--title-size:clamp(58px,7.2vw,122px)
--lede-size:clamp(16px,1.35vw,21px)
--button-height:48px
--footer-size:10px

At max-width:900px:
--page-padding-x:24px
--page-padding-top:20px
--header-height:38px
--nav-gap:14px
--title-size:clamp(52px,11vw,88px)
--lede-size:17px
--button-height:46px
--footer-size:9px
Set main padding:104px var(--page-padding-x) 96px. Keep vertical document scrolling. Set header position:relative, footer position:relative, main min-height:auto. The page shell min-height:100dvh.

At max-width:560px:
--page-padding-x:18px
--page-padding-top:16px
--header-height:34px
--nav-gap:9px
--title-size:clamp(46px,14vw,68px)
--lede-size:16px
--lede-line:1.48
--button-height:44px
--button-padding-x:19px
--footer-size:8px
Set header flex-wrap:wrap; row-gap:10px. Set nav gap:var(--nav-gap). Set main padding:94px var(--page-padding-x) 74px. Set footer flex-direction:column; align-items:flex-start; gap:8px.

At max-height:720px and min-width:901px:
--page-padding-top:18px
--page-padding-bottom:16px
--title-size:clamp(50px,6.4vw,92px)
--lede-size:16px
--button-height:42px
Set main padding-top:92px; padding-bottom:74px. Set footer padding-bottom:var(--page-padding-bottom).

At max-height:600px and min-width:901px:
--page-padding-top:14px
--page-padding-bottom:12px
--title-size:clamp(44px,5.6vw,72px)
--lede-size:15px
--lede-line:1.4
--button-height:38px
--button-padding-x:18px
Set main padding-top:72px; padding-bottom:58px. Set h1 margin-top:12px; margin-bottom:16px. Set lede margin-bottom:18px. Set footer-size:8px.

I. FAILURE GUARDS

Set all entrance elements to opacity:1 as their resting state. Apply entrance animation only with animation-delay and animation-fill-mode:both; after animation completion, the computed opacity must remain 1. If CSS animation is unavailable, content must remain visible. Implement a two-rAF fallback: after the first paint, requestAnimationFrame twice; if the telemetry loop has not incremented frames, start the normal loop from that callback and set ready:true only after the first successful paint. Never leave ready:false after two animation frames.

Inside the prefers-reduced-motion: reduce block, set *, *::before, *::after to animation-duration:0.001ms!important; animation-iteration-count:1!important; transition-duration:0.001ms!important; scroll-behavior:auto!important. Set .hero, header, footer, .eyebrow, h1, .lede, .controls to opacity:1!important; transform:none!important. In JavaScript, detect matchMedia('(prefers-reduced-motion: reduce)').matches. If true, render one static frame with elapsed=0, set ready:true after paint, push all three effect names once, and do not schedule another animation frame. Never omit the stars or nebula in reduced-motion mode.

J. THE EXACT JS

Place this script at the end of body. It must use the existing DOM structure, the canvas id “space”, and no external dependency:

(() => {
  const telemetry = {
    name: 'nebula',
    ready: false,
    frames: 0,
    effects: [],
    errors: []
  };
  window.__DEMO__ = telemetry;

  const canvas = document.getElementById('space');
  const ctx = canvas.getContext('2d', { alpha: false });
  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const TAU = Math.PI * 2;
  const MAX_DPR = 2;
  const textureScale = 0.5;
  const cloudCount = 5;
  const starCount = 240;
  const clouds = [];
  const stars = [];
  const permutation = new Uint8Array(256);
  let seed = 173;
  let width = 0;
  let height = 0;
  let dpr = 1;
  let start = performance.now();
  let raf = 0;
  let resizeTimer = 0;

  function random() {
    seed = (seed * 1664525 + 1013904223) >>> 0;
    return seed / 4294967296;
  }

  function hash(x, y) {
    return permutation[(x & 255) + permutation[y & 255]] / 255;
  }

  function noise(x, y) {
    const xi = Math.floor(x);
    const yi = Math.floor(y);
    const xf = x - xi;
    const yf = y - yi;
    const u = xf * xf * (3 - 2 * xf);
    const v = yf * yf * (3 - 2 * yf);
    const a = hash(xi, yi);
    const b = hash(xi + 1, yi);
    const c = hash(xi, yi + 1);
    const d = hash(xi + 1, yi + 1);
    return (a * (1-u) + b * u) * (1-v) + (c * (1-u) + d * u) * v;
  }

  for (let i = 0; i < 256; i += 1) permutation[i] = i;
  for (let i = 255; i > 0; i -= 1) {
    const j = Math.floor(random() * (i + 1));
    const temp = permutation[i];
    permutation[i] = permutation[j];
    permutation[j] = temp;
  }

  function makeCanvas(w, h) {
    const element = typeof OffscreenCanvas !== 'undefined'
      ? new OffscreenCanvas(w, h)
      : document.createElement('canvas');
    element.width = w;
    element.height = h;
    return element;
  }

  function buildCloud(index) {
    const w = Math.max(1, Math.min(960, Math.round(width * textureScale)));
    const h = Math.max(1, Math.min(540, Math.round(height * textureScale)));
    const layer = makeCanvas(w, h);
    const lc = layer.getContext('2d');
    const image = lc.createImageData(w, h);
    const data = image.data;
    const palettes = [
      [[0,0,0,0],[55,27,115,0],[124,78,226,87],[190,157,255,107],[49,18,91,0]],
      [[0,0,0,0],[17,55,91,0],[30,164,192,56],[117,235,230,71],[9,39,72,0]],
      [[0,0,0,0],[94,27,70,0],[224,91,138,48],[255,182,191,56],[75,18,62,0]],
      [[0,0,0,0],[18,22,68,0],[57,63,154,51],[126,122,226,46],[9,14,43,0]],
      [[0,0,0,0],[4,5,19,0],[5,7,24,97],[1,3,13,112],[0,0,0,0]]
    ];
    const palette = palettes[index];
    const octaves = [6,5,5,4,4][index];
    const base = [0.0042,0.0031,0.0028,0.0022,0.0036][index];
    for (let y = 0; y < h; y += 1) {
      for (let x = 0; x < w; x += 1) {
        let value = 0;
        let amplitude = 1;
        let frequency = base;
        let total = 0;
        for (let octave = 0; octave < octaves; octave += 1) {
          value += noise(x * frequency, y * frequency) * amplitude;
          total += amplitude;
          amplitude *= 0.54;
          frequency *= 2.03;
        }
        value /= total;
        const p = Math.max(0, Math.min(0.999, (value - 0.31) / 0.42));
        const band = p * 4;
        const low = Math.min(3, Math.floor(band));
        const mix = band - low;
        const a = palette[low];
        const b = palette[low + 1];
        const i = (y * w + x) * 4;
        data[i] = a[0] + (b[0] - a[0]) * mix;
        data[i + 1] = a[1] + (b[1] - a[1]) * mix;
        data[i + 2] = a[2] + (b[2] - a[2]) * mix;
        data[i + 3] = a[3] + (b[3] - a[3]) * mix;
      }
    }
    lc.putImageData(image, 0, 0);
    clouds[index] = { layer, period: [74000,91000,113000,137000,157000][index], alpha: [0.94,0.76,0.68,0.74,0.86][index] };
  }

  function buildStars() {
    stars.length = 0;
    for (let i = 0; i < starCount; i += 1) {
      const group = i < 72 ? 0 : i < 184 ? 1 : 2;
      const radius = group === 0 ? 0.7 + random() * 0.6 : group === 1 ? 0.45 + random() * 0.45 : 0.25 + random() * 0.30;
      const brightness = group === 0 ? 0.62 + random() * 0.30 : group === 1 ? 0.35 + random() * 0.35 : 0.20 + random() * 0.28;
      stars.push({ x: random(), y: random(), radius, brightness, group, phase: random() * TAU, period: group === 0 ? 3800 : group === 1 ? 5100 : 7400 });
    }
  }

  function resize() {
    width = Math.max(1, window.innerWidth);
    height = Math.max(1, window.innerHeight);
    dpr = Math.min(MAX_DPR, window.devicePixelRatio || 1);
    canvas.width = Math.round(width * dpr);
    canvas.height = Math.round(height * dpr);
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    clouds.length = 0;
    for (let i = 0; i < cloudCount; i += 1) buildCloud(i);
    buildStars();
  }

  function render(elapsed) {
    const t = reduced ? 0 : elapsed;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    ctx.globalAlpha = 1;
    ctx.fillStyle = '#03040c';
    ctx.fillRect(0, 0, width, height);
    for (let i = 0; i < clouds.length; i += 1) {
      const cloud = clouds[i];
      const phase = t / cloud.period * TAU + i * 0.73;
      const x = Math.sin(phase) * (12 + i * 1.5);
      const y = Math.cos(phase * 0.91) * (7 + i);
      const scale = 1 + (Math.sin(phase * 0.63) * 0.5 + 0.5) * 0.025;
      ctx.save();
      ctx.globalAlpha = cloud.alpha;
      ctx.translate(width / 2 + x, height / 2 + y);
      ctx.scale(scale, scale);
      ctx.drawImage(cloud.layer, -width / 2, -height / 2, width, height);
      ctx.restore();
    }
    for (let i = 0; i < stars.length; i += 1) {
      const star = stars[i];
      const drift = (star.group === 0 ? 4 : star.group === 1 ? 2 : 1) * Math.sin(t / (62000 + star.group * 33000) * TAU + star.phase);
      const twinkle = 0.72 + 0.28 * Math.sin(t / star.period * TAU + star.phase);
      ctx.globalAlpha = star.brightness * twinkle;
      ctx.fillStyle = star.group === 0 ? '#f5f3ff' : star.group === 1 ? '#c4b5fd' : '#75ebe6';
      ctx.beginPath();
      ctx.arc(star.x * width + drift, star.y * height, star.radius, 0, TAU);
      ctx.fill();
    }
    ctx.globalAlpha = 1;
    const scrim = ctx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, Math.max(width, height) * 0.72);
    scrim.addColorStop(0, 'rgba(3,4,12,0.70)');
    scrim.addColorStop(0.48, 'rgba(3,4,12,0.46)');
    scrim.addColorStop(1, 'rgba(3,4,12,0.04)');
    ctx.fillStyle = scrim;
    ctx.fillRect(0, 0, width, height);
    ctx.strokeStyle = 'rgba(245,243,255,0.10)';
    ctx.strokeRect(0.5, 0.5, width - 1, height - 1);
  }

  function loop(now) {
    telemetry.frames += 1;
    render(now - start);
    if (!reduced) raf = requestAnimationFrame(loop);
  }

  window.addEventListener('error', event => {
    telemetry.errors.push(String(event.message || 'window error'));
  });

  window.addEventListener('resize', () => {
    window.clearTimeout(resizeTimer);
    resizeTimer = window.setTimeout(resize, 180);
  });

  resize();
  start = performance.now();
  render(0);
  telemetry.effects.push('precomputed-nebula', 'depth-stars', 'camera-drift');
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      telemetry.ready = true;
      if (!reduced) loop(start);
    });
  });
})();

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Prism

- Slug: `prism`
- Page: https://landingpageprompts.com/prompts/prism
- Effect: A white beam enters an SVG triangular prism and fans into seven breathing spectrum wedges.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 46,858; total with repair and cross-check: 116,847
- Verification: 20/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - window.__DEMO__.ready === true after the load event and two animation frames have elapsed.
  - window.__DEMO__.effects contains exactly 'canvas-grain', 'beam-travel', 'fan-breathe', and 'prism-glow'.
  - The document contains exactly one h1, and header, nav, main, and footer elements all exist.
  - At 1440x900 and 390x844 viewport widths, document.documentElement.scrollWidth is <= window.innerWidth (no horizontal overflow).
  - After 1.2 seconds of runtime at 1440x900, window.__DEMO__.frames is >= 20 and window.__DEMO__.errors.length === 0.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. BUILD TARGET
Deliverable is exactly one file: index.html. It is a complete, valid, standalone HTML5 document. No build step, no bundler, no framework. Document title is literally: PRISM — Precision Dispersion Optics. The html element carries lang="en". The viewport meta is: width=device-width, initial-scale=1. The single-viewport rule: at min-width 901px, html and body both receive height:100dvh; overflow:hidden; margin:0. At max-width 900px, body receives min-height:100dvh; overflow-y:auto; overflow-x:hidden. The page is a single-viewport cinematic landing page for PRISM, an optics company. The scene: a thin white beam enters a triangular glass prism from the left and disperses on the right into seven spectrum wedges. The copy block sits to the left of the prism; the hero is NOT centred. Do NOT build: scroll-snap sections, a second scroll viewport, centred hero copy, any <img>, <video>, <picture>, <iframe>, <object>, base64 photo blobs, remote image URLs, third-party CDN assets, CSS @import, GSAP, Three.js, Lottie, React, Tailwind, horizontal scrollbars at any tested width, or any element that rests at opacity:0 in the base CSS. Every visible control has an accessible name. There is exactly one <h1>. Real <header>, <nav>, <main>, and <footer> elements are present.

B. THE BACKDROP
One <canvas id="grain"> is the only canvas in the document. Element count for the backdrop: 1 canvas, 1 div.bg-drift, 1 body::after vignette. The canvas sits at z-index:0 and is sized by CSS to width:100%; height:100%; display:block. Canvas resolution trick: on init and on resize (both outside the rAF loop), read canvas.offsetWidth and canvas.offsetHeight once. Set canvas.width = Math.round(offsetWidth * 0.5) and canvas.height = Math.round(offsetHeight * 0.5). Do NOT use devicePixelRatio; the half-resolution backing store upscaled to full CSS size is the fill-rate trick. Draw exactly once per size, never per frame. Draw order on the 2D context: first a radial gradient centred at 70% 50% with inner colour rgba(138,180,255,0.10) at stop 0 and rgba(5,7,13,0) at stop 1 with radius Math.max(w,h)*0.8; then an ImageData noise pass where every 4th byte (alpha) is 8 and RGB bytes are a random 0-255 integer, applied via putImageData over the whole half-res surface. ctx.filter and ctx.shadowBlur are never called; there is no per-item canvas loop. Blur radii: div.bg-drift is a static layer with background: linear-gradient(105deg, transparent 0%, rgba(138,180,255,0.06) 45%, transparent 90%) and filter: blur(30px) applied once at parse time. body background is linear-gradient(180deg, #05070d 0%, #080b14 100%). Drift period: div.bg-drift animates transform: translate3d(-2%,0,0) to translate3d(2%,0,0) over 24s linear infinite alternate. Per-frame cost budget: JS execution <= 1.5ms; zero layout reads inside the loop; compositor paint <= 4ms; total rAF frame budget <= 8ms, guaranteeing the >=20 frames per 1.2s headless smoke threshold at 1440x900 with large headroom.

C. THE LAYER STACK (back to front, z-index values)
z-index:0 — #grain canvas (static noise + vignette gradient).
z-index:1 — div.bg-drift (drifting accent wash).
z-index:2 — div.beam (incoming white beam bar) and div.beam-highlight (travelling highlight child).
z-index:3 — div.fan (dispersion container); inside it, div.wedge:nth-child(1) through (7) receive z-index:31 through 37 respectively.
z-index:4 — svg.prism (glass triangle polygon with inner glow gradient).
z-index:5 — polyline.specular (1px non-scaling specular edge over the prism).
z-index:6 — div.content, which contains header, main.hero, and footer.
z-index:7 — a:focus-visible outline ring (outline, not a box, so it paints above content without a new stacking context).

D. TOKEN TABLE (every size and colour)
--bg-0:#05070d; --bg-1:#080b14; --accent:#8ab4ff; --accent-glow:rgba(138,180,255,0.18); --text:#e6edf7; --text-dim:#93a2bd; --white:#ffffff; --spec:rgba(255,255,255,0.70). Wedge hues: --w1:#ff4d4d; --w2:#ff9f43; --w3:#ffe14d; --w4:#4dff88; --w5:#4de1ff; --w6:#4d6bff; --w7:#b44dff. Sizes: --prism-w:220px; --prism-h:190px; --beam-w:46vw; --beam-h:2px; --wedge-w:52vw; --wedge-h:6px; --pad-x:48px; --pad-y:32px; --gap:24px; --h1:clamp(2.5rem,5vw,4rem); --fs-p:1.0625rem; --radius:999px. Blur radii (one per wedge): --blur-1:4px; --blur-2:6px; --blur-3:8px; --blur-4:7px; --blur-5:5px; --blur-6:9px; --blur-7:6px. Opacity tokens: --wedge-op-1:0.85; --wedge-op-2:0.80; --wedge-op-3:0.90; --wedge-op-4:0.82; --wedge-op-5:0.88; --wedge-op-6:0.78; --wedge-op-7:0.84.

E. THE COMPOSITION
Header: <header> is display:grid; grid-template-columns:auto 1fr auto; padding:var(--pad-y) var(--pad-x); gap:var(--gap). Child 1: <a class="brand" href="#top" aria-label="PRISM home">PRISM</a>. Child 2: <nav aria-label="Primary"> containing four links: <a href="#optics">Optics</a>, <a href="#dispersion">Dispersion</a>, <a href="#lab">Lab</a>, <a href="#contact">Contact</a>. Main hero: <main id="top" class="hero"> is display:grid; grid-template-columns:minmax(320px,38vw) 1fr; align-items:center; gap:48px; padding:0 var(--pad-x). Left column div.copy: <h1>Light, divided.</h1>; <p class="lede">PRISM is an optics studio engineering dispersion-grade glass for spectrometry, imaging, and research.</p>; <a class="btn" href="#contact">Request a quote</a>. Right column div.scene holds the beam, fan, prism, and specular. Footer: <footer> is display:flex; justify-content:space-between; align-items:center; padding:var(--pad-y) var(--pad-x). Left text node: "© 2025 PRISM Optics. All rights reserved." Right text node: "Precision · Dispersion · Clarity". SVG prism: inline <svg class="prism" width="var(--prism-w)" height="var(--prism-h)" viewBox="0 0 220 190" aria-hidden="true"> containing <defs><radialGradient id="glass" cx="50%" cy="40%" r="60%"><stop offset="0%" stop-color="rgba(255,255,255,0.14)"/><stop offset="60%" stop-color="rgba(138,180,255,0.08)"/><stop offset="100%" stop-color="rgba(255,255,255,0.02)"/></radialGradient></defs>, then <polygon points="10,180 110,10 210,180" fill="url(#glass)"/>. Specular: <polyline class="specular" points="10,180 110,10 210,180" fill="none" stroke="var(--spec)" stroke-width="1" vector-effect="non-scaling-stroke"/>. Beam: <div class="beam"><div class="beam-highlight"></div></div>. Fan: <div class="fan"> with seven <div class="wedge" data-i="1"></div> ... up to 7.

F. THE UI LANGUAGE
.btn treatment: display:inline-block; background:linear-gradient(180deg,#8ab4ff,#5a8dee); color:#05070d; padding:14px 28px; border-radius:var(--radius); font-weight:600; text-decoration:none; font-size:1rem; box-shadow:0 6px 20px rgba(90,141,238,0.35); transition:transform 160ms ease, filter 160ms ease. .btn:hover { transform:translateY(-1px); filter:brightness(1.08); } .btn:active { transform:translateY(0); } .btn:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } .brand { font-weight:700; letter-spacing:0.18em; color:var(--text); text-decoration:none; } nav a { color:var(--text-dim); text-decoration:none; font-size:0.9375rem; margin-left:20px; transition:color 160ms ease, text-shadow 160ms ease; } nav a:hover { color:var(--white); text-shadow:0 0 12px rgba(138,180,255,0.6); } .lede { color:var(--text-dim); font-size:var(--fs-p); line-height:1.6; max-width:34ch; margin:0 0 28px; } h1 { font-size:var(--h1); line-height:1.05; margin:0 0 20px; color:var(--white); font-weight:600; letter-spacing:-0.02em; }

G. MOTION — STAGGER TABLE AND KEYFRAMES
Element -> animation -> delay:
.brand -> floatIn -> 0ms
nav a:nth-child(1) -> floatInRight -> 80ms
nav a:nth-child(2) -> floatInRight -> 160ms
nav a:nth-child(3) -> floatInRight -> 240ms
nav a:nth-child(4) -> floatInRight -> 320ms
.hero h1 -> fadeUp -> 240ms
.hero .lede -> fadeUp -> 320ms
.btn -> fadeUp -> 400ms
footer -> fadeIn -> 560ms
.beam -> drawBeam -> 0ms
.wedge[data-i="1"] -> fanOut -> 200ms
.wedge[data-i="2"] -> fanOut -> 270ms
.wedge[data-i="3"] -> fanOut -> 340ms
.wedge[data-i="4"] -> fanOut -> 410ms
.wedge[data-i="5"] -> fanOut -> 480ms
.wedge[data-i="6"] -> fanOut -> 550ms
.wedge[data-i="7"] -> fanOut -> 620ms
.fan -> fanBreathe -> 0ms (duration 12s, infinite)
.beam-highlight -> beamTravel -> 0ms (duration 2.4s, linear infinite)
.prism -> glowPulse -> 0ms (duration 12s, infinite)
Named keyframes:
@keyframes floatIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@keyframes floatInRight { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes drawBeam { from { transform:scaleX(0); transform-origin:left center; } to { transform:scaleX(1); transform-origin:left center; } }
@keyframes fanOut { from { opacity:0; transform:scaleX(0.6) skewY(0deg); } to { opacity:0.88; transform:scaleX(1) skewY(-8deg); } }
@keyframes fanBreathe { 0%,100% { transform:skewY(-6deg) scaleX(0.98); } 50% { transform:skewY(6deg) scaleX(1.02); } }
@keyframes beamTravel { 0% { transform:translateX(-60%); } 100% { transform:translateX(160%); } }
@keyframes glowPulse { 0%,100% { opacity:0.9; } 50% { opacity:1; } }

H. RESPONSIVE TABLE (token overrides per breakpoint, including two max-height breakpoints)
| Breakpoint / Condition | Overrides |
| 1920x1080 base | --prism-w:220px; --prism-h:190px; --beam-w:46vw; --wedge-w:52vw; --pad-x:48px; --h1:clamp(2.5rem,5vw,4rem); |
| 1440x900 | --prism-w:200px; --prism-h:172px; --beam-w:44vw; --wedge-w:50vw; --pad-x:40px; --h1:3.5rem; |
| 768x1024 | .hero { grid-template-columns:1fr; } --prism-w:180px; --prism-h:154px; --beam-w:60vw; --wedge-w:66vw; --pad-x:32px; --h1:3rem; --gap:32px; |
| 390x844 | --prism-w:150px; --prism-h:128px; --beam-w:70vw; --wedge-w:76vw; --pad-x:20px; --pad-y:24px; --h1:2.25rem; --gap:16px; .lede { max-width:100%; } |
| max-height:780px | --prism-w:180px; --prism-h:150px; --wedge-h:5px; |
| max-height:640px | --prism-w:150px; --prism-h:124px; --beam-h:1px; --wedge-h:4px; --pad-y:16px; |
At <=900px, body regains vertical scroll; all above overrides still apply and no horizontal overflow is permitted.

I. FAILURE GUARDS
Resting opacity: every element in the base CSS has opacity:1. Animations are attached only under .is-ready (added by JS) and use animation-fill-mode:both, so if JS never runs the page is fully readable and static. Two-rAF fallback: if window.requestAnimationFrame is undefined, polyfill it as window.requestAnimationFrame = function(cb){ return setTimeout(function(){ cb(Date.now()); }, 16); }; and window.cancelAnimationFrame = function(id){ clearTimeout(id); }. Reduced motion: a @media (prefers-reduced-motion: reduce) block sets *, *::before, *::after { animation:none !important; transition:none !important; }. JS reads matchMedia("(prefers-reduced-motion: reduce)").matches into a variable reduce. If reduce is true, JS still sets ready=true and runs the rAF loop only to increment the telemetry frames counter, but applies zero style updates, leaving the composed scene static. No console method is ever called; no uncaught exceptions are thrown.

J. THE EXACT JS
Insert the following script at the end of <body>, with no template literals and no inner backticks:
<script>
(function(){
  var D = window.__DEMO__ = { name:'prism', ready:false, frames:0, effects:[], errors:[] };
  window.addEventListener('error', function(e){ D.errors.push(String(e.message)); });
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(cb){ return setTimeout(function(){ cb(Date.now()); }, 16); };
    window.cancelAnimationFrame = function(id){ clearTimeout(id); };
  }
  function drawGrain(c){
    var w = c.width = Math.round(c.offsetWidth * 0.5);
    var h = c.height = Math.round(c.offsetHeight * 0.5);
    var x = c.getContext('2d');
    x.clearRect(0,0,w,h);
    var g = x.createRadialGradient(w*0.70, h*0.50, 0, w*0.70, h*0.50, Math.max(w,h)*0.80);
    g.addColorStop(0, 'rgba(138,180,255,0.10)');
    g.addColorStop(1, 'rgba(5,7,13,0)');
    x.fillStyle = g;
    x.fillRect(0,0,w,h);
    var id = x.createImageData(w,h);
    var d = id.data;
    for (var i=0; i<d.length; i+=4) {
      var v = (Math.random()*255)|0;
      d[i] = v; d[i+1] = v; d[i+2] = v; d[i+3] = 8;
    }
    x.putImageData(id,0,0);
  }
  function init(){
    var c = document.getElementById('grain');
    if (c && c.offsetWidth) { D.effects.push('canvas-grain'); drawGrain(c); }
    D.effects.push('beam-travel');
    D.effects.push('fan-breathe');
    D.effects.push('prism-glow');
    document.documentElement.classList.add('is-ready');
    requestAnimationFrame(function loop(){
      D.frames++;
      requestAnimationFrame(loop);
    });
    requestAnimationFrame(function(){
      requestAnimationFrame(function(){ D.ready = true; });
    });
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else { init(); }
  window.addEventListener('resize', function(){
    var c = document.getElementById('grain');
    if (c && c.offsetWidth) { drawGrain(c); }
  });
})();
</script>


---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Signal Room

- Slug: `signal-room`
- Page: https://landingpageprompts.com/prompts/signal-room
- Effect: Volumetric light shafts drift over a canvas field of audio-reactive bars
- Model: `gpt-5.5` (GPT-5.5 (gpt-5.5)) on Workbuddy proxy
- Build tokens: 17,590; total with repair and cross-check: 71,635
- Verification: 19/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - the generated index.html contains exactly one h1 with the exact text 'Hear the work before it slips.' and uses semantic header, nav, main, and footer landmarks
  - canvas#audio-bars exists, paints a non-blank 64-bar audio field at 1440x900, and window.__DEMO__.frames increments once per requestAnimationFrame tick while effects includes 'audio-bars-canvas'
  - window.__DEMO__ is initialized with name 'signal-room', ready becomes true after the first painted bar frame, effects contains volumetric-light-shafts, floor-glow, audio-bars-canvas, grain-texture, and mobile-menu, and errors stays empty in the happy path
  - at viewport widths 1440 and 1920, html/body and .page are locked to one 100dvh frame with overflow hidden; at 390px and 768px vertical scroll may exist but there is no horizontal overflow
  - the document performs no network requests except Google Fonts, contains no external media or framework scripts, includes a prefers-reduced-motion reduce block, and every anchor or button has a visible focus-visible ring
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. Build one complete valid index.html for a single-viewport landing page for an audio-AI company named Signal. Document title: Signal Room — Audio AI for Live Work. Set html lang="en". ONE file only: plain HTML, inline CSS, and one small inline script at the end of body. No build step, no framework, no bundler, no React, no Tailwind, no GSAP, no Three.js, no Lottie, no external scripts, no external images, no video, no audio element, no GIF, no base64 photo blobs, and no third-party CDN URLs. Google Fonts is the only permitted network request; use it only for Inter and IBM Plex Mono with system fallback stacks. Every visible pixel must come from CSS gradients, inline SVG primitives, text, and one canvas. Desktop is exactly one frame with no scroll at width >= 901px: html and body height:100%; overflow:hidden; .page height:100dvh; overflow:hidden. Mobile and tablet at width <= 900px may scroll vertically but must never overflow horizontally. Accessibility is mandatory: real header, nav, main, and footer; exactly one h1; every control is a button or anchor with an accessible name; visible focus-visible rings; readable contrast; no inert clickable divs. The runtime telemetry hook must be exactly window.__DEMO__ = { name: 'signal-room', ready: false, frames: 0, effects: [], errors: [] }; and the script must set ready true after the first painted audio-bar frame, increment frames once per animation frame inside the requestAnimationFrame loop, push each implemented effect name into effects, and attach a window error listener that pushes errors into errors. Keep the finished index.html under 90 KB. Do NOT build extra sections, pricing, testimonials, blogs, dashboards, forms, cookie banners, scroll indicators, app screenshots, waveform audio players, modal dialogs, or a large footer sitemap. The single visual idea is a dark room built from CSS volumetric light shafts falling from above and slowly drifting over a soft floor glow, with a bottom canvas field of 64 vertical bars moving as if driven by audio; the bars are the only fast continuous motion.

B. THE BACKDROP — procedural cinematic room. Build the room with a fixed .backdrop at inset:0, overflow:hidden, pointer-events:none. The base room is .room-bg covering inset:0 with background layers, back to front: radial-gradient(ellipse at 50% 112%, rgba(119,232,255,0.18) 0%, rgba(119,232,255,0.075) 18%, rgba(119,232,255,0.022) 38%, transparent 62%); radial-gradient(circle at 20% 14%, rgba(94,134,255,0.14) 0%, rgba(94,134,255,0.045) 24%, transparent 52%); radial-gradient(circle at 78% 8%, rgba(205,238,255,0.11) 0%, rgba(205,238,255,0.035) 20%, transparent 46%); linear-gradient(180deg, #02040a 0%, #050915 39%, #03040a 74%, #010207 100%). Add .rear-haze at top:18%; left:50%; width:min(94vw, 1480px); height:34%; transform:translateX(-50%); background:radial-gradient(ellipse at 50% 50%, rgba(119,232,255,0.105) 0%, rgba(119,232,255,0.045) 34%, transparent 72%); filter:blur(42px); opacity:0.72. Add four shaft elements named .shaft--one through .shaft--four. Every shaft is position:absolute; top:-22%; transform-origin:50% 0%; filter:blur(var(--shaft-blur)); mix-blend-mode:screen; will-change:transform, opacity. Shaft one: left:13%; width:22vw; height:112vh; transform:skewX(-12deg) rotate(8deg); opacity:0.46; background:linear-gradient(180deg, rgba(202,244,255,0.00) 0%, rgba(202,244,255,0.25) 9%, rgba(119,232,255,0.145) 34%, rgba(119,232,255,0.052) 63%, rgba(119,232,255,0.00) 100%); animation:shaft-drift-a 24s ease-in-out infinite. Shaft two: left:36%; width:18vw; height:118vh; transform:skewX(10deg) rotate(-5deg); opacity:0.38; background:linear-gradient(180deg, rgba(255,255,255,0.00) 0%, rgba(220,249,255,0.20) 12%, rgba(125,180,255,0.11) 42%, rgba(125,180,255,0.040) 70%, transparent 100%); animation:shaft-drift-b 31s ease-in-out infinite. Shaft three: left:61%; width:24vw; height:116vh; transform:skewX(-8deg) rotate(6deg); opacity:0.42; background:linear-gradient(180deg, transparent 0%, rgba(216,248,255,0.21) 10%, rgba(119,232,255,0.125) 39%, rgba(119,232,255,0.046) 68%, transparent 100%); animation:shaft-drift-c 28s ease-in-out infinite. Shaft four: left:78%; width:15vw; height:104vh; transform:skewX(13deg) rotate(-9deg); opacity:0.30; background:linear-gradient(180deg, transparent 0%, rgba(196,226,255,0.17) 15%, rgba(119,232,255,0.082) 48%, rgba(119,232,255,0.026) 77%, transparent 100%); animation:shaft-drift-d 36s ease-in-out infinite. The soft floor glow is .floor-glow at left:50%; bottom:-11%; width:min(112vw, 1580px); height:38%; transform:translateX(-50%); border-radius:50% 50% 0 0; background:radial-gradient(ellipse at 50% 28%, rgba(119,232,255,0.24) 0%, rgba(119,232,255,0.112) 18%, rgba(83,113,190,0.050) 44%, transparent 72%); filter:blur(28px); opacity:0.82; animation:floor-breathe 13s ease-in-out infinite. Add .room-lines for the floor perspective: bottom:-4%; height:44%; width:100%; background-image:repeating-linear-gradient(90deg, rgba(161,239,255,0.060) 0 1px, transparent 1px 92px), repeating-linear-gradient(0deg, rgba(161,239,255,0.050) 0 1px, transparent 1px 64px); transform:perspective(840px) rotateX(68deg); transform-origin:50% 100%; opacity:0.32; mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.66) 20%, rgba(0,0,0,0.46) 58%, transparent 100%). Add .grain as inline SVG feTurbulence background at opacity 0.075, animated 1.1s steps(5), never above z-index 8.

The canvas is canvas#audio-bars, fixed left:50%; bottom:0; width:min(100vw, var(--bars-max-w)); height:var(--bars-h); transform:translateX(-50%); z-index:6; display:block; pointer-events:none. It draws exactly 64 bars at desktop, 52 bars at width <= 900px, and 44 bars at width <= 560px. Each bar is a rounded vertical capsule with width computed from available width and gap, minimum 3px, maximum 14px. Heights follow a deterministic sum of sines: base = 0.30 + 0.20*sin(t*2.6 + i*0.41) + 0.14*sin(t*4.9 + i*0.17) + 0.10*sin(t*8.2 + i*0.73); envelope = 0.62 + 0.28*sin(t*0.72) + 0.10*sin(t*1.13 + 1.7); height = clamp(0.10, 0.96, abs(base) * envelope + laneBoost). The centre 18 bars receive laneBoost 0.10 * (1 - abs(i - mid) / 18). Use canvas 2D only, no audio APIs. Gradient per bar: top rgba(210,250,255,0.94) 0%, mid rgba(119,232,255,0.70) 42%, base rgba(61,102,190,0.24) 100%. Draw a soft mirrored foot reflection with rgba(119,232,255,0.06) and blur 14px after the solid bars. Frame budget: 64 rounded rects plus 64 reflection rects and two global gradients per frame, under 140 draw primitives. Resolution trick: cap backing-store device pixel ratio at 1.75 on desktop and 1.5 on mobile, set canvas.width = cssWidth * dpr and canvas.height = cssHeight * dpr, then ctx.setTransform(dpr,0,0,dpr,0,0). Recompute dimensions on resize with one queued rAF, not a timer. If document.hidden, keep the rAF loop alive and increment frames, but skip paint until visible.

C. THE LAYER STACK, back to front. html and body are #02040a at z-index auto. .backdrop is fixed inset:0 z-index:0 pointer-events:none overflow:hidden. Inside .backdrop: .room-bg z-index:0, .rear-haze z-index:1, .shaft--one z-index:2, .shaft--two z-index:3, .shaft--three z-index:2, .shaft--four z-index:3, .floor-glow z-index:4, .room-lines z-index:5, canvas#audio-bars z-index:6, .grain z-index:8. .page is position:relative z-index:10 min-height:100dvh display:grid grid-template-rows:auto 1fr auto. header.site-header is z-index:30. main.hero is z-index:20. .hero-panel is z-index:22 and must not use backdrop-filter stronger than 10px. footer.signal-footer is z-index:30. .mobile-menu-panel, when open, is fixed z-index:80. .focus-ring and browser outlines remain above local stacking contexts. Do not put any content behind the canvas bars at the bottom where it can become unreadable; footer sits above the bars with a bottom scrim.

D. TOKEN TABLE. Define tokens in :root for the 1440px desktop default. Colors: --bg:#02040a; --bg-2:#050915; --text:#eff9fb; --text-soft:#cfe2e7; --muted:#91a6af; --muted-2:#617680; --accent:#77e8ff; --accent-2:#7b8cff; --accent-hot:#d2faff; --line:rgba(210,250,255,0.16); --line-strong:rgba(210,250,255,0.34); --line-soft:rgba(210,250,255,0.09); --panel:rgba(3,7,16,0.42); --panel-strong:rgba(5,10,22,0.66); --focus:#d2faff; --black:#000000. Type: --font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --logo:16px; --nav:13px; --eyebrow:12px; --h1:82px; --lead:18px; --fine:12.5px; --button:13px; --metric:12px; --small-caps-track:0.16em. Layout: --header-x:42px; --header-y:28px; --header-h:44px; --page-pad-x:42px; --hero-pad-top:20px; --hero-pad-bottom:118px; --hero-max:860px; --hero-gap:22px; --hero-panel-pad-y:30px; --hero-panel-pad-x:38px; --footer-x:42px; --footer-y:26px; --footer-gap:28px; --nav-gap:10px. Buttons and shapes: --radius-pill:999px; --radius-panel:28px; --radius-soft:16px; --button-h:42px; --nav-h:38px; --chip-h:30px; --focus-w:2px; --focus-offset:4px; --panel-border-w:1px. Backdrop dimensions: --shaft-blur:22px; --bars-h:210px; --bars-max-w:1680px; --bars-bottom-fade:118px; --floor-line-size-x:92px; --floor-line-size-y:64px. Motion: --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-soft:cubic-bezier(0.22,1,0.36,1); --enter-dur:1.05s; --soft-dur:1.25s; --shaft-a-dur:24s; --shaft-b-dur:31s; --shaft-c-dur:28s; --shaft-d-dur:36s; --floor-dur:13s; --grain-dur:1.1s. Canvas JS constants mirror the CSS dimensions: barCountDesktop 64; barCountTablet 52; barCountPhone 44; barGapDesktop 10; barGapTablet 8; barGapPhone 6; barRadius 999; paintDprDesktop 1.75; paintDprMobile 1.5. Fonts are loaded with one preconnect to https://fonts.gstatic.com and one Google Fonts stylesheet for Inter weights 400,500,600,700 and IBM Plex Mono weights 400,500,600 with display=swap.

E. THE COMPOSITION. First CSS rule must be exactly html, body { background: #02040a !important; color: #eff9fb; } and the body tag must include style="background:#02040a;color:#eff9fb" to prevent a white flash. Body uses margin:0; min-width:320px; font-family:var(--font-sans); text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased. Page grid: .page { position:relative; z-index:10; min-height:100dvh; display:grid; grid-template-rows:auto minmax(0, 1fr) auto; } Desktop lock at >=901px sets html, body { height:100%; overflow:hidden; } and .page { height:100dvh; overflow:hidden; }. Header build order: create header.site-header with display:flex; align-items:center; justify-content:space-between; height:var(--header-h); padding:var(--header-y) var(--header-x) 0; gap:24px. The brand is an anchor href="#" with accessible name "Signal home". It contains an inline SVG mark 22px by 22px: a rounded square rect x=2 y=2 width=18 height=18 rx=6 fill="none" stroke="currentColor" stroke-width="1.5" and three vertical signal strokes at x=7,11,15 with rounded caps, heights 6,12,8, color var(--accent). Brand text is SIGNAL, font-size var(--logo), font-weight 700, letter-spacing:0.17em, color var(--text), text-decoration:none. Header nav contains exactly three links: Platform, Intelligence, Security. Each link is a pill from the UI language. Header right CTA is an anchor with text Hear a demo. Mobile burger appears only at <=900px and is a button with aria-label="Open navigation", aria-expanded toggled, and three 16px bars.

Hero build order: main.hero is display:grid; place-items:center; min-width:0; padding:var(--hero-pad-top) var(--page-pad-x) var(--hero-pad-bottom); overflow:visible. Inside it, .hero-panel is width:100%; max-width:var(--hero-max); display:grid; justify-items:center; gap:var(--hero-gap); text-align:center; padding:var(--hero-panel-pad-y) var(--hero-panel-pad-x); border:var(--panel-border-w) solid var(--line); border-radius:var(--radius-panel); background:linear-gradient(180deg, rgba(5,10,22,0.50) 0%, rgba(3,7,16,0.30) 100%); box-shadow:0 28px 90px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px). Place a chip above the h1: text REAL-TIME AUDIO AI, height var(--chip-h), padding 0 13px, border 1px solid var(--line), border-radius var(--radius-pill), font-size var(--eyebrow), font-family var(--font-mono), letter-spacing var(--small-caps-track), color var(--accent), background rgba(119,232,255,0.045). The H1 is exactly one element, text Hear the work before it slips., margin:0, max-width:800px, font-size:var(--h1), line-height:0.96, letter-spacing:-0.065em, font-weight:700, color:var(--text). Wrap the words in spans for entrance only, but do not split into extra headings. The lead paragraph exact copy is: Signal listens across meetings, calls, and customer conversations, then turns every live moment into searchable intelligence before context disappears. CSS: margin:0; max-width:680px; color:var(--text-soft); font-size:var(--lead); line-height:1.62; letter-spacing:-0.018em. Hero actions: a .button.button--primary with text Start with Signal, and a .button.button--ghost with text View security model; group display:flex; gap:12px; flex-wrap:wrap; justify-content:center. Footer: footer.signal-footer contains a ul with exactly three li metrics and no nav: 64 live bands, 18 ms analysis window, Private by design. Footer CSS: padding:0 var(--footer-x) var(--footer-y); display:flex; justify-content:center; align-items:center; position:relative. The ul is display:flex; gap:var(--footer-gap); list-style:none; padding:0; margin:0; flex-wrap:wrap; justify-content:center. Each li uses font-family:var(--font-mono); font-size:var(--metric); letter-spacing:0.10em; text-transform:uppercase; color:var(--muted). The numeric prefix or first word is a span color var(--accent-hot), opacity 0.92, margin-right:8px.

F. THE UI LANGUAGE. All clickable header pills and hero buttons share a precise glass-signal treatment. .pill and .button are inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); text-decoration:none; position:relative; overflow:hidden; transition:transform 220ms var(--ease-out), border-color 220ms var(--ease-out), background 220ms var(--ease-out), color 220ms var(--ease-out), box-shadow 220ms var(--ease-out). .pill height:var(--nav-h); padding:0 15px; border:1px solid rgba(210,250,255,0.13); color:var(--text-soft); font-size:var(--nav); font-weight:560; background:linear-gradient(180deg, rgba(210,250,255,0.060) 0%, rgba(210,250,255,0.018) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.20). .pill::before and .button::before are a 112deg moving glint: content:""; position:absolute; inset:-1px; background:linear-gradient(112deg, transparent 0%, transparent 36%, rgba(210,250,255,0.18) 50%, transparent 64%, transparent 100%); transform:translateX(-140%); transition:transform 680ms var(--ease-out); pointer-events:none. Hover moves any clickable up -1px, border-color rgba(210,250,255,0.36), color var(--text), and glint translateX(140%). Active returns translateY(0). .button height:var(--button-h); padding:0 18px; font-size:var(--button); font-weight:650; letter-spacing:-0.01em. .button--primary uses color:#031018; border-color rgba(210,250,255,0.56); background:linear-gradient(180deg, #d2faff 0%, #77e8ff 52%, #76a8ff 100%); box-shadow:0 18px 52px rgba(119,232,255,0.24), inset 0 1px 0 rgba(255,255,255,0.62). .button--primary:hover background:linear-gradient(180deg, #ffffff 0%, #98efff 48%, #8bb5ff 100%). .button--ghost uses color:var(--text-soft); border:1px solid var(--line); background:rgba(210,250,255,0.035). Focus: every a and button has :focus-visible outline var(--focus-w) solid var(--focus); outline-offset:var(--focus-offset); border-radius:var(--radius-pill). Selection: ::selection { background:rgba(119,232,255,0.30); color:#ffffff; }. The mobile panel uses background rgba(2,4,10,0.91), backdrop-filter blur(20px), border-top 1px solid var(--line), and stacked links at 24px with no extra pages.

G. MOTION — entrance stagger and named keyframes. Resting opacity is always 1 on .appear elements; animations define from states only, and the page remains readable if animation fails. Apply .appear plus a modifier to each animated element with inline --d. Entrance animations use animation-duration:var(--enter-dur); animation-fill-mode:both; animation-timing-function:var(--ease-out); animation-delay:var(--d). Stagger table: brand .appear--scale delay 0.06s; nav Platform .appear--soft delay 0.14s; nav Intelligence .appear--soft delay 0.20s; nav Security .appear--soft delay 0.26s; header CTA .appear--scale delay 0.32s; chip .appear--pop delay 0.34s; h1 word Hear .appear--word delay 0.48s; h1 word the delay 0.55s; h1 word work delay 0.62s; h1 word before delay 0.69s; h1 word it delay 0.76s; h1 word slips. delay 0.83s; lead paragraph .appear--soft delay 1.00s; primary button .appear--scale delay 1.14s; ghost button .appear--scale delay 1.22s; metric 64 .appear--stat delay 1.30s; metric 18 .appear--stat delay 1.40s; metric Private .appear--stat delay 1.50s. Named keyframes: in-scale from opacity:0 transform:scale(0.92) to opacity:1 transform:none. in-soft from opacity:0 transform:translateY(14px) filter:blur(5px) to opacity:1 transform:none filter:blur(0). in-pop from 0% opacity:0 transform:scale(0.94), 68% opacity:1 transform:scale(1.035), 100% opacity:1 transform:scale(1). in-word from opacity:0 transform:translateY(0.46em) rotateX(36deg); transform-origin:50% 100%; filter:blur(4px) to opacity:1 transform:none filter:blur(0). in-stat from opacity:0 transform:translateY(12px) to opacity:1 transform:none. Continuous keyframes: shaft-drift-a drifts translate3d(-1.6vw,0,0) skewX(-12deg) rotate(7deg) to translate3d(1.2vw,1.4vh,0) skewX(-10deg) rotate(9deg) and back over 24s. shaft-drift-b drifts translate3d(1.1vw,0,0) skewX(10deg) rotate(-5deg) to translate3d(-1.4vw,1.8vh,0) skewX(12deg) rotate(-7deg) and back over 31s. shaft-drift-c drifts translate3d(-1.0vw,0,0) skewX(-8deg) rotate(6deg) to translate3d(1.6vw,1.2vh,0) skewX(-6deg) rotate(4deg) and back over 28s. shaft-drift-d drifts translate3d(0.8vw,0,0) skewX(13deg) rotate(-9deg) to translate3d(-1.0vw,1.0vh,0) skewX(11deg) rotate(-8deg) and back over 36s. floor-breathe animates opacity 0.72 to 0.90 to 0.72 and transform translateX(-50%) scaleX(0.985) to translateX(-50%) scaleX(1.025) to start over 13s. grain-shift uses five stepped offsets: 0 0, -2% 1%, 1% -2%, -1% 2%, 2% 0. The canvas bars run continuously via JS; their frame-to-frame height changes are the only fast continuous motion.

H. RESPONSIVE TABLE — exact token overrides per breakpoint. Defaults above are for 1440x900. For width >= 1600px set --header-x:56px; --header-y:34px; --logo:17px; --nav:14px; --nav-h:40px; --button:14px; --button-h:44px; --h1:96px; --lead:19px; --hero-max:940px; --hero-gap:24px; --hero-panel-pad-y:34px; --hero-panel-pad-x:46px; --hero-pad-bottom:132px; --footer-x:56px; --footer-y:30px; --footer-gap:34px; --bars-h:232px; --bars-max-w:1840px; --shaft-blur:24px. For width >= 1920px set --header-x:72px; --header-y:38px; --logo:18px; --nav:14.5px; --nav-h:42px; --button-h:46px; --h1:112px; --lead:20px; --hero-max:1040px; --hero-gap:26px; --hero-panel-pad-y:38px; --hero-panel-pad-x:54px; --hero-pad-bottom:148px; --footer-y:34px; --footer-gap:42px; --bars-h:260px; --bars-max-w:2040px; --shaft-blur:26px. For 1280px to 1599px set --header-x:42px; --h1:78px; --lead:17px; --hero-max:820px; --hero-panel-pad-y:28px; --hero-panel-pad-x:34px; --hero-pad-bottom:112px; --bars-h:202px. For 901px to 1279px set --header-x:30px; --header-y:22px; --page-pad-x:30px; --footer-x:30px; --footer-y:22px; --nav:12.5px; --nav-h:36px; --button:12.5px; --button-h:40px; --logo:15px; --h1:60px; --lead:16px; --hero-max:720px; --hero-gap:18px; --hero-panel-pad-y:24px; --hero-panel-pad-x:28px; --hero-pad-bottom:98px; --footer-gap:22px; --bars-h:178px; --shaft-blur:20px. For desktop max-height <= 850px and width >= 901px set --header-y:20px; --header-h:40px; --hero-pad-top:10px; --hero-pad-bottom:86px; --hero-gap:16px; --hero-panel-pad-y:22px; --h1:58px; --lead:15px; --chip-h:28px; --footer-y:18px; --bars-h:168px; .hero-panel max-width:min(var(--hero-max), 760px). For desktop max-height <= 720px and width >= 901px set --header-y:14px; --header-h:36px; --hero-pad-top:4px; --hero-pad-bottom:72px; --hero-gap:12px; --hero-panel-pad-y:18px; --hero-panel-pad-x:26px; --h1:46px; --lead:13.5px; --eyebrow:11px; --chip-h:26px; --button-h:36px; --footer-y:12px; --metric:11px; --bars-h:138px; .hero-panel border-radius:22px; .floor-glow opacity:0.68. For width <= 900px remove the desktop height lock: html, body { min-height:100%; overflow-x:hidden; } .page { min-height:100dvh; height:auto; overflow:hidden; grid-template-rows:auto minmax(620px, auto) auto; } tokens: --header-x:22px; --header-y:20px; --header-h:42px; --page-pad-x:22px; --hero-pad-top:72px; --hero-pad-bottom:220px; --hero-max:100%; --hero-gap:18px; --hero-panel-pad-y:26px; --hero-panel-pad-x:22px; --h1:48px; --lead:16px; --button-h:42px; --bars-h:190px; --bars-max-w:980px; --shaft-blur:18px. At <=900px hide desktop nav and header CTA, show the burger, and create .mobile-menu-panel fixed inset:0 z-index:80 display:grid place-items:center transform:translateY(-100%) until html.menu-open transform:none. It contains the same three nav links and the CTA stacked with gap 22px. For width <=560px set --header-x:18px; --page-pad-x:18px; --hero-pad-top:54px; --hero-pad-bottom:190px; --hero-panel-pad-y:22px; --hero-panel-pad-x:18px; --radius-panel:22px; --h1:39px; --lead:14.5px; --eyebrow:10.5px; --chip-h:26px; --button:12.5px; --bars-h:170px; footer ul flex-direction:column; align-items:center; gap:10px. Canvas constants also scale: <=900px uses 52 bars and gap 8; <=560px uses 44 bars and gap 6; all widths keep zero horizontal overflow.

I. FAILURE GUARDS. The .appear class must have opacity:1 as its resting declaration before animation names are applied; animation keyframes handle initial opacity so a failed animation never leaves content invisible. Black-first guard: first CSS rule is html, body { background: #02040a !important; color: #eff9fb; } and body has the inline background style. Two-rAF entrance fallback: after two nested requestAnimationFrame callbacks, inspect every .appear element with el.getAnimations({ subtree:false }); if none of its animations has playState "running" or "finished", add .is-in to every .appear. If a browser lacks getAnimations, run the same .is-in fallback after the two rAFs. .is-in forces animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important. Canvas fallback: if canvas or 2D context is missing, add .no-canvas to html and CSS must show a static bar field using repeating-linear-gradient(90deg, rgba(119,232,255,0.40) 0 4px, transparent 4px 18px) masked by a bottom gradient on .backdrop::after; the page remains readable and the telemetry errors array receives a short string. Reduced motion: inside @media (prefers-reduced-motion: reduce), set *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }, force .appear and .appear.is-in to opacity:1 transform:none filter:none clip-path:none, freeze the shafts at their base transforms, hide the grain animation, and make the canvas draw one static bar frame with t=2.4, then stop scheduling further visual changes after ready is true. In reduced motion, window.__DEMO__.frames may stop after the first painted frame, but ready must still become true and content must be static and readable. Maintain contrast: main text #eff9fb on #02040a, lead #cfe2e7 on the panel, and muted metric #91a6af all remain readable; do not lower text opacity below 0.86. Add a window error listener before running any other animation code and push String(event.message || event.error || "unknown error") to window.__DEMO__.errors. No console.log, console.warn, or console.error in the happy path. Guard every optional element check so missing elements cannot throw.

J. THE EXACT JS. Keep the script as a small IIFE at the end of body. It must do only telemetry, canvas bars, animation fallback, reduced-motion handling, resize handling, and mobile menu behavior. First line inside the script sets window.__DEMO__ = { name: 'signal-room', ready: false, frames: 0, effects: [], errors: [] }; then push implemented effect names exactly once in this order: "volumetric-light-shafts", "floor-glow", "audio-bars-canvas", "grain-texture", "mobile-menu". Add the error listener immediately after creating the object. Cache document.documentElement, canvas#audio-bars, the 2D context, the menu button, the mobile panel, all panel links, and matchMedia('(prefers-reduced-motion: reduce)'). Use no timers and no console calls. Implement a resizeCanvas function that reads canvas.getBoundingClientRect(), sets cssWidth and cssHeight, caps dpr to 1.75 or 1.5 based on innerWidth <= 900, sets canvas.width and canvas.height from css dimensions times dpr, and calls ctx.setTransform(dpr,0,0,dpr,0,0). Resize is scheduled by a boolean resizeQueued and requestAnimationFrame only. Implement roundedRect(ctx,x,y,w,h,r) locally with moveTo, lineTo, quadraticCurveTo, and closePath. The drawBars(timeMs) function clears the CSS-sized canvas, paints a bottom fade linear gradient from transparent 0% to rgba(2,4,10,0.62) 100%, then draws exactly barCount bars based on width breakpoint. Compute t = timeMs / 1000, mid = (barCount - 1) / 2, gap from breakpoint, available = cssWidth - 2 * sidePad where sidePad is 26 desktop, 20 tablet, 16 phone, barW = clamp between 3 and 14, startX = (cssWidth - (barCount * barW + (barCount - 1) * gap)) / 2. For each i, compute the sine formula from section B, clamp height, y = cssHeight - 18 - h, x = startX + i * (barW + gap). Draw reflection first using globalAlpha 0.46, filter blur(14px), y = cssHeight - 16, h = h * 0.32, fillStyle rgba(119,232,255,0.12). Reset filter and globalAlpha, create a vertical gradient for the solid bar using the exact color stops in section B, and fill the rounded capsule. Add a final top glow gradient across the bar field: radial-gradient equivalent via ctx.createRadialGradient centered at cssWidth/2, cssHeight*0.62 with inner radius 0 and outer radius min(cssWidth, cssHeight)*0.72, colors rgba(119,232,255,0.10) to transparent. Start a requestAnimationFrame loop named tick. At the top of every tick increment window.__DEMO__.frames by exactly 1. If document.hidden is false and context exists, call drawBars unless reduced motion has already painted once. On the first completed draw, schedule one more requestAnimationFrame and set window.__DEMO__.ready = true inside it, so ready follows the first paint opportunity. Continue the loop unless reduced motion has painted and ready is true. Animation fallback: add animationend listeners to every .appear; on end add .is-in; then run the two-rAF fallback described in section I. Burger behavior: clicking the burger toggles class menu-open on documentElement, updates aria-expanded to "true" or "false", updates aria-label to "Close navigation" or "Open navigation", and sets panel aria-hidden to the inverse. Escape closes the menu. Clicking any link inside the mobile panel closes the menu. Resizing to width > 900 closes the menu. Closing means remove menu-open, button aria-expanded="false", button aria-label="Open navigation", panel aria-hidden="true". The script must not create visual DOM elements, must not fetch, must not use localStorage, and must not log.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Slipstream

- Slug: `slipstream`
- Page: https://landingpageprompts.com/prompts/slipstream
- Effect: A 200vh sticky canvas spool with five independently drifting rounded-rectangle tape rings and a blended statement crossing its lower third.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 45,334; total with repair and cross-check: 45,334
- Verification: 19/19 automated checks passed
- Independent cross-check: unparsed (confidence low)
- Acceptance criteria:
  - The delivered artifact is one valid index.html using only HTML, CSS, and vanilla JavaScript; loading at 1440x900 creates no horizontal overflow, exactly one h1, and real header, main, nav, section, and footer elements.
  - At 1440x900, the scroll stage measures 300dvh, the opening section measures 100dvh, the sticky section measures 200dvh with position:sticky and top:0, and window.__DEMO__ becomes { name: 'slipstream', ready: true, frames: a non-negative integer, effects: ['ring-drift','group-rotation','sticky-release','load-ramp'], errors: [] } after first paint.
  - The canvas contains five rounded-rectangle paths per frame with stroke widths [2,4,7,10,14], horizontal speeds [4,7,11,15,18], and exactly one stroke using #C8553D; its backing store uses the 0.75 resolution rule and never exceeds 1440 by 960 pixels.
  - At 390x844, 768x1024, 1440x900, and 1920x1080, document.documentElement.scrollWidth does not exceed document.documentElement.clientWidth, all visible controls have accessible names, and every keyboard-focusable control displays the specified focus-visible outline.
  - With prefers-reduced-motion: reduce, all visible content reaches opacity 1, canvas translation and group rotation remain fixed, the release transform remains translate3d(0,0,0), and a 1.2-second observation records at least 20 telemetry frames without console output or uncaught exceptions.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT

Build “Slipstream,” a single-page landing experience for Room Tone, a streaming service devoted to recorded music and long, uninterrupted listening. Produce exactly one complete index.html file with semantic HTML, plain CSS, and vanilla JavaScript. Set the document language to en, set the browser tab title to “Slipstream — Long-form listening by Room Tone,” and include one responsive viewport meta tag with width=device-width, initial-scale=1, and viewport-fit=cover.

This is an explicitly scroll-driven concept and is the sole exception to the normal desktop overflow rule. Create one 300dvh scroll stage: a 100dvh opening section followed by a 200dvh sticky section. The opening section scrolls at native speed. The second section uses position: sticky; top: 0; and remains pinned through its parent’s 200dvh range before an ease-out release. On widths from 901px through 1920px, do not disable document scrolling for this concept; allow only vertical scrolling and lock horizontal overflow. At widths of 900px and below, preserve the same 300dvh scroll mechanic while reducing canvas density and typography without changing the sequence.

Use real header, main, section, nav, and footer elements. Include exactly one h1. The canvas is decorative and must use aria-hidden="true"; the ring visual must have a concise text equivalent in visible HTML. Every visible link and button must have a discernible accessible name. Every keyboard-focusable element must receive a visible :focus-visible treatment.

Do NOT build a hero video, audio player waveform, album grid, pricing table, account modal, login form, cursor tracker, magnetic button, 3D engine, horizontal carousel, cookie panel, chat widget, remote image, stock image, icon package, framework, bundler, or secondary page. Do NOT load any media file, base64 asset, third-party script, third-party stylesheet, animation library, or CDN endpoint other than the single permitted Google Fonts stylesheet. Do NOT add more than one h1. Do NOT add horizontal scrolling. Do NOT use SVG filters, canvas filters, canvas shadows, or per-ring shadowBlur.

B. THE BACKDROP

The page field is #0C0B0A. Behind all content, place one fixed full-viewport .field element with a radial-gradient vignette centered at 55% 50%. The radial gradient uses these exact stops: 0% rgba(12,11,10,0); 38% rgba(12,11,10,0.18); 70% rgba(12,11,10,0.62); 100% rgba(12,11,10,0.94). Add a second linear-gradient from rgba(242,239,233,0.025) at 0deg to rgba(242,239,233,0) at 115deg. Do not add stars, grain images, noise textures, or moving particles.

Inside the sticky section, create exactly one canvas element. It must fill the sticky panel at width:100%; height:100%; display:block; transform-origin:50% 50%; transform:scale(1.5); will-change:transform. Apply overflow:hidden to the sticky panel so the 1.5-scaled canvas remains cropped. The 1.5 scale is the focal-anchor treatment: transform-origin is 0% 50%, and the drawing coordinates anchor the spool center near 6% of the logical CSS viewport width. The composition therefore reads as one oversized cropped spool entering from the left, not as a centred icon.

Use a 0.75 backing-resolution trick. On resize, set the canvas backing store to floor(cssWidth × 0.75) by floor(cssHeight × 0.75), capped at 1440 × 960 backing pixels. Set canvas.style.width to the measured CSS pixel width plus "px" and canvas.style.height to the measured CSS pixel height plus "px". Configure the 2D context by calling ctx.setTransform(0.75, 0, 0, 0.75, 0, 0). Cap the effective drawing scale at width 960 and height 640 design units when the viewport exceeds 1280 × 853. This resolution remains at or below 691,200 pixels at 1920 × 1080.

Draw exactly five concentric rounded rectangles. Their logical width multipliers are 1.000, 0.840, 0.680, 0.520, and 0.360. Their logical height multipliers are 1.220, 1.040, 0.860, 0.680, and 0.500. Base dimensions are max(viewportWidth × 1.5, 1300) CSS units wide and max(viewportHeight × 1.5, 1000) CSS units high. Center them at logical x = viewportWidth × 0.06 and y = viewportHeight × 0.50. Corner-radius multipliers are 0.230, 0.205, 0.180, 0.155, and 0.130 of base width. Stroke widths are 2, 4, 7, 10, and 14 CSS units. Ring 0, 1, 3, and 4 use #F2EFE9. Ring 2 alone uses #C8553D. Do not add fill. Line joins and caps are round.

Each ring receives a base rotation of -90 + i × 6 degrees, so the five base angles are -90, -84, -78, -72, and -66 degrees. Rotate the complete group at exactly 360 degrees per 90 seconds. Translate the five rings independently along the horizontal axis at exactly 4, 7, 11, 15, and 18 CSS pixels per second. Use elapsed-seconds delta time and wrap each translation with modulo at the base logical width, preventing unbounded coordinates. The speed differences are intentionally unsynchronised.

Use two drift periods for the backdrop field: a 46-second opacity cycle between 0.78 and 1.00 and a 72-second background-position cycle over 24px and 0px. Apply these through CSS animation only. The rings are canvas-drawn and must not also be duplicated as CSS borders. The canvas must render no more than five path operations, one clearRect, and one fillRect per frame. Keep the per-frame JavaScript budget below 2.2ms at 1440 × 900 in a warm headless run: cache all DOM references before the loop, read scrollY only in the scroll handler, do not call getBoundingClientRect inside rAF, and perform no canvas filter or shadowBlur calls. Target at least 20 delivered animation frames during every 1.2-second observation window at 1440 × 900.

C. THE LAYER STACK

Use this exact front-to-back z-index stack:

1. The document and .field background use z-index:0.
2. The fixed atmosphere layer uses z-index:1 and pointer-events:none.
3. The sticky canvas clipping panel uses z-index:2 and overflow:hidden.
4. The canvas uses z-index:2 within that panel.
5. The release transform layer uses z-index:3 and contains the h1 and supporting copy.
6. A non-interactive lower-third contrast veil uses z-index:4, background:linear-gradient(180deg, rgba(12,11,10,0) 44%, rgba(12,11,10,0.72) 100%), and pointer-events:none.
7. The sticky section’s top edge marker uses z-index:5.
8. The sticky motion control uses z-index:8.
9. The opening section header and statement use z-index:10.
10. The opening section footer uses z-index:10.
11. The skip link uses z-index:100.

The opening section has position:relative; z-index:10; height:100dvh; padding:28px 40px 24px. The sticky wrapper has position:sticky; top:0; height:200dvh; z-index:2. The sticky viewport panel has position:absolute; inset:0; overflow:hidden. The .release-layer has position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; padding:0 40px 48px; will-change:transform. The h1 is positioned in the lower third, not centred.

D. TOKEN TABLE

Define every used size and colour as a CSS custom property. Use these exact values:

--bg: #0C0B0A;
--surface: #141210;
--surface-raised: #1B1816;
--ink: #F2EFE9;
--dust: #6B6560;
--dust-light: #9A938C;
--oxide: #C8553D;
--oxide-hover: #DF654B;
--hairline: rgba(242,239,233,0.18);
--focus: #F2EFE9;
--font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
--fs-eyebrow: 11px;
--fs-nav: 12px;
--fs-statement: clamp(19px, 1.55vw, 25px);
--fs-h1: clamp(64px, 8.7vw, 164px);
--fs-body: 15px;
--fs-meta: 10px;
--lh-eyebrow: 1.3;
--lh-nav: 1.2;
--lh-statement: 1.34;
--lh-h1: 0.84;
--lh-body: 1.55;
--tracking-eyebrow: 0.18em;
--tracking-nav: 0.08em;
--tracking-h1: -0.065em;
--space-1: 6px;
--space-2: 10px;
--space-3: 14px;
--space-4: 20px;
--space-5: 28px;
--space-6: 40px;
--space-7: 64px;
--space-8: 96px;
--radius-pill: 999px;
--radius-panel: 18px;
--border-hairline: 1px solid var(--hairline);
--stage-height: 300dvh;
--intro-height: 100dvh;
--pin-height: 200dvh;
--canvas-scale: 1.5;
--canvas-resolution: 0.75;
--release-distance: -10vh;
--ease-release: cubic-bezier(0.16, 1, 0.3, 1);
--ease-ui: cubic-bezier(0.22, 1, 0.36, 1);
--duration-ui: 220ms;
--duration-load: 700ms;
--ring-stagger: 120ms;
--focus-width: 2px;
--focus-offset: 4px;
--content-max: 1440px;
--header-height: 52px;
--footer-height: 36px;
--canvas-stroke-0: 2px;
--canvas-stroke-1: 4px;
--canvas-stroke-2: 7px;
--canvas-stroke-3: 10px;
--canvas-stroke-4: 14px;

E. THE COMPOSITION

Build the opening section as follows. Its content width is min(100%, var(--content-max)). Use a CSS grid with grid-template-columns:minmax(0, 1fr) auto, grid-template-rows:52px 1fr 36px, column-gap:24px, row-gap:20px, and height:100%. The header occupies grid-column:1 / -1 and grid-row:1. The statement occupies grid-column:1, grid-row:2, aligns itself to end, and has a maximum width of 680px. A small index block occupies grid-column:2, grid-row:2, aligns itself to end, and has width:180px. The footer occupies grid-column:1 / -1 and grid-row:3.

The header is a nav with display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:52px. The left item is the Room Tone wordmark link with exact copy “ROOM TONE”. The centre contains two text links with exact copy “Listen” and “Method”. The right item contains one pill button with exact copy “Pause motion”. The nav’s accessible label is “Primary navigation”. The wordmark uses --font-display, 15px, weight 600, letter-spacing -0.02em. Centre links use --font-mono, --fs-nav, --tracking-nav, uppercase, and --dust-light. The right button uses the pill treatment in section F.

The opening statement has exact copy: “A room for records that refuse to hurry. Start one side. Keep the lights low. Let the next room arrive on its own.” Use --fs-statement, --lh-statement, weight 400, max-width:680px, and colour:var(--ink). Above it, place one eyebrow with exact copy “RECORDED MUSIC / UNBROKEN TIME”. Below it, place one body paragraph with exact copy: “Room Tone streams complete recordings without visible countdowns, editorial interruptions, or algorithmic urgency. One selection stays in motion from its first room tone to its last fade.” The body uses --fs-body, --lh-body, max-width:520px, and colour:var(--dust-light).

The opening index block uses a 1px top border and four stacked metadata rows. The row labels and values must be exact: “FORMAT / LOSSLESS + LOSSLESS”; “SESSION / CONTINUOUS”; “SURFACE / DARK”; “CATALOGUE / 18,420 RECORDS”. Labels use --fs-meta, --tracking-eyebrow, and --dust. Values use --font-mono, 11px, and --ink. The block uses row-gap:12px and padding-top:14px.

The opening footer is a semantic footer with border-top:var(--border-hairline), display:flex, justify-content:space-between, align-items:center, color:var(--dust), font-family:var(--font-mono), font-size:var(--fs-meta), and text-transform:uppercase. Its exact copy is “A LISTENING SERVICE BY ROOM TONE” on the left and “SCROLL INTO THE SPOOL ↓” on the right.

The sticky section begins immediately after the opening section and is 200dvh tall. Its viewport panel contains the canvas, a lower-third veil, the release layer, an edge marker, and the motion control. The edge marker is positioned at top:28px; left:40px and uses exact copy “NOW PLAYING / SIDE A — UNTITLED STUDY IN FOLD”. It has --fs-eyebrow, --tracking-eyebrow, and --dust-light. Place a 6px oxide dot before the text using ::before.

The release layer places the h1 at the left edge. The h1 exact copy is “KEEP THE ROOM TONE.” Use --fs-h1, --lh-h1, --tracking-h1, font-weight:500, max-width:1050px, color:var(--ink), and mix-blend-mode:difference. The text must overlap the lower third of the canvas, producing white-to-black inversions where it crosses #F2EFE9. Beneath the h1, place one paragraph with exact copy: “No timer. No queue shuffle. No seam between records.” It uses --fs-body, --lh-body, color:var(--dust-light), max-width:420px, and margin-top:20px. Keep the h1 and paragraph in a copy column using display:grid; grid-template-columns:minmax(0, 1fr) 360px; column-gap:40px; align-items:end; width:100%; max-width:1440px.

The sticky motion control is positioned at right:40px; bottom:48px. Its exact initial copy is “Pause motion”. It uses the same pill treatment as the header. A second visually hidden status element is unnecessary; update the existing button’s aria-pressed and text copy from JavaScript.

F. THE UI LANGUAGE

Use flat geometry, 1px borders, and one oxide interaction colour. Text links have no permanent background. Their resting colour is var(--dust-light), border-bottom:1px solid transparent, and transition:color 180ms ease, border-color 180ms ease. Hover changes colour to var(--ink) and border-color to var(--oxide). Active colour is var(--oxide-hover).

Pill buttons have height:36px, padding:0 16px, border-radius:var(--radius-pill), border:1px solid rgba(242,239,233,0.28), background:linear-gradient(135deg, #24201E 0%, #151312 100%), color:var(--ink), font-family:var(--font-mono), font-size:11px, line-height:1, letter-spacing:0.06em, text-transform:uppercase, and transition:transform var(--duration-ui) var(--ease-ui), border-color var(--duration-ui) ease, background var(--duration-ui) ease. Hover uses transform:translateY(-2px), border-color:var(--oxide), and background:linear-gradient(135deg, #2B211E 0%, #181311 100%). Active uses transform:translateY(0) scale(0.98). Buttons with aria-pressed="true" use border-color:var(--oxide) and a small inset oxide indicator through box-shadow:inset 0 0 0 1px rgba(200,85,61,0.24); box-shadow is a UI style only and is never used in canvas.

The skip link is position:fixed; top:8px; left:8px; z-index:100; transform:translateY(-160%); padding:10px 14px; background:var(--ink); color:var(--bg); font:12px var(--font-mono). On :focus, transform:translateY(0). Apply outline:2px solid var(--focus); outline-offset:4px to :focus-visible for a, button, and [tabindex]. Do not remove browser outlines.

G. MOTION

Use a single persistent requestAnimationFrame loop for the canvas, group rotation, independent ring translation, and scroll-derived release. Compute scroll state in a passive scroll listener and set a cached numeric value only. Do not query layout inside the loop.

The load sequence uses these exact opacity ramps:

Opening eyebrow: 0 to 1 over 700ms, delay 40ms, using ease-out.
Opening statement: 0 to 1 over 700ms, delay 120ms, using ease-out.
Metadata block: 0 to 1 over 700ms, delay 220ms, using ease-out.
Header: 0 to 1 over 700ms, delay 0ms, using ease-out.
Footer: 0 to 1 over 700ms, delay 300ms, using ease-out.
Canvas ring 0: 0 to 1 over 700ms, delay 140ms, using ease-out.
Canvas ring 1: 0 to 1 over 700ms, delay 260ms, using ease-out.
Canvas ring 2: 0 to 1 over 700ms, delay 380ms, using ease-out.
Canvas ring 3: 0 to 1 over 700ms, delay 500ms, using ease-out.
Canvas ring 4: 0 to 1 over 700ms, delay 620ms, using ease-out.
Sticky h1: 0 to 1 over 700ms, delay 340ms, using ease-out.
Sticky paragraph: 0 to 1 over 700ms, delay 460ms, using ease-out.
Motion control: 0 to 1 over 700ms, delay 540ms, using ease-out.

CSS load animations affect opacity only. Name them reveal-up, reveal-fade, ring-reveal, drift-field, and drift-grain. The ring reveal is represented in canvas by the same delay arithmetic in JavaScript. All resting opacities are 1. The initial class .is-loading sets the animated HTML elements to opacity:0; remove is-loading after the second animation frame so they become visible if CSS animation is disabled.

The ring rotation is defined as groupAngle = elapsedSeconds × 4 degrees per second, which completes 360 degrees in 90 seconds. Independent translations use the exact speeds [4, 7, 11, 15, 18] CSS pixels per second. Clamp deltaSeconds to 0.050 to prevent jumps after a suspended tab. Pause the motion button sets all ring translation and rotation calculations to their current frozen values while preserving the current scroll release position. Its second state is “Play motion”, aria-pressed="true", and its first state is “Pause motion”, aria-pressed="false".

The final 25dvh of the 200dvh pin is the release zone. Convert progress there to 0 through 1 using cubic ease-out: 1 - (1 - progress)^3. Apply translate3d(0, releaseDistance × easedProgress, 0) only to .release-layer. The h1 and paragraph do not receive independent parallax. The sticky panel remains position:sticky until the 300dvh parent ends. No fade-out is applied.

H. THE RESPONSIVE TABLE

At 1440 × 900 and widths from 1201px to 1600px, use --space-6:40px, --fs-h1:clamp(96px, 8.7vw, 144px), stage 300dvh, intro 100dvh, pin 200dvh, opening padding 28px 40px 24px, release padding 0 40px 48px, and copy grid minmax(0, 1fr) 360px.

At 1920 × 1080, override --content-max:1680px, --fs-h1:164px, opening padding 32px 64px 28px, release padding 0 64px 64px, metadata width 220px, and keep the canvas 1.5 scale with the left origin.

At widths from 901px to 1199px, override --space-6:28px, --fs-h1:clamp(76px, 8.7vw, 104px), opening padding 24px 28px 20px, release padding 0 28px 40px, copy grid-template-columns:1fr, copy paragraph max-width:420px, metadata width 160px, and canvas scale 1.35.

At 768 × 1024 and widths from 601px to 900px, use stage 300dvh, intro 100dvh, pin 200dvh, --fs-h1:clamp(68px, 11vw, 92px), --fs-statement:22px, opening padding 22px 24px 18px, release padding 0 24px 38px, header grid-template-columns:1fr auto, centre navigation display:none, statement max-width:560px, metadata width 150px, copy grid-template-columns:1fr, row-gap:16px, and canvas scale 1.25. The document may scroll vertically at this breakpoint; disable horizontal overflow.

At 390 × 844 and widths through 600px, use stage 300dvh, intro 100dvh, pin 200dvh, --fs-h1:clamp(50px, 15.3vw, 68px), --fs-statement:19px, --fs-body:14px, opening padding 18px 18px 16px, release padding 0 18px 32px, header grid-template-columns:1fr auto, centre navigation display:none, opening statement max-width:330px, metadata width 132px, metadata value font-size:9px, copy grid-template-columns:1fr, edge marker left:18px, motion control right:18px, bottom:24px, and canvas scale 1.10. Keep all text inside min-width:0 containers and use overflow-wrap:anywhere where a long catalogue value needs to wrap.

Use max-height:760px at widths from 901px to 1600px. Override opening padding-top:18px, opening padding-bottom:16px, --header-height:44px, --footer-height:30px, --fs-h1:clamp(58px, 8vw, 104px), --fs-statement:18px, release padding-bottom:28px, and motion control bottom:28px. The stage and pin heights remain 300dvh and 200dvh.

Use max-height:620px at all widths. Override opening padding-top:14px, opening padding-bottom:12px, --header-height:40px, --footer-height:26px, --fs-h1:clamp(46px, 7.8vw, 86px), --fs-statement:17px, --fs-body:13px, release padding-bottom:22px, and motion control bottom:18px. Do not remove the footer; reduce its gap and allow its right label to remain on the same line at widths above 600px.

I. FAILURE GUARDS

All visible elements have resting opacity:1. Add .is-loading only before the first paint. Use a two-rAF readiness gate: after DOMContentLoaded and resize measurement, request one rAF, then request a second rAF, and only then remove is-loading, set telemetry ready:true, and start drawing. If requestAnimationFrame is unavailable, use a 120ms timeout that removes is-loading, sets ready:true, starts the fallback interval at 30fps, and increments telemetry frames once per fallback tick.

Respect prefers-reduced-motion: reduce. In that mode, cancel CSS reveal animations, remove is-loading, keep every element at opacity:1, stop ring drift and group rotation at groupAngle:0 and translations:0, disable the background drift animations, and do not apply the release transform. Keep the scroll section readable and fully static. If canvas context acquisition returns null, hide the canvas with display:none and keep the HTML copy visible. If ResizeObserver is unavailable, use window resize. If the canvas backing width is below 2px, use 2px. Never throw from the resize or animation path. Add a window error listener before first paint. Keep a guard around context resetTransform so a lost canvas does not generate repeated console output.

J. THE EXACT JS

Place this JavaScript at the end of body. It must be copied exactly in structure, constants, selectors, hooks, and behaviour:

const NAME = "slipstream";
const state = {
  width: 0,
  height: 0,
  scale: 1,
  elapsed: 0,
  last: 0,
  scrollY: window.scrollY || 0,
  scrollDirty: true,
  paused: false,
  started: false,
  ready: false,
  fallback: false,
  effects: ["ring-drift", "group-rotation", "sticky-release", "load-ramp"]
};
window.__DEMO__ = {
  name: NAME,
  ready: false,
  frames: 0,
  effects: [],
  errors: []
};
window.addEventListener("error", function(event) {
  if (window.__DEMO__.errors.length < 50) {
    window.__DEMO__.errors.push(String(event.message || "window error"));
  }
});

const root = document.documentElement;
const stage = document.querySelector(".scroll-stage");
const canvas = document.querySelector("#tape");
const ctx = canvas && canvas.getContext("2d", { alpha: true });
const release = document.querySelector(".release-layer");
const motionButtons = Array.from(document.querySelectorAll("[data-motion-toggle]"));
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
const speeds = [4, 7, 11, 15, 18];
const translations = [0, 0, 0, 0, 0];
const baseRotations = [-90, -84, -78, -72, -66];
const revealDelays = [140, 260, 380, 500, 620];
const strokeWidths = [2, 4, 7, 10, 14];
const revealStart = [0, 0, 0, 0, 0];
const loadedAt = performance.now();

function markEffects() {
  window.__DEMO__.effects = state.effects.slice();
}

function setReady() {
  if (state.ready) return;
  state.ready = true;
  root.classList.remove("is-loading");
  window.__DEMO__.ready = true;
  markEffects();
}

function cubicOut(value) {
  const inverse = 1 - value;
  return 1 - inverse * inverse * inverse;
}

function measure() {
  state.width = window.innerWidth;
  state.height = window.innerHeight;
  state.scale = state.width <= 600 ? 1.10 : state.width <= 900 ? 1.25 : state.width <= 1199 ? 1.35 : 1.5;
  root.style.setProperty("--canvas-scale", String(state.scale));
  if (!canvas || !ctx) return;
  const width = Math.max(2, Math.min(1440, Math.floor(state.width * 0.75)));
  const height = Math.max(2, Math.min(960, Math.floor(state.height * 0.75)));
  canvas.width = width;
  canvas.height = height;
  canvas.style.width = state.width + "px";
  canvas.style.height = state.height + "px";
  const scaleX = width / state.width;
  const scaleY = height / state.height;
  const fitScale = Math.min(scaleX, scaleY, state.width > 1280 && state.height > 853 ? 0.6667 : 1);
  ctx.setTransform(fitScale, 0, 0, fitScale, 0, 0);
  state.scrollDirty = true;
}

function opacityForRing(index, now) {
  if (reduced.matches) return 1;
  const delay = revealDelays[index];
  if (now - loadedAt < delay) return 0;
  return Math.min(1, (now - loadedAt - delay) / 700);
}

function updateRelease() {
  if (!stage || !release) return;
  if (reduced.matches) {
    release.style.transform = "translate3d(0, 0, 0)";
    return;
  }
  const top = stage.offsetTop;
  const start = top + window.innerHeight;
  const end = top + stage.offsetHeight - window.innerHeight;
  const releaseStart = end - window.innerHeight * 0.25;
  const progress = Math.max(0, Math.min(1, (state.scrollY - releaseStart) / (window.innerHeight * 0.25)));
  const eased = cubicOut(progress);
  const distance = window.innerHeight * -0.10;
  release.style.transform = "translate3d(0, " + distance * eased + "px, 0)";
}

function draw(now, delta) {
  if (!ctx || !canvas) return;
  if (!state.paused && !reduced.matches) {
    state.elapsed += delta;
    const groupAngle = state.elapsed * 4;
    const baseWidth = Math.max(state.width * 1.5, 1300);
    for (let i = 0; i < 5; i += 1) {
      translations[i] = (translations[i] + speeds[i] * delta) % baseWidth;
    }
    const revealOpacity = [1, 1, 1, 1, 1];
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#0C0B0A";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(state.width * 0.06, state.height * 0.50);
    ctx.rotate(groupAngle * Math.PI / 180);
    const widthMultipliers = [1, 0.84, 0.68, 0.52, 0.36];
    const heightMultipliers = [1.22, 1.04, 0.86, 0.68, 0.5];
    const radiusMultipliers = [0.23, 0.205, 0.18, 0.155, 0.13];
    for (let i = 0; i < 5; i += 1) {
      const w = baseWidth * widthMultipliers[i];
      const h = Math.max(state.height * 1.5, 1000) * heightMultipliers[i];
      const radius = baseWidth * radiusMultipliers[i];
      const alpha = Math.min(revealOpacity[i], opacityForRing(i, now));
      ctx.save();
      ctx.translate(translations[i], 0);
      ctx.rotate(baseRotations[i] * Math.PI / 180);
      ctx.beginPath();
      ctx.roundRect(-w / 2, -h / 2, w, h, radius);
      ctx.lineWidth = strokeWidths[i];
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
      ctx.strokeStyle = i === 2 ? "#C8553D" : "#F2EFE9";
      ctx.globalAlpha = alpha;
      ctx.stroke();
      ctx.restore();
    }
    ctx.restore();
    ctx.globalAlpha = 1;
  } else {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#0C0B0A";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(state.width * 0.06, state.height * 0.50);
    const baseWidth = Math.max(state.width * 1.5, 1300);
    const widthMultipliers = [1, 0.84, 0.68, 0.52, 0.36];
    const heightMultipliers = [1.22, 1.04, 0.86, 0.68, 0.5];
    const radiusMultipliers = [0.23, 0.205, 0.18, 0.155, 0.13];
    for (let i = 0; i < 5; i += 1) {
      const w = baseWidth * widthMultipliers[i];
      const h = Math.max(state.height * 1.5, 1000) * heightMultipliers[i];
      const radius = baseWidth * radiusMultipliers[i];
      ctx.save();
      ctx.translate(translations[i], 0);
      ctx.rotate(baseRotations[i] * Math.PI / 180);
      ctx.beginPath();
      ctx.roundRect(-w / 2, -h / 2, w, h, radius);
      ctx.lineWidth = strokeWidths[i];
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
      ctx.strokeStyle = i === 2 ? "#C8553D" : "#F2EFE9";
      ctx.globalAlpha = opacityForRing(i, now);
      ctx.stroke();
      ctx.restore();
    }
    ctx.restore();
    ctx.globalAlpha = 1;
  }
}

function frame(now) {
  if (!state.last) state.last = now;
  const delta = Math.min(0.05, Math.max(0, (now - state.last) / 1000));
  state.last = now;
  draw(now, delta);
  if (state.scrollDirty) {
    updateRelease();
    state.scrollDirty = false;
  }
  window.__DEMO__.frames += 1;
  requestAnimationFrame(frame);
}

function startFallback() {
  if (state.fallback) return;
  state.fallback = true;
  const start = performance.now();
  setInterval(function() {
    const now = performance.now();
    draw(now, Math.min(0.05, (now - state.last) / 1000 || 0.033));
    state.last = now;
    updateRelease();
    window.__DEMO__.frames += 1;
  }, 33.333);
  setReady();
}

function setPaused(paused) {
  state.paused = paused;
  for (const button of motionButtons) {
    button.textContent = paused ? "Play motion" : "Pause motion";
    button.setAttribute("aria-pressed", paused ? "true" : "false");
  }
}

for (const button of motionButtons) {
  button.addEventListener("click", function() {
    setPaused(!state.paused);
  });
}

window.addEventListener("scroll", function() {
  state.scrollY = window.scrollY || 0;
  state.scrollDirty = true;
}, { passive: true });

window.addEventListener("resize", measure, { passive: true });
reduced.addEventListener("change", function() {
  state.scrollDirty = true;
});

measure();
markEffects();
if (typeof window.requestAnimationFrame === "function") {
  requestAnimationFrame(function() {
    requestAnimationFrame(function() {
      setReady();
      requestAnimationFrame(frame);
    });
  });
} else {
  startFallback();
}


---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Smolder

- Slug: `smolder`
- Page: https://landingpageprompts.com/prompts/smolder
- Effect: An 18-word hero is revealed by scroll progress, with each word cooling from an ember glow into bone-white locked text.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 48,480; total with repair and cross-check: 62,063
- Verification: 17/17 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - The delivered artifact is one valid index.html with no external media and contains exactly one h1 containing the exact 18-word Longhand paragraph.
  - At 1440x900, the document has vertical scroll height of 180vh, the hero measure is capped at 62ch, and the right half contains no visible content or controls.
  - Scrolling changes the 18 base word opacities from 0.14 toward 1, with each word offset by 18px relative to the previous word and ember duplicates returning to opacity 0 after cooling.
  - The page exposes window.__DEMO__ with name smolder, ready true after first paint, an incrementing frames value, four named effects, and no uncaught window errors during load and scroll.
  - With prefers-reduced-motion enabled, all entrance and hover transitions are disabled, all 18 words are readable, and the bottom navigation link retains an accessible name and visible focus-visible ring.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT

Build a single-file, scroll-mapped cinematic landing page for Longhand, a slow-reading essay platform. The output is exactly one index.html containing semantic HTML, plain CSS, and plain JavaScript. Set document.documentElement.lang to "en", set the document title to "Longhand — One long thought, every week", and set the viewport meta tag to width=device-width, initial-scale=1. The visual system is a warm-black editorial page with one 18-word opening paragraph as the hero. This is explicitly a scroll piece: the page must be taller than the viewport and use document scrolling to scrub the paragraph. At desktop widths of 901px and above, do not force overflow:hidden because the scroll mapping is the primary interaction. The body must have overflow-x:hidden, and the page must never produce horizontal overflow. At widths below 901px, retain normal vertical scrolling. The hero is left aligned to a 62ch measure, positioned in the lower two thirds of the first viewport, while the entire right half remains empty warm black. The hero paragraph uses clamp(28px, 4.6vw, 68px) and line-height 1.08. There is no navigation above the paragraph. A single 11px uppercase navigation line is pinned to the bottom of the first viewport.

Do NOT build a feed, article grid, like button, share control, account menu, carousel, modal, image, video, texture, paper grain, vellum surface, letterpress effect, decorative illustration, logo mark, gradient orb, star field, loading screen, cookie banner, or secondary content section. Do NOT add a hero image or any external media. Do NOT add a second paragraph, rotating testimonials, counters, pricing cards, or a footer CTA. Do NOT use React, Tailwind, GSAP, Three.js, Lottie, WebGL, canvas, SVG filters, remote fonts other than Google Fonts, mp4, webm, gif, remote images, CDN URLs, base64 assets, or third-party scripts. Do NOT use a timer to drive the permanent word reveal. Do not add hidden interactive controls. Every visible control must have an accessible name.

B. THE BACKDROP

Use one body background built from CSS gradients. The base color is #14100E. Add exactly two radial gradients with no external image: radial-gradient(circle at 12% 78%, rgba(255,140,40,0.055) 0%, rgba(255,140,40,0.022) 24%, transparent 54%), and radial-gradient(circle at 4% 92%, rgba(245,239,230,0.025) 0%, transparent 35%). Add one linear overlay: linear-gradient(180deg, rgba(255,255,255,0.012) 0%, transparent 28%, rgba(0,0,0,0.12) 100%). The gradient stops and positions are fixed. Do not animate background-position, blur, opacity, or gradient values.

There are 18 semantic word groups. Each group contains one base word span and one ember duplicate span. The duplicate is positioned absolutely inside a relatively positioned word group, has the same font metrics and text, and is colored #FF8C28 with text-shadow: 0 0 26px rgba(255,140,40,0.35). The base span is colored #F5EFE6. The base word is at opacity 1 when locked, while its color is visually softened by the surrounding black; the initial perceived unread state is #6B6259 through a controlled opacity ramp beginning at 0.14. The ember duplicate is visible only during the ignition phase and fades to opacity 0 after the word locks.

The document must have a scroll track height of 180vh for desktop and 220vh for mobile. The first viewport contains the fixed-position hero stage. The word positions are obtained from one getBoundingClientRect() read per animation frame on the paragraph container. The paragraph's document position is cached at startup and on resize, but the live container rect is read exactly once per rAF callback before updating the 18 words. The scroll progress is calculated from window.scrollY and the cached paragraph travel range. Each word uses a 34%-viewport travel window. A word's index offset is 18px of scroll later for every next word, implemented as progressOffset = wordIndex * 18 / viewportHeight. A word's reveal progress is clamp((progress - progressOffset) / 0.34, 0, 1). The base opacity is 0.14 + 0.86 * revealProgress. The ember opacity is a triangular ignition envelope: ramp from 0 to 1 over the first 12% of the word's 34% travel, then ramp from 1 to 0 over the next 12%, with the remaining 10% at 0. The ember duplicate therefore never animates text-shadow itself; only opacity is animated, preserving the performance constraint. Apply opacity to the 18 base spans and 18 ember spans per frame. Do not write any transform in the scrub loop.

There is no canvas. The canvas count is exactly 0, the canvas resolution is not allocated, and the canvas resolution trick is intentionally not used. The CSS background is resolution independent. The per-frame budget is 18 base opacity writes plus 18 ember opacity writes, one cached scrollY read, one paragraph rect read, and no layout reads for individual words. Use only opacity updates inside the rAF loop. Do not call getBoundingClientRect on any item inside the loop. The target is at least 20 frames per 1.2 seconds on a 1440x900 headless viewport; the 36 opacity writes are inexpensive and the loop must continue while scrolling. When scroll has not changed, the loop may still increment the telemetry frame counter but must not rewrite identical opacity values.

C. THE LAYER STACK

Build the layers back to front with these exact z-index values:

z-index: -3 for the body gradient background.
z-index: -2 for the optional non-interactive black vignette overlay, implemented as a body pseudo-element and containing no pointer events.
z-index: 0 for the document scroll track.
z-index: 10 for the fixed hero stage.
z-index: 20 for the eyebrow, hero title, and paragraph inside the stage.
z-index: 30 for the bottom navigation line.
z-index: 40 for the focus ring layer created by :focus-visible on the only visible navigation control.
z-index: 50 for no content; the telemetry object is not rendered.

The fixed hero stage has pointer-events:none except for the bottom navigation control. The paragraph remains selectable text and must not have pointer-events:none if that prevents text selection; set pointer-events:auto on the paragraph while keeping the decorative duplicate spans pointer-events:none. The body gradient must be fixed and the scroll track must provide actual document height.

D. TOKEN TABLE

Define these CSS custom properties in :root and use them everywhere:

--bg: #14100E;
--bone: #F5EFE6;
--ember: #FF8C28;
--ash: #6B6259;
--white: #F5EFE6;
--muted: rgba(245,239,230,0.58);
--faint: rgba(245,239,230,0.34);
--line: rgba(245,239,230,0.14);
--ember-soft: rgba(255,140,40,0.16);
--stage-height: 100dvh;
--track-height: 180vh;
--measure: 62ch;
--hero-top: 31vh;
--hero-left: clamp(28px, 8vw, 144px);
--hero-bottom: 15vh;
--hero-gap: 24px;
--eyebrow-size: 11px;
--eyebrow-tracking: 0.18em;
--title-size: clamp(28px, 4.6vw, 68px);
--title-leading: 1.08;
--title-weight: 450;
--title-tracking: -0.035em;
--nav-size: 11px;
--nav-tracking: 0.16em;
--nav-padding-inline: clamp(28px, 8vw, 144px);
--nav-padding-block: 18px;
--nav-gap: 28px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
--duration-load: 600ms;
--duration-hover: 180ms;
--stagger: 120ms;
--word-window: 0.34;
--word-index-offset-px: 18px;
--glow-r: 0;
--glow-g: 140;
--glow-b: 40;
--glow-radius: 26px;
--glow-alpha: 0.35;
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--ember);
--radius-pill: 999px;
--radius-control: 2px;
--max-width: 1440px;
--header-height: 0px;
--footer-height: 47px;

The font stack is "DM Sans", "Helvetica Neue", Arial, sans-serif for UI, and "Cormorant Garamond", Georgia, serif for the paragraph. Load exactly one permitted Google Fonts stylesheet for DM Sans and Cormorant Garamond with weights 400, 500, and 600 for DM Sans and 400, 500 for Cormorant Garamond. If the network request fails, use the listed system fallbacks without blocking first paint.

E. THE COMPOSITION

Use real header, main, and footer elements. The document structure is header#site-header, main#main-content containing section#hero, then footer#site-footer containing nav#bottom-nav. The header has height 0, padding 0, and contains no visible content. It may contain a visually hidden h1? Do not do that: the hero paragraph is the one h1. The h1 is the complete 18-word paragraph, with the exact text: "A quiet page can hold one thought without asking you to hurry through; read slowly, then carry it." The h1 must be the only h1 on the page.

The main element has min-height:var(--track-height), position:relative, and padding-top:var(--stage-height). The fixed hero stage is position:fixed, inset:0, height:var(--stage-height), width:100vw, and contains a content block with position:absolute, left:var(--hero-left), right:8vw, top:var(--hero-top), bottom:var(--hero-bottom), display:grid, grid-template-rows:auto 1fr, row-gap:var(--hero-gap), align-content:end, max-width:var(--measure). Because the right 8vw remains empty, the content width is capped at 62ch and does not stretch across the viewport. Use a single column; no cards or side illustrations.

The eyebrow is a p element with class eyebrow. Its exact copy is "LONGHAND / ISSUE 014". It is uppercase, font-size:var(--eyebrow-size), line-height:1, letter-spacing:var(--eyebrow-tracking), color:var(--faint), margin:0, and opacity 0 initially. The h1 is the paragraph itself, not a separate short title. Its width is 62ch, max-width:100%, margin:0, color:var(--bone), font-family:"Cormorant Garamond", Georgia, serif, font-size:var(--title-size), line-height:var(--title-leading), font-weight:var(--title-weight), letter-spacing:var(--title-tracking), text-wrap:balance, overflow-wrap:break-word. Each word is a span.word with position:relative, display:inline-block, white-space:nowrap. The base span has position:relative, z-index:1, and the ember span has position:absolute, inset:0, z-index:0, pointer-events:none, color:var(--ember), text-shadow:0 0 var(--glow-radius) rgba(var(--glow-r),var(--glow-g),var(--glow-b),var(--glow-alpha)); opacity 0.

The footer is position:fixed, left:0, right:0, bottom:0, height:var(--footer-height), z-index:30, border-top:1px solid var(--line), background:rgba(20,16,14,0.86), backdrop-filter:blur(8px). The navigation is display:flex, align-items:center, justify-content:space-between, height:100%, padding:0 var(--nav-padding-inline), gap:var(--nav-gap). It contains exactly one visible control, an a element with href="#current-issue", accessible name "Read the current issue", and exact copy "READ THE CURRENT ISSUE ↗". It also contains a non-interactive span with exact copy "ONE LONG PIECE / WEEK". The navigation line is 11px uppercase with letter-spacing var(--nav-tracking). The link uses color:var(--bone), text-decoration:none, border-bottom:1px solid transparent, padding:7px 0. The helper span uses color:var(--faint). The anchor is keyboard focusable and has a visible focus ring.

F. THE UI LANGUAGE

The only button-like control is the bottom navigation link. It has no filled background. Its default state is transparent with bone text and a 1px transparent bottom border. On hover, change color to var(--ember), border-bottom-color:var(--ember), and transform:translateY(-1px), with transition:color var(--duration-hover) var(--ease-standard), border-color var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-standard). On focus-visible, apply the exact focus ring box-shadow var(--focus-ring), outline:none, and retain the link's position. Do not add a pill button. The nav helper is a text label, not a control. All control hit areas are at least 44px high through nav padding and line-height.

G. MOTION

The permanent scrub is frame-rate bound to scroll. It starts from the page's current scroll position and updates the 18 base and 18 ember opacities from the paragraph's live rect and cached travel distance. It must not use setInterval, a synthetic scroll loop, or an autonomous timer. The initial page state is scrollY 0, with all base words at opacity 0.14 and all ember words at opacity 0.

The load animation is once-only and applies to the eyebrow and the h1 as two elements. The eyebrow animates from opacity 0, transform:translateY(18px), to opacity 1, transform:translateY(0), over 600ms with ease-out. The h1 follows after a 120ms delay using the same 600ms transform and opacity animation. Do not animate individual word shadows during load. The scrub may begin immediately and may override the h1's opacity only for the word spans, not the h1 container.

Stagger table:

eyebrow -> rise-and-fade -> delay 0ms
h1 -> rise-and-fade -> delay 120ms
base word 0 through word 17 -> scroll scrub -> no timer delay; index offset 0px through 306px
ember word 0 through word 17 -> scroll scrub ignition envelope -> same index offset as its base word
bottom navigation -> fade-in -> delay 240ms, 360ms duration

Named keyframes:

@keyframes riseAndFade { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes navFade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

Use animation-fill-mode:both. Remove the load animation from the h1 after 720ms only if doing so does not affect the scrubbed child opacities. The footer must remain readable if animation is interrupted.

H. THE RESPONSIVE TABLE

At 390x844, set --track-height:220vh; --hero-left:24px; --hero-top:24vh; --hero-bottom:96px; --hero-gap:16px; --measure:100%; --title-size:clamp(32px, 10vw, 48px); --title-leading:1.12; --eyebrow-size:10px; --nav-padding-inline:24px; --nav-padding-block:16px; --nav-gap:16px; --footer-height:64px. The navigation wraps to two rows only if required by width, using flex-wrap:wrap and row-gap:6px, with the link first and the helper second. Keep all text inside the viewport.

At 768x1024, set --track-height:200vh; --hero-left:56px; --hero-top:28vh; --hero-bottom:92px; --hero-gap:20px; --measure:62ch; --title-size:clamp(40px, 7vw, 60px); --nav-padding-inline:56px; --footer-height:56px. Keep the fixed stage height 100dvh.

At 1440x900, set --track-height:180vh; --hero-left:clamp(72px, 8vw, 144px); --hero-top:31vh; --hero-bottom:15vh; --measure:62ch; --title-size:clamp(28px, 4.6vw, 68px); --footer-height:47px. The hero must occupy the left 62ch and leave the right half empty.

At 1920x1080, set --hero-left:clamp(96px, 8vw, 176px); --hero-top:33vh; --hero-bottom:16vh; --measure:62ch; --title-size:68px; --track-height:180vh; --footer-height:47px. Do not scale the paragraph above 68px.

Add a max-height:760px breakpoint for short desktop windows: set --hero-top:18vh; --hero-bottom:80px; --title-size:clamp(28px, 4.2vw, 54px); --title-leading:1.1; --footer-height:47px. Add a max-height:600px breakpoint: set --hero-top:12vh; --hero-bottom:72px; --hero-gap:10px; --eyebrow-size:10px; --title-size:clamp(26px, 4vw, 44px); --title-leading:1.06; --footer-height:43px; --nav-padding-block:12px. The short-height overrides must preserve the full paragraph and bottom navigation.

I. FAILURE GUARDS

All visible resting elements must have opacity 1 after their one-time entrance animation, except the scroll-controlled word base spans and ember duplicates. The h1, eyebrow, footer, and navigation must never remain hidden if JavaScript fails. Put the default eyebrow opacity at 1 in CSS and apply the entrance animation through a class added by JavaScript, so pre-JS content is readable. The base word spans must default to opacity 0.14 and the ember duplicates to opacity 0. The page must be usable before JavaScript executes.

Use a two-rAF fallback. After first paint, requestAnimationFrame(function(){ requestAnimationFrame(function(){ telemetry.ready = true; }); });. In the main animation loop, after the first successful frame, set ready true if it is still false. If requestAnimationFrame is unavailable, run one opacity initialization call and set ready true without an exception. Wrap all JavaScript setup in try/catch, push caught messages into telemetry.errors, and do not log to the console.

Implement prefers-reduced-motion with @media (prefers-reduced-motion: reduce). Set animation:none, transition:none, scroll-behavior:auto. Set the eyebrow, h1, and footer to opacity 1 and transform:none. Set every base word to opacity 1 and every ember duplicate to opacity 0. Preserve the scroll-driven opacity mapping for base words, because it communicates reading position, but remove the load and hover transitions. The reduced-motion page must remain static and readable, with all 18 words at opacity 1 and no glow.

J. THE EXACT JS

Place this exact script at the end of body:

<script>
(() => {
  "use strict";
  const telemetry = { name: "smolder", ready: false, frames: 0, effects: [], errors: [] };
  window.__DEMO__ = telemetry;
  window.addEventListener("error", event => {
    telemetry.errors.push(String(event.message || "window error"));
  });

  const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
  const hero = document.getElementById("hero");
  const paragraph = document.getElementById("opening-paragraph");
  const footer = document.querySelector("#site-footer");
  const wordNodes = paragraph ? Array.from(paragraph.querySelectorAll(".word")) : [];
  const baseNodes = wordNodes.map(node => node.querySelector(".base-word"));
  const emberNodes = wordNodes.map(node => node.querySelector(".ember-word"));
  let cachedTop = 0;
  let cachedTravel = 1;
  let lastScrollY = -1;
  let lastProgress = -1;
  let rafId = 0;

  telemetry.effects.push("load-rise-fade", "scroll-word-reveal", "ember-ignition", "ember-cooling");

  function measure() {
    if (!paragraph) return;
    const rect = paragraph.getBoundingClientRect();
    const viewportHeight = Math.max(1, window.innerHeight);
    cachedTop = rect.top + window.scrollY;
    cachedTravel = Math.max(1, paragraph.offsetHeight + viewportHeight * 0.34);
  }

  function clamp(value, min, max) {
    return Math.max(min, Math.min(max, value));
  }

  function updateWords() {
    if (!paragraph || !wordNodes.length) return;
    const rect = paragraph.getBoundingClientRect();
    const viewportHeight = Math.max(1, window.innerHeight);
    const progress = clamp((viewportHeight * 0.34 - rect.top) / cachedTravel, 0, 1);
    if (Math.abs(progress - lastProgress) < 0.0001 && lastScrollY === window.scrollY) return;
    lastProgress = progress;
    lastScrollY = window.scrollY;

    for (let index = 0; index < wordNodes.length; index += 1) {
      const offset = index * 18 / viewportHeight;
      const local = clamp((progress - offset) / 0.34, 0, 1);
      const ignitionIn = clamp(local / 0.3529, 0, 1);
      const cooling = clamp((local - 0.3529) / 0.3529, 0, 1);
      const ember = ignitionIn >= 1 ? 1 - cooling : ignitionIn;
      baseNodes[index].style.opacity = String(0.14 + local * 0.86);
      emberNodes[index].style.opacity = reduce.matches ? "0" : String(ember);
    }
  }

  function frame() {
    telemetry.frames += 1;
    updateWords();
    if (!telemetry.ready) telemetry.ready = true;
    rafId = window.requestAnimationFrame(frame);
  }

  function start() {
    try {
      measure();
      updateWords();
      if (footer) footer.classList.add("is-ready");
      requestAnimationFrame(() => requestAnimationFrame(() => {
        telemetry.ready = true;
      }));
      rafId = window.requestAnimationFrame(frame);
    } catch (error) {
      telemetry.errors.push(String(error && error.message ? error.message : error));
      telemetry.ready = true;
    }
  }

  window.addEventListener("resize", measure, { passive: true });
  window.addEventListener("scroll", measure, { passive: true });
  start();
})();
</script>

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Solstice

- Slug: `solstice`
- Page: https://landingpageprompts.com/prompts/solstice
- Effect: A 60-second solar arc continuously remaps the page from dawn amber through noon white-blue to dusk magenta.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 49,170; total with repair and cross-check: 104,409
- Verification: 19/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - At 1440x900, document.documentElement.scrollHeight does not exceed innerHeight, overflow is hidden, and exactly one h1 with the visible text SOLSTICE exists inside real header, main, nav, and footer landmarks.
  - Over a 1200ms interval at 1440x900, window.__DEMO__.frames increases by at least 20, window.__DEMO__.ready is true, and the object has the exact keys name: solstice, ready, frames, effects, and errors.
  - With prefers-reduced-motion set to reduce, the background and visible content are static, the clock reads 12:00:00, the sun remains at x=50% and y=17%, and every visible text element has opacity 1.
  - At 390x844, 768x1024, 1440x900, and 1920x1080, scrollWidth is no greater than clientWidth, all four primary labels are present, and no visible control lacks an accessible name or a 3px focus-visible outline.
  - The page creates no network requests other than the permitted Google Fonts stylesheet and contains no img, picture, video, base64 media, external script, external stylesheet, or framework dependency.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT

Build one complete, valid index.html for a cinematic single-viewport landing page named “SOLSTICE”. The document title must be “SOLSTICE — Solar Energy, From First Light to Full Potential”. Set the root language to lang="en". The visual subject is a solar-energy company whose day begins in amber dawn, reaches white-blue solar noon, and closes in magenta dusk while the sun travels from left to right on a wide 60-second arc. The interface must communicate dependable energy, precision, and continuous operation rather than a consumer electricity shop.

The page structure must use one real header element, one nav element, one main element, one real footer element, and exactly one h1. The h1 contains two spans: the eyebrow line “ENERGY IN MOTION” and the company line “SOLSTICE”; the company line is the page’s principal title. Use semantic section elements for the hero copy, telemetry cluster, primary actions, and status rail. Every visible link, button, and clock remains a real interactive or semantic element with an accessible name. Decorative SVG, gradients, and generated particles must use aria-hidden="true".

Desktop viewport rule: from 901px through 1920px, set html and body to width:100%; height:100%; and the document shell to min-height:100dvh; height:100dvh; overflow:hidden. The only allowed vertical scrolling is at 900px and below, where set height:auto, min-height:100dvh, overflow-x:hidden, and allow normal document scrolling. At every tested width, html, body, and the document shell must have width:100% and max-width:100%; no child may extend beyond the viewport. Prevent horizontal overflow with overflow-x:clip on the page shell, with overflow-x:hidden as the fallback.

Responsive targets are 390x844, 768x1024, 1440x900, and 1920x1080. The implementation must remain legible and free of clipped text at all four sizes. The single rAF visual system must sustain at least 20 frames per 1.2 seconds on a 1440x900 headless viewport. Cache all DOM reads outside the loop. In the loop, animate only transform and opacity. Do not read layout measurements in the loop and do not call getBoundingClientRect, offsetWidth, offsetHeight, getComputedStyle, canvas measureText, or querySelector from the loop.

Do NOT build a navigation drawer, hamburger menu, account area, pricing table, product marketplace, article grid, form, modal, cookie banner, authentication flow, logo carousel, third-party map, image gallery, or secondary page. Do not add a second h1. Do not use React, Tailwind, GSAP, Three.js, Lottie, WebGL, remote media, mp4, webm, animated GIF, remote image, base64 image, icon font, analytics request, or third-party CDN. The only permitted network request is one Google Fonts stylesheet for “DM Sans” at weights 400, 500, 600 and “IBM Plex Mono” at weights 400, 500, loaded with display=swap. Include robust system fallbacks. The resulting file must be under 90 KB and produce no console output.

B. THE BACKDROP

Create a full-viewport .backdrop fixed at inset:0 with z-index:0 and overflow:hidden. It must contain 24 deterministic CSS-drawn star or dust points, 9 large atmospheric cloud ellipses, 1 SVG horizon system, 1 canvas particle field, and 1 canvas sun/reflection compositor. All visible imagery is CSS, SVG, or canvas. Do not use external images.

The page atmosphere has exactly 12 radial-gradient and linear-gradient layers. Its base background must be a linear gradient to bottom. The initial dawn gradient stops are 0% #24152d, 32% #5a2942, 58% #c55245, 78% #f59e54, 92% #fed7a1, and 100% #fff0c7. The noon gradient stops are 0% #123a67, 30% #276b98, 55% #8fcbe3, 78% #dff4fb, 92% #fff9df, and 100% #ffffff. The dusk gradient stops are 0% #18152f, 30% #3d244e, 54% #773356, 76% #bd4768, 91% #e46b6d, and 100% #f7a56f. At runtime, interpolate all six stop colors from dawn to noon during progress 0.000–0.500, then from noon to dusk during progress 0.500–1.000. Convert each #RRGGBB component to a normalized channel, perform linear RGB interpolation, clamp the result to 0–255, and round to the nearest integer. Reassign the complete background string at most 30 times per second, every 33ms, while the sun transform updates every animation frame. This is a scripted compositor update, not layout measurement.

Add a full-width upper glow with a radial-gradient centered at the sun’s x position and 50% y position. Dawn center color is rgba(255,183,91,0.88), noon is rgba(255,255,231,0.98), and dusk is rgba(242,91,122,0.82). At rAF time, set CSS custom properties --sun-x and --glow-x and rewrite the glow background string. The glow uses blur-radius equivalent 70px through one absolutely positioned ellipse with filter:blur(38px); its opacity is 0.72. A second narrow horizon bloom is a 12px-high ellipse centered on the horizon with blur radius 24px and opacity 0.68.

The 24 stars have opacity 0.16–0.54, diameter 1–3px, and individual drift periods between 36s and 72s. Their horizontal travel ranges from 0px to 16px; vertical travel ranges from 0px to 8px. They loop without resizing. The 9 cloud ellipses use widths from 280px to 760px, heights from 32px to 88px, blur from 18px to 44px, horizontal opacity 0.08–0.20, and drift periods from 70s to 118s. Cloud drift is transform-only and stays within x:-220px to x:220px relative to its placement.

The horizon is one SVG with viewBox="0 0 1920 1080" and preserveAspectRatio="none. It contains exactly one hard line from x=0 to x=1920 at y=742. The line uses stroke-width:1, vector-effect:non-scaling-stroke. It appears #fff2ce at dawn, #e8fbff at noon, and #ffc0a8 at dusk; interpolate this color in the same palette update. Beneath it, use one SVG rect of height 338 with a 42px vertical blur filter and a 52px linear gradient whose top color is the interpolated horizon color at 0.36 alpha and whose final color is transparent. Do not blur the hard line itself.

The canvas compositor is 480x270 CSS pixels by default, backing-store resolution 960x540 using devicePixelRatio clamped to 2, so it stays below 1036800 pixels at 1920x1080. At smaller viewports, set backing-store width to floor(cssWidth * 2) and height to floor(cssHeight * 2), with those totals capped at 960x540. Scale with CSS width:100%; height:100%. Redraw it when its backing resolution changes and when the 33ms palette tick changes. Precompute all 72 particles as objects containing normalized x, base y, radius, speed, amplitude, phase, and a precomputed warm/cool tint. The sun uses a 22px-radius core, a 7px amber-white corona ring, and a 64px radial corona at 0.16 alpha in the SVG or DOM layer. Its reflection is a canvas ellipse at the same normalized x, below the horizon, with radiusX 15px, radiusY 4px, vertical scale 0.24, and blur 12px represented by three concentric translucent ellipses rather than ctx.filter. Precompute color strings when the palette changes. Per frame, the rAF handler performs 72 cheap transform-equivalent canvas redraws only when a new palette bucket is active, and the visible sun, reflection, glow, and horizon wrapper are moved using cached normalized coordinates. The per-frame work budget is no more than 1 style write for sun transform, 1 style write for reflection transform, 1 style write for glow x, and 1 canvas redraw only on 33ms boundaries. Target 72 or fewer canvas path fills and 25 or fewer color string updates per 33ms palette bucket.

C. THE LAYER STACK

Build the visual and content stack back to front with these exact z-index values:

z-index 0: .backdrop, containing the base gradient, stars, clouds, upper atmospheric bloom, and solar glow.
z-index 1: .star-field with 24 generated children.
z-index 2: .cloud-field with 9 generated children.
z-index 3: .solar-system, containing the .sun-disc, its two corona rings, and its .sun-reflection.
z-index 4: .horizon-svg with the soft bloom rect and hard 1px line.
z-index 5: .particle-canvas.
z-index 6: .vignette, a pointer-events:none radial overlay that darkens all edges by 18%.
z-index 10: header.site-header.
z-index 20: main.hero.
z-index 30: footer.site-footer and the bottom status rail.
z-index 40: .focus-halo if required, though prefer native outline.
z-index 50: .grain, an inline SVG feTurbulence texture at opacity 0.035, pointer-events:none.

The header, main, and footer must be position:relative with their declared z-index. The canvas and horizon are aria-hidden. Ensure pointer events do not obstruct controls. Decorative layers must not be focusable.

D. TOKEN TABLE

Define every reusable visual value in :root using these exact tokens:

--ink:#fdfaf3;
--ink-muted:rgba(253,250,243,0.68);
--ink-dim:rgba(253,250,243,0.46);
--accent:#fb923c;
--accent-bright:#ffd29a;
--accent-deep:#b7432f;
--line:rgba(255,255,255,0.22);
--glass:rgba(17,23,39,0.24);
--glass-strong:rgba(13,18,32,0.58);
--focus:#fff4c7;
--header-h:72px;
--footer-h:72px;
--page-x:clamp(24px,5.2vw,100px);
--page-y:clamp(28px,4.4vh,44px);
--content-max:1760px;
--hero-columns:minmax(0,1.35fr) minmax(320px,0.65fr);
--hero-gap:clamp(36px,7vw,128px);
--h1-size:clamp(64px,8.4vw,150px);
--h1-line:0.82;
--h1-tracking:-0.075em;
--eyebrow-size:11px;
--eyebrow-tracking:0.28em;
--lede-size:clamp(16px,1.18vw,20px);
--lede-line:1.55;
--lede-width:560px;
--button-h:54px;
--button-pad-x:25px;
--button-radius:999px;
--pill-pad-x:14px;
--pill-h:32px;
--clock-size:12px;
--clock-tracking:0.14em;
--card-w:356px;
--card-pad:24px;
--radius-card:18px;
--radius-control:999px;
--sun-size:44px;
--reflection-w:32px;
--reflection-h:8px;
--horizon-y:68.7%;
--motion-fast:180ms;
--motion-base:520ms;
--motion-slow:900ms;
--ease-out:cubic-bezier(0.16,1,0.3,1);
--ease-arc:cubic-bezier(0.22,0.68,0.18,1);
--safe-bottom:env(safe-area-inset-bottom,0px);
--safe-right:env(safe-area-inset-right,0px);
--safe-left:env(safe-area-inset-left,0px).

Do not introduce off-token typography, spacing, color, or sizing for major components. Sub-components may use 4px multiples or explicit pixel values documented in the composition.

E. THE COMPOSITION

Create a .site-shell with max-width:1920px; margin-inline:auto; position:relative; min-height:100dvh; background:transparent. At desktop, the shell forms a 72px header, flexible hero, and 72px footer using display:grid; grid-template-rows:var(--header-h) minmax(0,1fr) var(--footer-h).

The header is a real header.site-header with height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 var(--page-x). The left anchor is an accessible home link named “SOLSTICE home”; its visible text is “SOLSTICE” in 13px, 600 weight, letter-spacing:0.18em. The middle nav contains exactly two links: “Mission” and “Technology”. Right-align a visible status pill containing a 6px green dot and the exact text “GRID ONLINE”. Give the nav 8px gap. On widths below 701px, hide the center nav with display:none; keep the logo and status pill.

The main.hero occupies the center grid row and uses max-width:var(--content-max); width:100%; margin:0 auto; padding:var(--page-y) var(--page-x); display:grid; grid-template-columns:var(--hero-columns); align-items:center; gap:var(--hero-gap). Left hero copy contains exactly this hierarchy and copy: eyebrow “ENERGY IN MOTION”; the single h1 with “SOLSTICE”; lede “Capture the day’s brightest hours. Solstice turns clean solar power into steady, intelligent energy for every horizon.”; CTA row with a primary link named “Explore our technology” with visible label “EXPLORE TECHNOLOGY” and a secondary link named “See our mission” with visible label “OUR MISSION”. The h1 is 1–150px according to the responsive tokens. Its eyebrow span is 11px, 500 weight, uppercase, 0.28em tracking, and must be positioned as a block above the company line. The lede max-width is 560px. Buttons sit in a 12px gap flex row.

The right hero instrument is a 356px wide .instrument-card with 24px padding, 18px radius, border:1px solid rgba(255,255,255,0.18), background:linear-gradient(145deg,rgba(14,20,38,0.56),rgba(14,20,38,0.22)), backdrop-filter:blur(18px), box-shadow:0 24px 70px rgba(7,10,24,0.24). It contains a top row labelled “LOCAL SOLAR TIME” and a 12px monospace simulated clock with exact initial text “05:42:18”. The clock has aria-label="Simulated local solar time"; do not mark it aria-live. Add a horizontal 1px separator with 18px vertical margins. Add a 184px-wide arc mini-chart rendered as inline SVG: one 0.8px background arc, one 2px accent arc with stroke-dasharray:289 and stroke-dashoffset:289, and a 5px moving sun marker. Beneath it, place three numeric rows: “CAPTURE” with value “24.8 GWh”, “PEAK OUTPUT” with value “1.42 GW”, and “CO₂ AVOIDED” with value “18,604 t”. Each label is 9px uppercase with 0.18em tracking; each value is 15px monospace. Add a footer pill with exact text “98.7% AVAILABILITY”.

The bottom footer is a real footer.site-footer with height:72px; padding:0 var(--page-x); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-top:1px solid var(--line); background:linear-gradient(to top,rgba(7,10,24,0.36),transparent). Left text is “POWERED BY THE SUN”. Center is a status rail containing “DAWN”, a 54px line, “NOON”, and “DUSK”; its active label changes by phase. Right text is “40.7128° N / 74.0060° W”. Use 10px monospace uppercase text and 0.18em tracking.

The hard horizon visually crosses at 68.7% viewport height. Keep it behind content but above the lower fields. Place the sun arc from x=8% at y=79% through x=50% at y=17% to x=92% at y=79%. The reflection’s center is x equal to the sun x and y equal to 74.5% plus 7.5% of the sun’s altitude loss. Its opacity is 0.20 at dawn, 0.14 at noon, and 0.25 at dusk.

F. THE UI LANGUAGE

The primary link is 54px high with 25px horizontal padding, 999px radius, 12px monospace font, 600 weight, 0.12em tracking, and no visible border. Its exact resting gradient is linear-gradient(135deg,#fff1ce 0%,#ffd09a 48%,#fb923c 100%); text is #2a1730. On hover, transform:translateY(-2px); background:linear-gradient(135deg,#ffffff 0%,#ffe4bd 48%,#ffad65 100%); box-shadow:0 10px 28px rgba(251,146,60,0.30). On active, transform:translateY(0); box-shadow:none. Its focus-visible ring is 3px solid var(--focus), offset 4px.

The secondary link is 54px high, 25px horizontal padding, 999px radius, 1px solid rgba(255,255,255,0.52), background:rgba(12,18,34,0.18), text #fffaf1. On hover, background:rgba(255,255,255,0.12), border-color:rgba(255,255,255,0.82), transform:translateY(-2px). On active, transform:translateY(0).

The status pill is 32px high with 14px horizontal padding, 999px radius, border:1px solid rgba(255,255,255,0.22), background:rgba(11,17,32,0.26), and 10px monospace uppercase text. The online dot is 6px, #9ff0bb, with box-shadow:0 0 12px rgba(159,240,187,0.74).

All links use color:inherit, text-decoration:none, cursor:pointer. Every interactive target has a minimum 44px hit area, including header links whose visual height is smaller. Header link hover opacity transitions from 1 to 0.72 over 180ms. Global focus-visible is outline:3px solid var(--focus); outline-offset:4px. Do not remove outline without replacing it.

G. MOTION

Use the following initial stagger. Delays start after the first paint. Elements must already be present and readable.

Header logo: opacity 0 to 1 and translateY(-10px) to translateY(0), 520ms, delay 80ms.
Header nav links: opacity 0 to 1 and translateY(-8px) to translateY(0), 520ms, delays 140ms and 190ms.
Grid status pill: opacity 0 to 1 and scale(0.96) to scale(1), 520ms, delay 220ms.
Hero eyebrow: opacity 0 to 1 and translateY(16px) to translateY(0), 720ms, delay 100ms.
H1 company line: opacity 0 to 1 and translateY(28px) to translateY(0), 900ms, delay 160ms.
Hero lede: opacity 0 to 1 and translateY(18px) to translateY(0), 720ms, delay 300ms.
Primary CTA: opacity 0 to 1 and translateX(-16px) to translateX(0), 720ms, delay 410ms.
Secondary CTA: opacity 0 to 1 and translateX(-16px) to translateX(0), 720ms, delay 470ms.
Instrument card: opacity 0 to 1 and translateY(22px) to translateY(0) and scale(0.98) to scale(1), 900ms, delay 280ms.
Footer status rail: opacity 0 to 1 and translateY(10px) to translateY(0), 720ms, delay 520ms.
Footer metadata: opacity 0 to 1, 720ms, delay 600ms.

Named keyframes must be enter-up, enter-right, reveal-card, and drift-cloud. enter-up runs from opacity:0; transform:translateY(22px) to opacity:1; transform:translateY(0). enter-right runs from opacity:0; transform:translateX(-18px) to opacity:1; transform:translateX(0). reveal-card runs from opacity:0; transform:translateY(22px) scale(0.98) to opacity:1; transform:translateY(0) scale(1). drift-cloud alternates 0%, 100%, and 0% translate positions defined per child. Apply animation-fill-mode:both. Do not animate height, width, top, left, filter, background-position, or box-shadow continuously in the rAF loop.

The solar cycle duration is 60000ms. Progress starts at 0 on load and advances from elapsed modulo 60000 divided by 60000. Sun x is lerp from 0.08 to 0.92. Sun y follows a quarter ellipse: y=0.79-0.62*sqrt(max(0,1-pow((x-0.5)/0.42,2))). This places the apex at progress 0.5. The active phase label is DAWN for p<0.25, NOON for p from 0.25 through 0.75, and DUSK for p>0.75. The clock maps p=0 to 05:42:00 and p=0.5 to 12:00:00 and p=1 to 18:18:00, using piecewise linear interpolation in minutes. Format as HH:MM:SS.

H. RESPONSIVE TABLE

At 1440x900 and 1920x1080, use the default tokens. Keep the hero centered, card width 356px, header/footer 72px, and page-x clamp values.

At 768x1024 and all widths from 901px to 1100px, set --page-x:42px; --page-y:30px; --hero-columns:minmax(0,1.2fr) minmax(290px,0.8fr); --hero-gap:42px; --card-w:310px; --card-pad:20px; --h1-size:92px; --lede-size:17px. Footer status rail remains visible. At widths 901–1100, header nav gap is 6px and header status pill hides only its text through display:none inside the pill while preserving the named anchor if that pill is interactive; because the status pill is non-interactive, hide the entire pill and its adjacent gap with display:none.

At max-width:900px, set html, body, and .site-shell to height:auto, min-height:100dvh, overflow:visible; set .site-header height:64px; grid-template-columns:1fr auto; padding-inline:22px. Set .site-footer height:auto, min-height:72px; padding:20px 22px calc(20px + var(--safe-bottom)); grid-template-columns:1fr auto; row-gap:16px. Set main.hero height:auto; grid-template-columns:1fr; gap:32px; padding:54px 22px 46px. Set --h1-size:78px; --page-x:22px; --card-w:min(100%,420px); --instrument-card max-width:100%. Put the instrument after the copy. The horizon remains fixed and follows the viewport while the document scrolls.

At max-width:600px, set --page-x:18px; --page-y:22px; --h1-size:clamp(58px,19vw,82px); --eyebrow-size:10px; --lede-size:16px; --lede-line:1.5. Header padding-inline:18px; footer padding-inline:18px. Hero padding:46px 18px 40px. CTA row is display:grid; grid-template-columns:1fr; width:min(100%,340px); gap:10px; both controls width:100%. Footer metadata spans both columns on its own row; footer grid-template-columns:1fr. Instrument width:100%, max-width:420px, and min-width:0. Status rail display:none. Header center nav remains display:none.

At max-height:760px and min-width:901px, set --page-y:20px; --button-h:48px; --card-pad:18px; --h1-size:104px; --lede-size:16px. Header and footer remain 64px and 64px. Hero grid is align-items:center; instrument arc chart height is 154px; three telemetry rows use 13px vertical padding.

At max-height:680px and min-width:901px, set --page-y:14px; --header-h:60px; --footer-h:60px; --button-h:44px; --card-pad:15px; --card-w:310px; --h1-size:82px; --lede-size:15px; --lede-line:1.38. Reduce eyebrow top/bottom spacing by 6px, CTA top margin to 24px, card row gaps to 9px, and mini-chart to 128px. If content would exceed 600px of hero height, allow only the main hero to scroll internally; keep header and footer fixed to the shell.

I. FAILURE GUARDS

Every entry animation must start with opacity 0 only within a .motion-ready wrapper, and after animation completion its computed opacity must be 1. If a CSS animation is unsupported, failed, or cancelled, JavaScript must clear animation-name and set opacity 1 and transform:none on all [data-enter] elements after 1800ms. Resting opacity for all visible content must be 1.

The 60-second cycle must start only after first paint. Wrap runtime setup in requestAnimationFrame, then requestAnimationFrame, then call startRuntime(). This two-rAF fallback guarantees CSS entry animations and initial paint have begun before the telemetry object is marked ready. A missing canvas 2D context must not throw: hide only the canvas particle layer, keep CSS sun, reflection, gradient, and clock active, push “canvas-unavailable” into effects, and continue the rAF loop. Missing document.fonts must not block readiness.

Inside the prefers-reduced-motion:reduce block, set all *, *::before, and *::after to animation-duration:0.001ms!important; animation-iteration-count:1!important; transition-duration:0.001ms!important; scroll-behavior:auto!important. Set [data-enter], .star, .cloud, .grain to animation:none!important; opacity:1!important; transform:none!important. Freeze the sun at x=0.50, y=0.17, palette at noon, clock at 12:00:00, and the mini-chart at noon. Continue one requestAnimationFrame telemetry loop only if necessary to increment frames, but do not repaint changing visual state. The page must remain complete and readable.

J. THE EXACT JS

Place one script before </body>. Use “use strict”. Create the exact telemetry object first with:
window.__DEMO__ = { name: 'solstice', ready: false, frames: 0, effects: [], errors: [] };
Register window error handling immediately, with preventDefault disabled and no console output. Push String(event.message || 'window-error') into window.__DEMO__.errors. Register unhandledrejection similarly. Register each completed entry animation by listening for animationend on [data-enter], pushing “enter-ui” once. Push “palette-cycle”, “solar-arc”, “canvas-particles”, and “reduced-motion-static” when those systems start. Do not push duplicate effect names.

Cache the following once in startRuntime(): document.documentElement, body, backdrop, sun, corona, reflection, glow, miniMarker, arc, card, clock, phaseLabel, canvas, and a precomputed NodeList of stars, clouds, and [data-enter] elements. Use cached viewport dimensions from innerWidth and innerHeight once per resize event, never inside the loop. The resize handler is passive and only calls resizeCanvas(), which writes canvas dimensions and cached cssWidth/cssHeight values.

Use 72 deterministic particles generated with a seeded integer function:
let seed=73421;
function rand(){ seed=(seed*1664525+1013904223)>>>0; return seed/4294967296; }
Store particle fields as x=rand(), y=0.18+rand()*0.67, r=0.4+rand()*1.8, speed=0.004+rand()*0.012, amp=2+rand()*7, phase=rand()*6.283185307, alpha=0.10+rand()*0.34. Precompute no per-frame object allocations.

Use these exact helpers:
const clamp=(v,a,b)=>Math.min(b,Math.max(a,v));
const lerp=(a,b,t)=>a+(b-a)*t;
const mixColor=(a,b,t)=>'rgb('+Math.round(lerp(a[0],b[0],t))+','+Math.round(lerp(a[1],b[1],t))+','+Math.round(lerp(a[2],b[2],t))+')';
const rgba=(c,a)=>'rgba('+c[0]+','+c[1]+','+c[2]+','+a+')';
const smooth=(t)=>t*t*(3-2*t);
const DAWN=[36,21,45], NOON=[18,58,103], DUSK=[24,21,47];
const DAWN_LOW=[245,158,84], NOON_LOW=[220,244,251], DUSK_LOW=[228,107,109];
const GLOW_DAWN=[255,183,91], GLOW_NOON=[255,255,231], GLOW_DUSK=[242,91,122];
const REF_DAWN=[255,190,103], REF_NOON=[240,253,255], REF_DUSK=[247,112,128];

paletteAt(p) must return p<=0.5 ? {low:mixColor(DAWN_LOW,NOON_LOW,smooth(p*2)),glow:mixColor(GLOW_DAWN,GLOW_NOON,smooth(p*2)),ref:mixColor(REF_DAWN,REF_NOON,smooth(p*2))} : {low:mixColor(NOON_LOW,DUSK_LOW,smooth((p-0.5)*2)),glow:mixColor(GLOW_NOON,GLOW_DUSK,smooth((p-0.5)*2)),ref:mixColor(REF_NOON,REF_DUSK,smooth((p-0.5)*2))}.
Each low and glow color object must have its three channel values available for rgba conversion; therefore use rgb arrays for those entries instead of strings: [36,21,45], [18,58,103], [24,21,47], [245,158,84], [220,244,251], [228,107,109], and glow arrays as listed. The final CSS background is:
'linear-gradient(to bottom,'+rgba(colors[0],1)+' 0%,'+rgba(colors[1],1)+' 32%,'+rgba(colors[2],1)+' 58%,'+rgba(colors[3],1)+' 78%,'+rgba(colors[4],1)+' 92%,'+rgba(colors[5],1)+' 100%)'
Generate the six arrays by mixing each matching DAWN and NOON stop, or each matching NOON and DUSK stop. Assign it to backdrop.style.background only when the 33ms bucket changes. Set glow.style.transform once per rAF to translate3d(calc(var(--sun-x) - 50%),-18%,0), and set root.style.setProperty('--glow-x',(x*100).toFixed(2)+'%').

For normal motion set start=performance.now() and define frame(now):
window.__DEMO__.frames+=1;
const p=((now-start)/60000)%1;
const x=lerp(0.08,0.92,p);
const q=(x-0.5)/0.42;
const altitude=Math.sqrt(Math.max(0,1-q*q));
const y=0.79-0.62*altitude;
sun.style.transform='translate3d('+(x*100).toFixed(3)+'vw,'+(y*100).toFixed(3)+'vh,0)';
corona.style.transform='translate3d('+(x*100).toFixed(3)+'vw,'+(y*100).toFixed(3)+'vh,0) scale(1)';
reflection.style.transform='translate3d('+(x*100).toFixed(3)+'vw,'+(0.745+(1-altitude)*0.075)*100+'.000vh,0)';
miniMarker.setAttribute('transform','translate(92 '+x*184+',92 -46*altitude+')');
if(now-lastPaint>=33){ lastPaint=now; applyPalette(p); updateClock(p); updateTelemetry(p); drawParticles(p); }
requestAnimationFrame(frame).
Do not call setAttribute on miniMarker every frame; update its transform only in the 33ms palette bucket. The initial transform values are written before the loop.

updateClock(p) maps p to total minutes: p<0.5 ? lerp(342,720,p*2) : lerp(720,1098,(p-0.5)*2). Convert floor(totalMinutes*60) into hours, minutes, seconds, and set clock.textContent to padded values only when the second changes. updateTelemetry(p) sets the active phase text, updates mini arc dashoffset from 289 to 0 by p, and updates reflection opacity.

drawParticles(p) clears with clearRect, paints each particle at px=(particle.x*100*cachedWidth+Math.sin(p*6.283+phase)*amp)*scale, py=(particle.y*100*cachedHeight+p*speed*cachedHeight)%cachedHeight. Keep every wrapped y within cachedHeight. Paint only a 1.4px radius soft point and skip particles where opacity is below 0.12. Do not use ctx.filter, ctx.shadowBlur, or gradients inside the particle loop. If ctx exists, fill a precomputed current particle tint string and call ctx.beginPath/arc/fill at most 72 times.

For reduced motion, set p=0.5, call applyPalette(0.5), updateClock(0.5), updateTelemetry(0.5), and the exact noon transform values x=0.50, y=0.17, reflection y=0.7825. Push “reduced-motion-static”. Increment telemetry frames once per rAF with a separate loop that performs no DOM writes. Set window.__DEMO__.ready=true after startRuntime returns.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Tally

- Slug: `tally`
- Page: https://landingpageprompts.com/prompts/tally
- Effect: A full-viewport harbour LED lattice whose mint, slate, and amber pixels behave like a live departure board beneath a deliberately asymmetric navigation layer.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 42,733; total with repair and cross-check: 100,714
- Verification: 20/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - The page loads as a single index.html with exactly one h1, semantic header/main/footer/nav elements, no external media, and no horizontal overflow at 390×844, 768×1024, 1440×900, and 1920×1080.
  - At 1440×900, document.documentElement.scrollHeight equals the viewport height, body overflow is hidden, and the canvas presents a 96×40 lattice of 3,840 fixed-pitch dots using the specified slate, mint, and amber colours.
  - After two animation frames, window.__DEMO__.name is "tally", window.__DEMO__.ready is true, window.__DEMO__.frames is greater than 0, and the effects array contains "wave-sweep", "pointer-hotspot", and "load-wipe" unless prefers-reduced-motion is active.
  - During a normal 1.2-second sample at 1440×900, the rAF loop increments window.__DEMO__.frames by at least 20, makes no console output, records no uncaught errors, and does not call getBoundingClientRect inside the animation loop.
  - With prefers-reduced-motion: reduce, the page remains readable and static, the rAF animation loop is not started, no amber flash is scheduled, and the canvas still contains a complete static 3,840-dot lattice.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT

Build one complete, dependency-free index.html for Northlight, a regional ferry and harbour operator publishing live sailings, tide windows, and berth status. The page is a single-viewport cinematic landing page whose viewport is itself the departure display. Set the document title to “Northlight — Live Harbour Departures”, set the document language to en-GB, and include a concise meta description: “Live ferry sailings, tide windows, and berth departures from Northlight Harbour.” Add a width=device-width, initial-scale=1 viewport meta tag.

The desktop canvas must occupy the entire 100dvh viewport. At viewport widths of 901px or greater, set html and body to width:100%, height:100dvh, overflow:hidden. At widths of 900px or less, allow vertical document scrolling with overflow-x:hidden. This is not a scroll piece: no section may induce a second page or horizontal scrollbar. The layout must remain usable at 390×844, 768×1024, 1440×900, and 1920×1080.

Use semantic page structure: one header, one main, one footer, and one navigation. Include exactly one h1. Every visible link, button, and table control must have an accessible name. Every keyboard-focusable control must have a visible focus-visible ring. Do not build a video, image, photograph, card, glass panel, frosted surface, decorative border, modal, cookie banner, account menu, route planner, map, ticket basket, or secondary content section. Do not use React, Tailwind, GSAP, Three.js, Lottie, external media, remote images, base64 assets, third-party scripts, or a third-party CDN. Google Fonts is the only permitted network request; load “IBM Plex Mono” at weights 400, 500, and 600 and provide ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono”, monospace as the fallback stack. If the font request fails, the page must remain fully readable.

B. THE BACKDROP

The only visual media is one full-bleed canvas element with id="tally-canvas". It contains exactly 96 columns and 40 rows, for exactly 3,840 lattice points. The coordinate-space pitch is exactly 10px, producing a 960×400 source lattice. Keep the canvas at position:fixed with inset:0, width:100vw, and height:100dvh. Scale the source coordinate space to the viewport with the browser’s canvas presentation size. This low-resolution composition is deliberate: use a 960×400 backing surface rather than multiplying it by devicePixelRatio, and let CSS scale it to the viewport. This keeps all dot circles smooth enough at the chosen radii while limiting per-frame work.

For dot x from 0 through 95 and y from 0 through 39, draw at cx=5+x*10 and cy=5+y*10. At time t in seconds, compute:

base = 1.1 + 2.4 * abs(sin(x * 0.09 + t * 0.7) * sin(y * 0.11 - t * 0.5))

Unlit dots use #5A6B72 at globalAlpha 0.12. A dot is lit when its computed normalized wave energy is at least 0.42. Normalize the sine-product contribution as clamp((abs(product)-0.18)/0.82, 0, 1). Mint-lit dots use #7DF9C6 at globalAlpha 0.52 + 0.48*energy. Three specified source columns, x equal to 21, 63, and 88, are berth columns. Within those columns, rows 0 through 39 are amber only during the live-departure state. At t below 9 seconds, columns 21 and 63 use the normal mint/slate calculation. At t from 9 through 10.2 seconds, column 88 alone receives one hard amber flash: its rows progress from row 0 at 9.00 seconds to row 39 at 10.20 seconds, each row holding #FFB020 at globalAlpha 1 for 80ms and returning to mint for the remainder of the column event. Before 9 seconds, mark the three berth states in the UI as “DEPARTING NOW” while the canvas remains mint; the canvas flash is a liveness proof, not a change in the semantic status.

Render every dot in the first pass with ctx.beginPath(), ctx.arc(cx, cy, radius, 0, Math.PI*2), and ctx.fill(). Use a reusable Path2D? No: direct arcs in one first-pass loop are acceptable because 3,840 small paths remain below budget. Reset globalCompositeOperation to source-over before this pass.

The bloom is a second full-lattice pass. For every lit mint or amber dot, draw a second circle with radius multiplied by exactly 2.6, globalAlpha multiplied by 0.34, and ctx.fillStyle equal to that dot’s live colour. Set ctx.globalCompositeOperation to "lighter". Set ctx.filter exactly once before this second pass to "blur(6px)", and reset it to "none" immediately after the pass. Never assign ctx.filter or ctx.shadowBlur inside an individual dot loop. The 6px source-space blur becomes a visible 9–18px presentation-space bloom at tested desktop aspect ratios. This physical halo is the defining trick.

Add a pointer hotspot with a 220px coordinate-space radial influence. Cache pointer client coordinates in pointerX and pointerY. Convert them from viewport coordinates to canvas coordinates using 960/innerWidth and 400/innerHeight. On pointer movement, calculate a maximum per-frame hotspot delta of 0.08. In the animation loop, hotspotX += (targetX-hotspotX)*0.08 and hotspotY += (targetY-hotspotY)*0.08. Add 1.8 multiplied by falloff to the radius sum for every dot, where falloff=max(0, 1-distance/220), then square the falloff. Initial hotspotX=480 and hotspotY=200. Pointer entry sets the target; pointer leave returns the target to 480,200. The resulting visual settle is approximately 250ms at 60fps.

The wave has a 22-second visual period. It runs continuously with t elapsed in seconds; the supplied sine coefficients create interference movement across the fixed 10-unit coordinate pitch. No dot changes x or y position. Only radius, fill colour, and opacity change.

Implement the load wipe by increasing revealY from -1 to 40 over 560ms. Each source row becomes visible when revealY is at least row-1. Interpolate the reveal boundary with a 10-unit feather. This is equivalent to top-to-bottom row activation at 14ms per row. After 560ms, animate a separate waveOpacity from 0 to 1 over exactly 400ms using an ease-out cubic. Before waveOpacity begins, rows may reach full slate opacity only. At 960ms, all rows and the mint wave are fully visible.

The per-frame cost budget is 3,840 first-pass arc fills plus no more than 1,650 second-pass lit fills. Precompute the 3,840 center coordinates, row reveal states, berth membership, and base sine factors outside the rAF loop. Calculate the shared time terms and hotspot positions once per frame. Do not call getBoundingClientRect, query selectors, read layout-affecting CSS, create gradients, create paths unrelated to the dot arcs, set canvas width, set canvas height, or resize the canvas inside the loop. Do not use ctx.shadowBlur. Do not call the 6px filter setter more than twice per frame. The main canvas dimensions and offscreen runtime resources are initialized before animation starts. The target budget is 4,000–5,500 path fills per frame and no more than 16ms of main-thread work on a 1440×900 headless browser for at least 20 frames in every 1.2-second sample.

C. THE LAYER STACK

The full-viewport stack, back to front, is:

z-index:0 — body background #04070A.
z-index:1 — fixed #tally-canvas, opacity controlled by the wave reveal only.
z-index:2 — a non-interactive top safety veil using a linear-gradient from rgba(4,7,10,0.84) at 0%, rgba(4,7,10,0.38) at 12%, rgba(4,7,10,0) at 28%, rgba(4,7,10,0) at 69%, rgba(4,7,10,0.50) at 100%. It is decorative and pointer-events:none.
z-index:3 — semantic header, position:fixed, inset:0 0 auto 0.
z-index:4 — main hero copy and status actions, position:fixed or absolute inside the viewport.
z-index:5 — footer metadata rail, anchored to the bottom.
z-index:6 — skip link, revealed only on keyboard focus.
z-index:7 — a 2px amber event line used only for the t+9s class pulse.

There are no stacked glass or card surfaces. Text shadows may use 0 2px 18px rgba(4,7,10,0.92) and 0 1px 2px rgba(4,7,10,1); these are text legibility shadows, not containers.

D. TOKEN TABLE

Define every size, spacing, colour, and timing as a CSS custom property in :root:

--void: #04070A;
--mint: #7DF9C6;
--amber: #FFB020;
--slate: #5A6B72;
--paper: #F2F7F5;
--muted: #9AA9AD;
--hairline: rgba(122,249,198,0.18);
--focus: #FFFFFF;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
--page-x: 24px;
--page-y: 24px;
--header-h: 92px;
--hero-col: 320px;
--hero-bottom: 82px;
--hero-gap: 18px;
--footer-h: 58px;
--rail-label-size: 10px;
--rail-value-size: 12px;
--brand-size: 15px;
--eyebrow-size: 11px;
--h1-size: clamp(42px, 4.25vw, 72px);
--h1-line: 0.94;
--body-size: 14px;
--body-line: 1.55;
--action-h: 44px;
--action-radius: 999px;
--track: 0.12em;
--dur-fast: 160ms;
--dur-base: 260ms;
--dur-reveal: 400ms;
--ease-out: cubic-bezier(0.16,1,0.3,1);
--z-canvas: 1;
--z-veil: 2;
--z-header: 3;
--z-main: 4;
--z-footer: 5;
--z-skip: 6;
--z-event: 7;

Use --mint, --slate, --amber, and --paper exactly as semantic colours. Do not introduce blue, purple, red, or card backgrounds.

E. THE COMPOSITION

Build the document in this source order: skip link, header, main, footer, canvas, decorative veil, and event line. The canvas may appear first in paint order through z-index even if it follows semantics in source order.

Header is fixed at the top with left:24px, right:24px, top:0, height:92px, display:grid, grid-template-columns:320px minmax(0,1fr) auto; column-gap:24px; align-items:start; padding-top:20px. The first cell is a nav with aria-label="Primary navigation". It contains an anchor named “Northlight home” and the exact text “NORTHLIGHT / HARBOUR”. Set it to --brand-size, weight 600, letter-spacing:0.10em, line-height:1.2, color:var(--paper), text-decoration:none. Under it place a 10px slate label at 6px top margin reading “LIVE CONTROL / NTH 04”.

The second header cell is the right-aligned sailing table, aligned to the top rail at the 24px page inset. Use a semantic table with class sailings and caption “Sailings from Northlight Harbour”. The table uses display:inline-grid; grid-template-columns:132px 92px 92px; gap:0; margin-left:auto; border-collapse:collapse; color:var(--slate); background:transparent. The caption is position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%). Use th and td with height:24px, padding:0, border:0, font-size:10px, font-weight:500, line-height:24px, letter-spacing:0.08em, text-align:left. The first row contains the exact headers “SAILING”, “STATUS”, “BERTH”. The second row contains “06:40 KIRKGATE”, “BOARDING”, “02”. The third contains “07:15 ISLAY”, “ON TIME”, “04”. The fourth contains “08:05 SKERRY”, “DEPARTING NOW”, “06”. Only the status text in the final row is --amber. The second cell and the other values remain slate or paper. Do not add row backgrounds, cell borders, glass, or card padding. At widths below 901px, hide the caption visually while preserving semantics and reflow the table to a width-safe two-line arrangement.

The third header cell is a 44px-wide, 44px-high anchor with aria-label="Open live departures". It displays the exact text “↗” at 20px, color:var(--mint). It is not enclosed by a box.

Main is positioned left:var(--page-x), bottom:var(--hero-bottom), width:var(--hero-col), z-index:var(--z-main), and contains one hero column. Use display:flex; flex-direction:column; align-items:flex-start; gap:var(--hero-gap). Place the eyebrow first: exact text “NORTHLIGHT / LIVE HARBOUR”, 11px, weight 500, color:var(--mint), letter-spacing:var(--track). Place the h1 next with exact text “Know when<br>the water<br>opens.” Set margin:0, max-width:320px, color:var(--paper), font-size:var(--h1-size), line-height:var(--h1-line), font-weight:500, letter-spacing:-0.055em. Place the body paragraph next with exact text: “Three departures are moving now. Read the tide window, watch the berth, and leave with the next crossing.” Set max-width:310px, margin:0, color:var(--muted), font-size:var(--body-size), line-height:var(--body-line). Place the actions after a 2px gap. Use a div with display:flex; gap:10px. The primary anchor has exact visible text “VIEW LIVE SAILINGS” and accessible name “View live sailings”. It points to #live-sailings and has height:var(--action-h), padding:0 18px, border-radius:var(--action-radius), color:var(--void), background:linear-gradient(135deg, #B0FFE0 0%, var(--mint) 100%), font-size:11px, font-weight:600, letter-spacing:0.08em, display:inline-flex, align-items:center, text-decoration:none. The secondary anchor has exact visible text “TIDE WINDOWS” and accessible name “Tide windows”, points to #tide-windows, and uses transparent background, color:var(--paper), padding:0 4px, display:inline-flex, align-items:center, font-size:11px, font-weight:500, letter-spacing:0.08em.

Below the main text, include a visually compact status row with exact text “HARBOUR SIGNAL  /  09:42:18 UTC” and a 7px mint status dot. The dot uses background:var(--mint) and animation:none at rest. This row is not a card and has no border.

Footer is fixed at left:24px, right:24px, bottom:0, height:var(--footer-h), display:grid; grid-template-columns:320px 1fr auto; gap:24px; align-items:center; border-top:1px solid var(--hairline); background:linear-gradient(to top, rgba(4,7,10,0.86), rgba(4,7,10,0)); z-index:var(--z-footer). The first metadata item is exact text “TIDE 2.4M / RISING” in 10px slate. The middle item is exact text “WIND NW 11KT / VISIBILITY 8.2MI” in 10px slate, centered. The last item is a link named “Harbour assistance” with exact text “HARBOUR ASSISTANCE  ↗”, 10px mint, right aligned. This is a thin metadata rail, not a card.

The semantic destinations #live-sailings and #tide-windows must be visually represented by the table caption and a visually hidden status note. Add one visually hidden p id="tide-windows": “Northlight tide windows: 2.4 metres and rising; next safe crossing window 09:50 UTC.” Add id="live-sailings" to the sailing table. Do not create visible extra sections.

F. THE UI LANGUAGE

Buttons and pills use no glass and no border. The primary action is a solid mint-to-pale-mint diagonal pill. On hover, translate it by translateY(-2px), change its background to linear-gradient(135deg, #D5FFF0 0%, #8EFBCB 100%), and set box-shadow:0 8px 24px rgba(125,249,198,0.18). On active, translateY(0) and use the base background. Transition transform and box-shadow over 160ms using --ease-out; do not animate layout properties.

The secondary action is text-only with a 1px transparent underline. On hover, color:var(--mint) and border-bottom-color:var(--mint). On active, color:var(--paper). The top-right arrow anchor is text-only; hover color:var(--amber), transform:translateY(-2px). Every focus-visible target receives outline:2px solid var(--focus), outline-offset:4px. No focus ring may be clipped by overflow.

Status colors are semantic: “BOARDING” and “ON TIME” use slate, “DEPARTING NOW” uses amber, live signal text uses mint. Use uppercase IBM Plex Mono at 10–12px with letter spacing between 0.08em and 0.12em. Do not use rounded rectangular containers around table rows or metadata.

G. MOTION

The load sequence begins at document script execution. Rows reveal top-to-bottom over 560ms at 14ms per row. Dot opacity is controlled by row reveal and wave opacity. The mint wave begins after the row reveal at 560ms and reaches opacity 1 at 960ms. The exact row-reveal easing is linear for the 14ms row progression; the wave fade uses cubic ease-out. The UI copy uses these delays:

The brand anchor: opacity 0 to 1 and translateY(8px) to translateY(0), duration 420ms, delay 120ms, ease-out.
The sailing table: opacity 0 to 1 and translateX(12px) to translateX(0), duration 460ms, delay 260ms, ease-out.
The eyebrow: opacity 0 to 1 and translateY(10px) to translateY(0), duration 420ms, delay 180ms, ease-out.
The h1: opacity 0 to 1 and translateY(16px) to translateY(0), duration 560ms, delay 220ms, ease-out.
The body paragraph: opacity 0 to 1 and translateY(10px) to translateY(0), duration 440ms, delay 360ms, ease-out.
The primary action: opacity 0 to 1 and translateY(8px) to translateY(0), duration 400ms, delay 470ms, ease-out.
The secondary action: opacity 0 to 1 and translateY(8px) to translateY(0), duration 400ms, delay 520ms, ease-out.
The status row: opacity 0 to 1 and translateY(8px) to translateY(0), duration 400ms, delay 600ms, ease-out.
The footer: opacity 0 to 1, duration 360ms, delay 680ms, ease-out.

Name the CSS keyframes exactly: ui-rise, ui-slide, and amber-column. ui-rise animates opacity and transform only. ui-slide animates opacity and transform only. amber-column animates opacity from 0 to 1 to 0 over 1200ms with steps timing. Add class “amber-flash” to the event line at 9000ms and remove it at 10200ms. The canvas independently executes the t+9s column event; the event line is a 2px horizontal signal indicator positioned at left:0, right:0, top:50%, opacity:0, pointer-events:none. Do not use perpetual CSS animation for the canvas.

The pointer hotspot is frame-driven, not CSS-driven. Its target follows pointermove and pointerleave with a per-frame lerp of exactly 0.08. The wave is always running after the 960ms reveal. The timestamp display must update only once per second by caching the previous displayed second, not once per animation frame.

H. THE RESPONSIVE TABLE

At 1440×900 and 1920×1080, use the base tokens. Keep the hero at 320px and the table at the top-right. At 1920×1080, set --page-x:40px, --header-h:104px, --hero-bottom:96px, --footer-h:64px, and --hero-col:360px; set the h1 maximum to 80px. The source lattice remains 960×400 and is presented across the full viewport; do not increase dot count.

At 768×1024, set --page-x:20px, --page-y:20px, --header-h:156px, --hero-col:360px, --hero-bottom:108px, --footer-h:86px, --h1-size:52px. Header grid-template-columns:1fr auto; grid-template-rows:44px 96px; column-gap:16px. Put the navigation in row 1 column 1, the arrow anchor in row 1 column 2, and the sailing table in row 2 spanning both columns with justify-self:end. Reduce the table grid-template-columns to 126px 88px 76px. The table remains right-aligned and has no background. Main moves to left:20px and bottom:108px. Footer grid-template-columns:1fr auto; grid-template-rows:34px 28px; row-gap:0; height:86px. Put tide in row 1 column 1, wind in row 1 column 2, and assistance in row 2 column 1 / 3. No element may exceed the viewport width.

At 390×844, set --page-x:16px, --page-y:16px, --header-h:176px, --hero-col:calc(100vw - 32px), --hero-bottom:120px, --footer-h:108px, --h1-size:44px, --body-size:13px, --action-h:42px. Header grid-template-columns:1fr 36px; grid-template-rows:42px 118px; column-gap:8px. Place navigation in row 1 column 1 and arrow in row 1 column 2. The sailing table spans row 2, uses display:grid, grid-template-columns:1fr 1fr 1fr, width:100%, justify-self:stretch, font-size:9px. Header labels must wrap safely with min-width:0. Main left:16px, right:16px, bottom:120px, width:auto. Set h1 max-width:350px. The action row uses flex-wrap:wrap and gap:8px. The footer left:16px, right:16px, height:108px, grid-template-columns:1fr 1fr, grid-template-rows:30px 30px 30px, gap:4px 12px. Put tide in row 1 column 1 / 3, wind in row 2 column 1 / 3, and assistance in row 3 column 1 / 3. At 390px the page may scroll vertically, but the hero must not cover the footer or create horizontal overflow.

Add max-height breakpoints. At min-width:901px and max-height:760px, set --header-h:72px, --hero-bottom:58px, --footer-h:46px, --h1-size:42px, --body-size:12px, --action-h:38px, and --page-y:14px. Reduce header padding-top to 12px, table row height to 20px, and the gap between h1 and body to 12px. At min-width:901px and max-height:620px, set --header-h:60px, --hero-bottom:46px, --footer-h:38px, --h1-size:34px, --body-size:11px, --action-h:34px, --page-x:18px, --page-y:10px. Hide the body paragraph only in this exact short desktop condition, reduce the h1 to three lines at 34px, set table row height to 18px, and retain both accessible actions. Do not hide the h1, header, table, status row, or footer.

I. FAILURE GUARDS

All animated DOM content must have resting opacity 1. Define its final opacity and transform in the base rule, then animate from opacity 0 only inside a .is-loading wrapper or an animation that fill-mode is both. Remove .is-loading after 1100ms. If JavaScript is unavailable, the body must not retain opacity 0: use a no-js base state with opacity 1 and add .js to the document element before applying load classes.

Use the two-rAF fallback for ready telemetry: after initialization, call requestAnimationFrame(() => requestAnimationFrame(() => { window.__DEMO__.ready = true; })). This marks ready after the first painted frame and a second frame opportunity. Increment frames exactly once inside the rAF loop by incrementing window.__DEMO__.frames. Do not increment frames in the ready callback.

The animation loop must have a visibility-safe guard. If document.hidden is true, cancel the current rAF, do not increment frames, and restart on visibilitychange. On reduced motion, do not run the wave or load wipe. Render one static complete lattice at 960×400 with revealY=40, waveOpacity=1, hotspot at center, and t=0. Set ready using the same two-rAF fallback and keep the page readable. Do not update the clock. Do not add .is-loading to any UI element. Do not schedule the amber flash in reduced-motion mode. Do not animate pointer movement, UI entrance, or the status signal.

The complete prefers-reduced-motion: reduce block must set animation:none!important, transition:none!important, scroll-behavior:auto!important, and force all animated elements to opacity:1 and transform:none. It must also prevent the canvas script from entering the rAF loop while preserving the static canvas. Reduced-motion users must retain access to the live sailings table, tide information, actions, and footer.

J. THE EXACT JS

Use this exact script structure and values. Adapt only the required DOM ids to the specified markup:

const root = document.documentElement;
root.classList.add("js");
window.__DEMO__ = { name: "tally", ready: false, frames: 0, effects: [], errors: [] };
window.addEventListener("error", event => {
  window.__DEMO__.errors.push(String(event.message || "window error"));
});

const canvas = document.getElementById("tally-canvas");
const ctx = canvas.getContext("2d", { alpha: false });
const COLS = 96;
const ROWS = 40;
const PITCH = 10;
const W = COLS * PITCH;
const H = ROWS * PITCH;
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
canvas.width = W;
canvas.height = H;
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = "low";

const dots = new Array(COLS * ROWS);
for (let y = 0; y < ROWS; y++) {
  for (let x = 0; x < COLS; x++) {
    dots[y * COLS + x] = {
      x,
      y,
      cx: 5 + x * PITCH,
      cy: 5 + y * PITCH,
      sx: Math.sin(x * 0.09),
      cxPhase: Math.cos(x * 0.09),
      sy: Math.sin(y * 0.11),
      cyPhase: Math.cos(y * 0.11),
      berth: x === 21 || x === 63 || x === 88
    };
  }
}

const pointer = { x: W / 2, y: H / 2, targetX: W / 2, targetY: H / 2 };
function setPointer(clientX, clientY) {
  pointer.targetX = Math.max(0, Math.min(W, clientX * W / window.innerWidth));
  pointer.targetY = Math.max(0, Math.min(H, clientY * H / window.innerHeight));
}
window.addEventListener("pointermove", event => setPointer(event.clientX, event.clientY), { passive: true });
window.addEventListener("pointerleave", () => {
  pointer.targetX = W / 2;
  pointer.targetY = H / 2;
});

let raf = 0;
let start = performance.now();
let previousSecond = -1;
let clock = document.getElementById("clock");
let amberSent = false;
let amberEnded = false;

function drawStatic() {
  ctx.globalCompositeOperation = "source-over";
  ctx.filter = "none";
  ctx.clearRect(0, 0, W, H);
  ctx.fillStyle = "#04070A";
  ctx.fillRect(0, 0, W, H);
  ctx.fillStyle = "#5A6B72";
  ctx.globalAlpha = 0.12;
  for (const dot of dots) {
    ctx.beginPath();
    ctx.arc(dot.cx, dot.cy, 1.1, 0, Math.PI * 2);
    ctx.fill();
  }
  ctx.globalAlpha = 1;
}

function drawFrame(now) {
  const elapsed = (now - start) / 1000;
  const revealY = Math.min(ROWS, elapsed * 1000 / 14);
  const waveOpacity = Math.max(0, Math.min(1, (elapsed * 1000 - 560) / 400));
  const waveEase = 1 - Math.pow(1 - waveOpacity, 3);
  pointer.x += (pointer.targetX - pointer.x) * 0.08;
  pointer.y += (pointer.targetY - pointer.y) * 0.08;

  if (elapsed >= 9 && !amberSent) {
    document.body.classList.add("amber-flash");
    window.__DEMO__.effects.push("amber-column");
    amberSent = true;
  }
  if (elapsed >= 10.2 && !amberEnded) {
    document.body.classList.remove("amber-flash");
    amberEnded = true;
  }

  ctx.globalCompositeOperation = "source-over";
  ctx.filter = "none";
  ctx.globalAlpha = 1;
  ctx.fillStyle = "#04070A";
  ctx.fillRect(0, 0, W, H);

  for (const dot of dots) {
    const rowAlpha = Math.max(0, Math.min(1, revealY - dot.y));
    if (rowAlpha <= 0) continue;
    const product = Math.abs(
      (dot.sx * Math.cos(elapsed * 0.7) + dot.cxPhase * Math.sin(elapsed * 0.7)) *
      (dot.sy * Math.cos(elapsed * 0.5) - dot.cyPhase * Math.sin(elapsed * 0.5))
    );
    const energy = Math.max(0, Math.min(1, (product - 0.18) / 0.82));
    const distance = Math.hypot(dot.cx - pointer.x, dot.cy - pointer.y);
    const falloff = Math.max(0, 1 - distance / 220);
    const radius = 1.1 + 2.4 * product + 1.8 * falloff * falloff;
    const lit = energy >= 0.42;
    const amber = dot.x === 88 && elapsed >= 9 + dot.y * 0.03076923 && elapsed < 9.08 + dot.y * 0.03076923;
    ctx.fillStyle = amber ? "#FFB020" : (lit ? "#7DF9C6" : "#5A6B72");
    ctx.globalAlpha = amber ? rowAlpha : (lit ? (0.52 + 0.48 * energy) * waveEase * rowAlpha : 0.12 * rowAlpha);
    ctx.beginPath();
    ctx.arc(dot.cx, dot.cy, radius, 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.globalCompositeOperation = "lighter";
  ctx.filter = "blur(6px)";
  for (const dot of dots) {
    const rowAlpha = Math.max(0, Math.min(1, revealY - dot.y));
    if (rowAlpha <= 0) continue;
    const product = Math.abs(
      (dot.sx * Math.cos(elapsed * 0.7) + dot.cxPhase * Math.sin(elapsed * 0.7)) *
      (dot.sy * Math.cos(elapsed * 0.5) - dot.cyPhase * Math.sin(elapsed * 0.5))
    );
    const energy = Math.max(0, Math.min(1, (product - 0.18) / 0.82));
    const distance = Math.hypot(dot.cx - pointer.x, dot.cy - pointer.y);
    const falloff = Math.max(0, 1 - distance / 220);
    if (energy < 0.42 && !(dot.x === 88 && elapsed >= 9 + dot.y * 0.03076923 && elapsed < 9.08 + dot.y * 0.03076923)) continue;
    const radius = (1.1 + 2.4 * product + 1.8 * falloff * falloff) * 2.6;
    ctx.fillStyle = dot.x === 88 && elapsed >= 9 + dot.y * 0.03076923 && elapsed < 9.08 + dot.y * 0.03076923 ? "#FFB020" : "#7DF9C6";
    ctx.globalAlpha = rowAlpha * waveEase * 0.34;
    ctx.beginPath();
    ctx.arc(dot.cx, dot.cy, radius, 0, Math.PI * 2);
    ctx.fill();
  }
  ctx.filter = "none";
  ctx.globalCompositeOperation = "source-over";
  ctx.globalAlpha = 1;

  const second = Math.floor(elapsed);
  if (clock && second !== previousSecond) {
    previousSecond = second;
    const total = 9 * 3600 + 42 * 60 + 18 + second;
    const hh = String(Math.floor(total / 3600) % 24).padStart(2, "0");
    const mm = String(Math.floor(total / 60) % 60).padStart(2, "0");
    const ss = String(total % 60).padStart(2, "0");
    clock.textContent = hh + ":" + mm + ":" + ss + " UTC";
  }

  window.__DEMO__.frames += 1;
  raf = requestAnimationFrame(drawFrame);
}

function startAnimation() {
  if (reduceMotion.matches) {
    drawStatic();
    requestAnimationFrame(() => requestAnimationFrame(() => {
      window.__DEMO__.ready = true;
    }));
    return;
  }
  start = performance.now();
  window.__DEMO__.effects.push("wave-sweep");
  window.__DEMO__.effects.push("pointer-hotspot");
  window.__DEMO__.effects.push("load-wipe");
  raf = requestAnimationFrame(drawFrame);
  requestAnimationFrame(() => requestAnimationFrame(() => {
    window.__DEMO__.ready = true;
  }));
}

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    cancelAnimationFrame(raf);
  } else if (!reduceMotion.matches) {
    start = performance.now();
    raf = requestAnimationFrame(drawFrame);
  }
});

startAnimation();

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Tessellate

- Slug: `tessellate`
- Page: https://landingpageprompts.com/prompts/tessellate
- Effect: SVG pattern morphs between triangular, hexagonal, and herringbone tilings behind an animated rotating mask, cycling every 6s.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 37,666; total with repair and cross-check: 47,526
- Verification: 18/18 automated checks passed
- Independent cross-check: partial (confidence medium)
- Acceptance criteria:
  - window.__DEMO__.ready === true
  - window.__DEMO__.frames > 20 after 1200ms
  - document.querySelectorAll('h1').length === 1
  - getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() === '#c084fc'
  - window.__DEMO__.errors.length === 0
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT:
A single-viewport cinematic landing page for "TESSELLATE", a generative-design studio. The document title is "TESSELLATE — Generative Design Studio". The <html> element carries lang="en". The viewport meta tag is <meta name="viewport" content="width=device-width, initial-scale=1">. The CSS locks the desktop viewport: html, body { height: 100dvh; } @media (min-width: 901px) { html, body { overflow: hidden; } }. DO NOT BUILD: multi-page routing, any <canvas> element, mp4/webm/gif media, remote images (except Google Fonts), base64 photo blobs, Tailwind CSS, React, GSAP, Three.js, Lottie, WebGL, external CDNs, horizontal scrollbars, invisible focus states, console.log statements, unhandled promise rejections, or non-vector blur (e.g., no box-shadow blur on animated elements). Every pixel must originate from CSS gradients, SVG shapes, or system fonts.

B. THE BACKDROP:
The backdrop consists of 1 parent <svg id="backdrop-svg">, 3 <pattern> definitions (#pat-tri, #pat-hex, #pat-herr), 1 <mask id="anim-mask"> containing 1 <g class="mask-shapes"> with exactly 6 vector child shapes (2 <polygon>, 2 <path>, 1 <circle>, 1 <rect>), and 3 stacked <rect> elements (#rect-tri, #rect-hex, #rect-herr) inside a <g mask="url(#anim-mask)">. Blur radii are exactly 0 — no SVG <feGaussianBlur> or CSS filter: blur() is applied to the backdrop, guaranteeing crisp vector rendering at any DPI. Gradient stops: the page background is a CSS radial-gradient(circle at 50% 40%, #1a1025 0%, #0a0610 70%, #000000 100%). Pattern fills use flat alpha: triangle paths are rgba(192,132,252,0.15) and rgba(192,132,252,0.05); hexagon uses rgba(192,132,252,0.10); herringbone uses rgba(192,132,252,0.08) and rgba(192,132,252,0.12). Drift periods: .mask-shapes rotates 360deg over 24s (linear infinite) and scales from 1 to 1.15 and back over 12s (ease-in-out infinite). The 3 rects cross-fade over a single 18s cycle (6 seconds per tiling). Canvas resolution trick: N/A — vector-only SVG (no <canvas>), so no devicePixelRatio scaling is required. The SVG uses viewBox="0 0 1440 900" and preserveAspectRatio="xMidYMid slice" to guarantee crisp scaling at any viewport size without pixelation, replacing the canvas DPR trick entirely. Per-frame cost budget: total JS execution per frame must be < 2ms. We cache the #readout-text DOM node. We NEVER call getBoundingClientRect inside the loop. CSS handles all animation (opacity and transform only). The only JS math is Math.floor(Date.now() / 6000) % 3, an O(1) operation taking < 0.01ms.

C. THE LAYER STACK (back to front, z-index values):
- z-index: 0 — #bg-gradient (a body::before pseudo-element with the radial gradient, position: fixed; inset: 0;).
- z-index: 1 — #backdrop-svg (position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none;).
- z-index: 2 — #vignette (a fixed div with background: radial-gradient(circle, transparent 40%, #000 120%); pointer-events: none;).
- z-index: 3 — <main> (position: relative; z-index: 3;).
- z-index: 10 — <header> (position: fixed; top: 0; left: 0; right: 0;).
- z-index: 10 — <footer> (position: fixed; bottom: 0; left: 0; right: 0;).
- Interactive controls (:focus-visible) receive position: relative; z-index: 100; and outline: 2px solid var(--accent); outline-offset: 4px;.
The <nav> lives inside <header>.

D. A TOKEN TABLE (--name: value) for every size and colour:
--accent: #c084fc;
--accent-glow: rgba(192, 132, 252, 0.35);
--bg-dark: #0a0610;
--bg-mid: #1a1025;
--bg-black: #000000;
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--header-h: 80px;
--footer-h: 64px;
--hero-pad-top: 40px;
--hero-pad-x: 24px;
--grid-gap: 16px;
--pill-pad-y: 10px;
--pill-pad-x: 24px;
--pill-radius: 999px;
--readout-size: 0.75rem;
--h1-size: clamp(2.5rem, 8vw, 6rem);
--h1-line: 1.05;
--z-bg: 0;
--z-backdrop: 1;
--z-vignette: 2;
--z-content: 3;
--z-header: 10;
--z-footer: 10;
(Include Google Fonts link for Space Grotesk 700 and JetBrains Mono 400 in the head).

E. THE COMPOSITION — header, hero, footer as a build order:
1. <header>: height: var(--header-h); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; Contains <nav> (display: flex; gap: 24px;) with links: <a href="#work">Work</a>, <a href="#studio">Studio</a>, <a href="#contact">Contact</a>. Accessible names are provided by the text nodes 'Work', 'Studio', 'Contact'.
2. <main>: padding-top: var(--header-h); padding-bottom: var(--footer-h); padding-left: var(--hero-pad-x); padding-right: var(--hero-pad-x); display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); place-items: center; text-align: center; min-height: 100dvh;
  - <h1> (the only h1 on the page): copy is 'TESSELLATE'. Style: font-family: var(--font-display); font-size: var(--h1-size); line-height: var(--h1-line); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; text-transform: uppercase;
  - <p id="subtitle">: copy is 'Generative design studio engineering structural patterns for spatial interfaces.' Style: color: var(--text-secondary); font-family: var(--font-display); max-width: 600px; margin: 0;
  - <div id="readout">: contains <span id="readout-text">CURRENT TILING: TRIANGULAR</span>. Style: font-family: var(--font-mono); font-size: var(--readout-size); color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 8px;
3. <footer>: height: var(--footer-h); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; Left side: <span>© 2024 Tessellate Studio</span> (font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary);). Right side: <button id="toggle-motion" class="pill">Pause Motion</button> (accessible name 'Pause Motion' from text content).

F. THE UI LANGUAGE — button/pill treatments:
The .pill button (#toggle-motion) uses: background: linear-gradient(135deg, rgba(192,132,252,0.15), rgba(192,132,252,0.05)); border: 1px solid var(--accent-glow); color: var(--text-primary); padding: var(--pill-pad-y) var(--pill-pad-x); border-radius: var(--pill-radius); font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
Hover state: background: linear-gradient(135deg, rgba(192,132,252,0.3), rgba(192,132,252,0.1)); transform: translateY(-2px); box-shadow: 0 4px 12px var(--accent-glow);
Focus-visible state: outline: 2px solid var(--accent); outline-offset: 4px; position: relative; z-index: 100;
Nav links: color: var(--text-secondary); text-decoration: none; transition: color 0.2s; Hover: color: var(--text-primary);. Focus-visible gets the same ring.

G. MOTION — a stagger table (element -> animation -> delay -> duration):
| Element | Animation | Delay | Duration |
|---|---|---|---|
| .mask-shapes | maskRotate | 0s | 24s |
| .mask-shapes | maskScale | 0s | 12s |
| #rect-tri | crossFadeTri | 0s | 18s |
| #rect-hex | crossFadeHex | 0s | 18s |
| #rect-herr | crossFadeHerr | 0s | 18s |
| h1 | fadeUp | 0.2s | 1s |
| #subtitle | fadeUp | 0.4s | 1s |
| #readout | fadeUp | 0.6s | 1s |
| #toggle-motion | fadeUp | 0.8s | 1s |
Named keyframes:
@keyframes maskRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes maskScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes crossFadeTri { 0%, 30% { opacity: 1; } 33.33%, 96.66% { opacity: 0; } 100% { opacity: 1; } }
@keyframes crossFadeHex { 0%, 30% { opacity: 0; } 33.33%, 63.33% { opacity: 1; } 66.66%, 100% { opacity: 0; } }
@keyframes crossFadeHerr { 0%, 63.33% { opacity: 0; } 66.66%, 96.66% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
All elements using fadeUp have animation-fill-mode: both;. .mask-shapes has transform-box: view-box; transform-origin: 50% 50%;.

H. A RESPONSIVE TABLE — token overrides per breakpoint:
1. @media (max-width: 900px) (tablet & mobile, scroll enabled): html, body { overflow: auto; } --h1-size: clamp(2rem, 10vw, 4rem); --header-h: 70px; --footer-h: 56px;
2. @media (max-width: 600px) (mobile): --header-h: 64px; --hero-pad-x: 16px; --grid-gap: 12px; --pill-pad-x: 16px;
3. @media (min-width: 901px) and (max-height: 800px) (max-height breakpoint 1): --h1-size: 4rem; --header-h: 70px; --footer-h: 56px;
4. @media (min-width: 901px) and (max-height: 700px) (max-height breakpoint 2): --h1-size: 3rem; --header-h: 60px; --footer-h: 48px; --hero-pad-top: 20px;
No horizontal overflow occurs at 390x844, 768x1024, 1440x900, or 1920x1080 because #backdrop-svg uses preserveAspectRatio="xMidYMid slice" and body { overflow-x: hidden; }.

I. FAILURE GUARDS:
1. Resting opacity 1: All fadeUp elements rest at opacity: 1; transform: none; after their animation completes (due to animation-fill-mode: both). If animations are stripped, they default to visible.
2. Two-rAF fallback: window.__DEMO__.ready = true is set inside a double requestAnimationFrame callback, guaranteeing the flag flips strictly after the browser's first paint, preventing false-positive readiness.
3. Reduced-motion: A @media (prefers-reduced-motion: reduce) block sets animation: none !important; transition: none !important; for all elements. #rect-hex and #rect-herr are set to display: none;, #rect-tri is forced to opacity: 1;. .mask-shapes is given a static transform: rotate(15deg) scale(1.05); to preserve the composition without motion. The JS still runs the rAF loop to increment window.__DEMO__.frames (so telemetry passes) but does not manipulate DOM styles. document.body.classList.add('reduced') is added for any JS conditionals.

J. THE EXACT JS:
window.__DEMO__ = { name: 'tessellate', ready: false, frames: 0, effects: [], errors: [] };
window.addEventListener('error', (e) => { window.__DEMO__.errors.push(e.message); });
['svg-pattern-crossfade', 'mask-rotate-scale', 'monospace-readout'].forEach(e => window.__DEMO__.effects.push(e));

const readouts = ['TRIANGULAR', 'HEXAGONAL', 'HERRINGBONE'];
let lastIdx = -1;
const readoutEl = document.getElementById('readout-text');

function loop() {
  window.__DEMO__.frames++;
  const idx = Math.floor(Date.now() / 6000) % 3;
  if (idx !== lastIdx) {
    lastIdx = idx;
    if (readoutEl) readoutEl.textContent = 'CURRENT TILING: ' + readouts[idx];
  }
  requestAnimationFrame(loop);
}

requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    window.__DEMO__.ready = true;
    requestAnimationFrame(loop);
  });
});

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('toggle-motion');
  if (btn) {
    btn.addEventListener('click', () => {
      const paused = document.body.classList.toggle('paused');
      btn.textContent = paused ? 'Play Motion' : 'Pause Motion';
      const els = document.querySelectorAll('#rect-tri, #rect-hex, #rect-herr, .mask-shapes');
      els.forEach(el => el.style.animationPlayState = paused ? 'paused' : 'running');
    });
  }
});


---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Thermal

- Slug: `thermal`
- Page: https://landingpageprompts.com/prompts/thermal
- Effect: A diffusing 48x27 canvas heat map mapped through an inferno palette with a live hottest-cell readout
- Model: `xiaomi/mimo-v2.6-pro` (Xiaomi MiMo v2.6 Pro (xiaomi/mimo-v2.6-pro)) on cmd-code
- Build tokens: 38,840; total with repair and cross-check: 61,780
- Verification: 20/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - exactly one h1 with the exact text 'Heat is data. Failure is a signal.' plus semantic header, nav, main, and footer landmarks
  - canvas#heat paints a non-blank heat map and its pixel hash changes across consecutive frames at 1440x900, with the field sized 48x27 at >=901px and 27x48 at <=900px
  - window.__DEMO__ starts as name 'thermal' with ready false, ready becomes true after the first painted frame, frames increments once per rAF tick reaching at least 20 in 1.2s at 1440x900, effects includes heat-diffusion, inferno-lookup, hottest-cell-hud and grain-texture, and errors stays empty
  - the .hud-value readout matches /R\d+ · C\d+ · \d+°C/ and changes over time, and .legend carries the 8-stop thermal linear-gradient containing #ff3d8f with 20°C / 320°C / 620°C scale labels
  - no horizontal overflow at 390px, 768px, 1440px, or 1920px; at >=901px body has overflow:hidden and .page height is 100dvh; a prefers-reduced-motion: reduce block forces all content visible and static
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
## A. WHAT IS BEING BUILT

Build one complete, self-contained `index.html` for **Thermal** — an industrial-monitoring company turning sensor meshes into live heat maps. Document title: `Thermal — Continuous Heat Intelligence`. `<html lang="en">`. ONE file: plain HTML + CSS + JS in `<style>` and one `<script>` at end of body. No build step, no framework, no bundler. Google Fonts is the ONLY network request (Inter + IBM Plex Mono, system fallback stacks). Every visible pixel comes from CSS gradients, inline SVG, text, and one `<canvas>`.

**Viewport rule:** at width `>= 901px` the page is one locked frame — `html, body { height:100%; overflow:hidden }` and `.page { height:100dvh; overflow:hidden }`. NO SCROLL on desktop. At width `<= 900px` the page may scroll vertically. No horizontal overflow at any width.

The single visual idea: a full-bleed `<canvas>` heat map — a 48×27 cell grid where three drifting emitters inject heat that diffuses between neighbours every frame, each cell mapped through an inferno-structured ramp. Cool blue edges, violet mid-field, hot magenta core, white-pink peak. Over it: a HUD with a legend strip (20°C → 620°C), a live hottest-cell readout, and a crosshair on that cell. Industrial-monitoring, instrument-grade, cinematic.

**Do NOT build:** no video, no WebGL, no Three.js, no Lottie, no GSAP, no jQuery, no Tailwind, no React, no remote or base64 images, no audio, no forms, no pricing tables, no testimonials, no dashboards, no charts beyond the legend strip, no sections beyond header / hero / footer, no footer links beyond the three specified, no cookie banner, no scroll indicator, no desktop hamburger.

---

## B. THE BACKDROP — procedural heat field (the ONLY visual effect besides grain and the marker)

A single `<canvas id="heat">` fills the viewport: `position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block`, repainted every animation frame via `requestAnimationFrame`. NEVER a static image.

**The field (canvas 2D, no libraries):**

- Grid `W = 48`, `H = 27` at `>= 901px` (1296 cells); at `<= 900px` transpose to `W = 27`, `H = 48` (still 1296) so cells stay near-square on portrait screens.
- Two `Float32Array(1296)` buffers `cur` / `nxt`; index `i = y * W + x`.
- **Diffusion step, once per frame**, clamped (zero-flux) neighbours:
  `lap = up + down + left + right - 4 * c`
  `v = (c + 0.18 * lap) * 0.9962`   (`K = 0.18`, `COOL = 0.9962`)
  if `x < 2 || x > W-3 || y < 2 || y > H-3` then `v *= 0.982` (`EDGE_DAMP` — this keeps the rim cold blue and the core hot)
  clamp `v` to `[0, 1]`, write `nxt[i]`; swap buffer references after the pass. No allocation in the loop.
- **Emitters: exactly 3**, `k = 0..2`, at time `t` seconds:
  `ex = 23.5 + 22 * Math.sin(t * 0.19 + k * 2.094)`
  `ey = 13.0 + 11.5 * Math.sin(t * 0.27 + k * 4.189)`
  (phases are thirds of a turn). Round to the nearest cell; inject the 3×3 footprint with weights `[[0.28,0.55,0.28],[0.55,1.00,0.55],[0.28,0.55,0.28]] * 0.14` (`INJ`), clamped to 1.0.
- **Pointer injection:** `pointermove` only stores the latest client position. Once per frame map it through the CACHED canvas rect to a cell and inject `0.22` (`POINTER_INJ`) at the centre, `0.11` at its 4-neighbours, clamped to 1.0 — at most one injection per frame. `pointerleave` clears it.
- **Ramp LUT:** build `Uint8Array(768)` (256 RGB triplets) ONCE from 8 stops — `0.00 #030614`, `0.14 #0b2a72`, `0.32 #3a1f92`, `0.50 #8b1c8a`, `0.68 #d4217f`, `0.82 #ff3d8f`, `0.93 #ff9ad0`, `1.00 #ffeaf4` — linearly interpolated. Per cell: `idx = Math.min(255, (Math.pow(v, 0.85) * 255) | 0)`; write `lut[3*idx], lut[3*idx+1], lut[3*idx+2], 255` into the ImageData.
- **The resolution trick (the entire cost saving):** the field renders into an offscreen canvas `field` sized EXACTLY `W × H` (48×27): one `putImageData` per frame. Then ONE `ctx.drawImage(field, 0, 0, W, H, 0, 0, cssW, cssH)` with `imageSmoothingEnabled = true`, `imageSmoothingQuality = 'high'` upscales it — the smoothing IS the bloom, free from the compositor. NEVER set `ctx.filter` or `ctx.shadowBlur`. Main canvas backing store `cssW*dpr × cssH*dpr`, `dpr = Math.min(devicePixelRatio, 2)` (1.5 at `<= 900px`), `ctx.setTransform(dpr,0,0,dpr,0,0)`. `field` is never resized.
- **Overlay pass:** a second offscreen canvas `fx` at `cssW*dpr × cssH*dpr`, redrawn ONLY on resize: (1) cell hairlines `rgba(4,7,22,0.50)` 1px at every boundary, (2) heavy lines `rgba(4,7,22,0.75)` 1px every 8 cells, (3) cool edge tint — radial `rgba(11,42,114,0)` at 42% → `rgba(11,42,114,0.24)` at 100%, (4) vignette — radial `rgba(3,6,20,0)` at 52% → `rgba(3,6,20,0.62)` at 100%. Composited each frame with ONE `ctx.drawImage(fx, 0, 0, cssW, cssH)`.
- **Hottest cell:** the colour pass tracks `maxV / maxX / maxY` and the sum. Write ONE `transform: translate3d(maxX*cellW, maxY*cellH, 0)` to `.hotspot` per frame (cached cell size). Update readout text every 6th frame (`frames % 6 === 0`) only when changed. `T = Math.round(20 + v * 600)` → 20–620°C; mean = `Math.round(20 + (sum/1296) * 600)`.
- **Per-frame cost budget:** 1296-cell diffusion (≈ 6.5k array reads), 1296 LUT lookups, 1 `putImageData`, 2 `drawImage`, 1 DOM transform, ≤ 1 text write — 3 canvas primitives total. DOM writes are transform/opacity only. NEVER call `getBoundingClientRect` in the loop; the canvas rect and cell size are cached on resize and reused by the pointer mapper. If `document.hidden`, keep the rAF alive and keep counting frames but skip painting.
- **Grain (CSS):** `.grain`, `position:fixed; inset:-50%; width:200%; height:200%; pointer-events:none; opacity:0.05`, data-URI SVG `feTurbulence` (`type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"` + `feColorMatrix saturate 0`), tile 160px, `animation: grain 0.9s steps(4) infinite` jittering `translate` among `(0,0) (-2%,1%) (1%,-2%) (-1%,2%)`.

---

## C. THE LAYER STACK (back → front)

1. `html, body` — `#04071a`, forced twice (see Failure Guards).
2. `canvas#heat` — z-index 0: upscaled heat field + cached `fx` overlay.
3. `.scrim` — z-index 1, `position:fixed; inset:0; background: linear-gradient(180deg, rgba(4,7,22,0.74) 0%, rgba(4,7,22,0.20) 28%, rgba(4,7,22,0.18) 58%, rgba(4,7,22,0.82) 100%)` for text contrast top and bottom.
4. `.page` — z-index 2, `position:relative; display:grid; grid-template-rows: auto minmax(0,1fr) auto; min-height:100dvh` (`height:100dvh` inside the desktop lock).
5. `.hotspot` — z-index 3, the hottest-cell crosshair, `position:fixed; pointer-events:none`.
6. `.grain` — z-index 4; browser focus outlines stay visible regardless.

---

## D. TOKEN TABLE (defaults at ~1440px)

```
--bg:            #04071a
--text:          #eef2fa
--text-soft:     #c6d0e4
--muted:         #8a93ab
--dim:           #5a6480
--accent:        #ff3d8f
--accent-dim:    rgba(255,61,143,0.55)
--accent-line:   rgba(255,61,143,0.30)
--accent-fill:   rgba(255,61,143,0.06)
--cool:          #2b5fd0
--cool-line:     rgba(43,95,208,0.45)
--line:          rgba(255,255,255,0.14)
--line-soft:     rgba(255,255,255,0.08)
--panel:         rgba(4,7,22,0.55)
--panel-line:    rgba(255,255,255,0.12)
--logo:          15px
--logo-track:    0.22em
--nav:           12px
--nav-h:         34px
--eyebrow:       11.5px
--h1:            64px
--lead:          17px
--btn:           13px
--btn-h:         42px
--hud-label:     10.5px
--hud-value:     30px
--hud-stat:      11.5px
--legend-label:  10.5px
--legend-h:      8px
--legend-w:      252px
--foot:          12.5px
--header-y:      24px
--header-x:      40px
--hero-x:        40px
--hero-y:        32px
--hero-max:      1180px
--hero-gap:      56px
--hud-w:         296px
--hud-pad:       20px
--foot-y:        22px
--radius-chip:   3px
--radius-panel:  6px
--mono:          "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
--sans:          "Inter", system-ui, -apple-system, "Segoe UI", sans-serif
--ease-out:      cubic-bezier(0.16,1,0.3,1)
--enter-dur:     0.95s
--grain-dur:     0.9s
--pulse-dur:     2.4s
--blink-dur:     1.06s
```

Canvas JS constants mirroring the CSS: `FIELD_W 48`, `FIELD_H 27`, `FIELD_W_SM 27`, `FIELD_H_SM 48`, `DPR_MAX 2`, `DPR_MAX_SM 1.5`, `TEMP_MIN 20`, `TEMP_SPAN 600`, `LUT_N 256`, `READOUT_EVERY 6` (plus `K`, `COOL`, `EDGE_DAMP`, `INJ`, `POINTER_INJ` as defined in B). Fonts: one `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` + one stylesheet (`display=swap`) loading `Inter:wght@400;500;600` and `IBM+Plex+Mono:wght@400;500`.

---

## E. THE COMPOSITION — exact build order

**.page** is the grid container with three rows: `<header>`, `<main>`, `<footer>`.

**HEADER** — `padding: var(--header-y) var(--header-x); display:flex; align-items:center; justify-content:space-between; gap:24px`.

- `a.brand` (href `#`, accessible name "Thermal home"): inline SVG 20×20 — four 7×7 cells (`rx="1"`) at (2,2), (11,2), (2,11), (11,11) filled `#0b2a72`, `#8b1c8a`, `#3a1f92`, `#ff3d8f` — then wordmark `THERMAL`, `var(--mono)`, `font-size:var(--logo); font-weight:500; letter-spacing:var(--logo-track); color:var(--text)` — then a 5px live pixel `background:var(--accent); box-shadow:0 0 8px var(--accent-dim); margin-left:10px` with `blink`.
- `nav`, `display:flex; align-items:center; gap:30px; height:var(--nav-h)`: exactly 4 links `System`, `Sensors`, `Firmware`, `Docs` (rendered uppercase, `font-size:var(--nav); letter-spacing:0.14em; color:var(--muted)`), all `href="#"`, each with an aria-hidden index `01`–`04` in `var(--dim)`, `margin-right:8px`. Hover `color:var(--text)` 0.18s; index stays dim.
- Right: `a.btn.btn--ghost` (href `#`) text `Request a pilot`, header variant `height:var(--nav-h); padding:0 16px`.
- At `<= 900px` the nav is replaced by `button.burger` (`aria-label="Open navigation"`, `aria-expanded="false"`, three 18×1.5px `var(--text)` bars, gap 5px).

**MAIN (hero)** — `display:grid; grid-template-columns: minmax(0,1fr) var(--hud-w); gap:var(--hero-gap); align-items:center; padding:var(--hero-y) var(--hero-x); width:100%; max-width:var(--hero-max); margin:0 auto; min-width:0`. Copy left, HUD right, centred in the 1fr row.

Left column:

1. `.eyebrow` — mono `var(--eyebrow)`, `letter-spacing:0.18em; text-transform:uppercase; color:var(--dim)`. Copy: `PLANT 04 — FURNACE ARRAY B — 20 Hz` with `PLANT 04` in `var(--accent)`.
2. `h1` — EXACTLY ONE `<h1>`, `var(--sans); font-weight:600; font-size:var(--h1); letter-spacing:-0.045em; line-height:1.02; color:var(--text); margin:18px 0 0`. Two masked lines (see Motion): line 1 `Heat is data.`, line 2 `Failure is a signal.` with `<em>signal</em>` = `font-family:var(--mono); font-style:normal; font-weight:400; font-size:0.90em; letter-spacing:-0.02em; color:var(--accent)`.
3. `p.lead` — `font-size:var(--lead); line-height:1.6; color:var(--text-soft); max-width:520px; margin:20px 0 0`. Copy: `Thermal fuses four thousand furnace, bearing and transformer sensors into one continuous heat map, so your team watches the failure form — before the first alarm ever fires.`
4. `.actions` — `display:flex; gap:12px; flex-wrap:wrap; margin-top:28px`: `a.btn.btn--hot` `Request a pilot`, `a.btn.btn--ghost` `Read the spec sheet`, both `href="#"`, `height:var(--btn-h); padding:0 20px; font-size:var(--btn)`.

Right column `aside.hud` — `width:100%; max-width:var(--hud-w); padding:var(--hud-pad); border:1px solid var(--panel-line); border-radius:var(--radius-panel); background:var(--panel); backdrop-filter:blur(8px); display:grid; gap:16px`.

- `.hud-head` — `display:flex; align-items:center; justify-content:space-between`: label `HOTTEST CELL` mono `var(--hud-label); letter-spacing:0.2em; color:var(--dim)` + a 5px accent pixel with `blink`.
- `.hud-value` — mono `var(--hud-value); font-weight:500; color:var(--accent); letter-spacing:0.02em; margin-top:-8px`. JS owns it; static fallback `R14 · C27 · 312°C`. JS format: `R` + (row+1) + ` · C` + (col+1) + ` · ` + T + `°C`.
- `.hud-stats` — a `<dl>`, `display:grid; grid-template-columns:1fr 1fr; gap:10px 16px`, mono `var(--hud-stat)`, labels `var(--dim)`, values `var(--text-soft)`: `MEAN` → JS `214°C` (fallback), `GRID` → `48 × 27`, `EMITTERS` → `3`, `K / COOL` → `0.18 / 0.9962`.
- `.legend` — `width:var(--legend-w); max-width:100%; height:var(--legend-h); border-radius:2px; border:1px solid var(--line-soft); background:linear-gradient(90deg, #030614 0%, #0b2a72 14%, #3a1f92 32%, #8b1c8a 50%, #d4217f 68%, #ff3d8f 82%, #ff9ad0 93%, #ffeaf4 100%)` (the LUT stops). Below: `.legend-scale` `display:flex; justify-content:space-between; margin-top:8px`, mono `var(--legend-label)` in `var(--dim)`: `20°C`, `320°C`, `620°C`.
- `.hud-foot` — mono 10px `var(--dim)`: `SAMPLING 20 Hz · DIFFUSION 48×27`.

**FOOTER** — `padding:var(--foot-y) var(--header-x); display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line-soft)`. Left mono `var(--foot)` `var(--dim)`: `© 2026 Thermal Industrial Systems`. Centre: a 7px accent square (`margin-right:8px; box-shadow:0 0 8px var(--accent-dim)`) + `sensor mesh nominal · 4,096 nodes`. Right: exactly 3 links `spec sheet`, `status`, `contact`, mono `var(--foot)`, `var(--muted)`, `gap:22px`, hover `color:var(--text)`.

---

## F. THE UI LANGUAGE

Two button treatments only, both square-cut instrument chips with `border-radius: var(--radius-chip)`. `a.btn` is `inline-flex; align-items:center; justify-content:center; text-decoration:none; font-family:var(--mono); font-weight:500; letter-spacing:0.06em; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease`.

- `.btn--hot` (hero primary): `color:#1a0512; border:1px solid rgba(255,61,143,0.55); background:linear-gradient(180deg, #ff9ad0 0%, #ff3d8f 52%, #d4217f 100%); box-shadow:0 14px 40px rgba(255,61,143,0.22), inset 0 1px 0 rgba(255,255,255,0.5)`. Hover: `background:linear-gradient(180deg, #ffe0f0 0%, #ff5fa5 50%, #e0268a 100%); transform:translateY(-1px); box-shadow:0 18px 48px rgba(255,61,143,0.32), inset 0 1px 0 rgba(255,255,255,0.6)`. Active: `transform:none`.
- `.btn--ghost` (hero secondary + header CTA): `color:var(--accent); border:1px solid var(--accent-line); background:var(--accent-fill)`. Hover: `background:rgba(255,61,143,0.13); border-color:var(--accent-dim); box-shadow:0 0 16px rgba(255,61,143,0.18)`.
- Nav and footer links are plain mono text — no pills, no backgrounds, no underline ever; hover swaps colour only. Every interactive element gets `:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px }`. Selection: `::selection { background: rgba(255,61,143,0.30); color:#fff }`. No default blue focus ring, no text underline anywhere.

---

## G. MOTION — entrance stagger + named keyframes

All entrance animations: `animation-duration: var(--enter-dur); animation-fill-mode: both; animation-timing-function: var(--ease-out); animation-delay: var(--d, 0.08s)`. Each animated element carries `.appear`, one modifier, and an inline `--d`.

Stagger table (element → modifier → --d):
```
brand            appear--fade   0.06s
nav 01 System    appear--fade   0.14s
nav 02 Sensors   appear--fade   0.20s
nav 03 Firmware  appear--fade   0.26s
nav 04 Docs      appear--fade   0.32s
header cta       appear--chip   0.40s
eyebrow          appear--fade   0.48s
h1 line 1        appear--mask   0.62s
h1 line 2        appear--mask   0.78s
lead             appear--soft   0.96s   (duration 1.15s)
hot button       appear--chip   1.10s
ghost button     appear--chip   1.18s
hud panel        appear--hud    1.26s   (duration 1.25s)
hud value        appear--fade   1.40s
legend strip     appear--wipe   1.46s   (duration 1.10s)
footer left      appear--fade   1.58s
footer centre    appear--fade   1.64s
footer right     appear--fade   1.70s
```

Named keyframes (all end at opacity 1 / identity transform):
```
in-fade   from { opacity: 0 }                                                 to { opacity: 1 }
in-soft   from { opacity: 0; transform: translateY(14px); filter: blur(4px) } to { opacity: 1; transform: none; filter: blur(0) }
in-mask   from { opacity: 0; transform: translateY(105%) }                    to { opacity: 1; transform: none }
in-chip   from { opacity: 0; transform: translateY(8px) scale(0.96) }         to { opacity: 1; transform: none }
in-hud    from { opacity: 0; transform: translateX(18px) }                    to { opacity: 1; transform: none }
in-wipe   from { opacity: 0; clip-path: inset(0 100% 0 0) }                   to { opacity: 1; clip-path: inset(0 -2% 0 0) }
```

H1 masking: each line is `<span class="line"><span class="line-inner appear appear--mask">…</span></span>` with `.line { display:block; overflow:hidden; padding:0.04em 0.08em 0.10em }`, `.line-inner { display:inline-block }`. `in-wipe` reveals the legend gradient left→right like a scale being drawn. Continuous keyframes, independent of the stagger:
```
blink      0%,49% { opacity: 1 }  50%,100% { opacity: 0 }                                        (1.06s steps(1) infinite)
hot-pulse  0% { transform: scale(0.55); opacity: 0.85 }  70% { opacity: 0 }  100% { transform: scale(1.7); opacity: 0 }  (2.4s ease-out infinite)
grain      0% { translate(0,0) } 25% { translate(-2%,1%) } 50% { translate(1%,-2%) } 75% { translate(-1%,2%) }          (0.9s steps(4) infinite)
```
`.hotspot` is positioned ONLY by JS via `transform: translate3d()`; its child `.hotspot-ring` (1px `var(--accent)` square, `opacity:0.8`) runs `hot-pulse`. Crosshair: `::before` 13px×1px bar, `::after` 1px×13px bar, both `background:var(--accent-dim)`, centred in the cell. The field animates via rAF, not CSS.

---

## H. RESPONSIVE TABLE — token overrides per breakpoint (exact)

```
>= 1600px:
  --h1: 76px  --logo: 16px  --nav: 12.5px  --btn: 13.5px  --btn-h: 44px
  --lead: 18px  --hud-w: 320px  --hud-value: 34px  --legend-w: 276px
  --header-x: 56px  --hero-x: 56px  --hero-max: 1320px  --hero-gap: 64px  --foot: 13px

>= 1920px:
  --h1: 88px  --lead: 19px  --hud-w: 340px  --hud-value: 38px  --legend-w: 296px
  --header-x: 72px  --hero-x: 72px  --hero-max: 1480px  --hero-gap: 72px

1280px – 1599px:
  --h1: 62px  --header-x: 44px  --hero-x: 44px  --hero-max: 1200px  --hud-w: 300px

901px – 1279px:
  --h1: 50px  --lead: 15.5px  --nav: 11.5px  --nav-h: 32px  --btn: 12.5px  --btn-h: 40px
  --header-x: 30px  --hero-x: 30px  --hero-y: 24px  --hero-gap: 36px
  --hud-w: 260px  --hud-pad: 16px  --hud-value: 26px  --legend-w: 216px  --foot: 12px

>= 901px AND max-height 850px:
  --h1: 52px  --header-y: 16px  --hero-y: 20px  --lead: 15.5px  --hud-value: 26px
  (h1 margin-top 12px, lead margin-top 14px, .actions margin-top 20px, .hud gap 12px)

>= 901px AND max-height 720px:
  --h1: 44px  --header-y: 12px  --hero-y: 12px  --foot-y: 12px  --eyebrow: 11px
  --lead: 14px  --hud-pad: 16px  --hud-value: 22px  --legend-h: 6px  --nav-h: 30px  --btn-h: 36px

>= 901px (desktop lock, all heights):
  html, body { height:100%; overflow:hidden }  .page { height:100dvh; overflow:hidden }

<= 900px:
  no vh lock; page may scroll; canvas field transposes to 27 x 48; dpr cap 1.5
  nav becomes a fixed overlay menu:
  - header keeps brand + burger (button.burger, aria-label "Open navigation", aria-expanded toggled)
  - .menu { position:fixed; inset:0; z-index:10; background: rgba(4,7,22,0.94); backdrop-filter: blur(14px);
      display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding: 0 32px; gap: 24px;
      transform: translateY(-100%); transition: transform 0.45s var(--ease-out) }  .menu.open { transform: none }
  - menu holds the 4 nav links stacked at --nav: 22px plus the ghost CTA chip; Escape, any link click, and resize > 900px all close it
  hero becomes one column: grid-template-columns: 1fr; gap: 28px; align-items: start
  --h1: 42px  --header-x: 22px  --hero-x: 22px  --hero-max: 100%  --hud-w: 100%

<= 560px:
  --h1: 34px  --lead: 15px  --header-x: 18px  --hero-x: 18px  --hud-value: 24px
  --legend-w: 100%  --foot: 11.5px
  footer becomes flex-direction:column; align-items:flex-start; gap:10px
  header CTA is hidden (it lives inside the menu on mobile)
```

---

## I. FAILURE GUARDS — the page is never blank, never broken

1. **Dark-first:** the FIRST CSS rule is `html, body { background:#04071a !important; color:#eef2fa }`; the body tag carries `style="background:#04071a;color:#eef2fa"`; a later rule restates `html, body { background:#04071a; background: var(--bg, #04071a) }`.
2. **Resting opacity is 1:** every `.appear` element's un-animated state is its final state (opacity 1, no transform, no clip-path); `fill-mode: both` only holds the FROM state during the delay. With animations failed or JS absent the page is complete, including the fallback readouts.
3. **Two-rAF fallback:** after two nested `requestAnimationFrame` ticks, inspect every `.appear` with `el.getAnimations({ subtree:false })`; if none reports `running` or `finished` (or `getAnimations` is missing), add `.is-in` to every `.appear`. `.is-in { animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important }`.
4. **Canvas fallback:** if canvas or 2D context is missing, add `.no-canvas` to `<html>` and paint a static heat map in CSS: `.no-canvas body { background: radial-gradient(ellipse at 50% 58%, #ff3d8f 0%, #d4217f 16%, #8b1c8a 34%, #3a1f92 56%, #0b2a72 78%, #030614 100%) }`. HUD, legend and readouts stay readable; push one string into `window.__DEMO__.errors`.
5. **Reduced motion:** inside `@media (prefers-reduced-motion: reduce)`: `*, *::before, *::after { transition:none !important; animation:none !important }`; force `.appear, .line-inner` to `opacity:1 !important; transform:none !important; clip-path:none !important`; hide `.grain` and `.hotspot-ring`; the canvas paints ONE static frame at fixed `t = 6.4s` (field already structured), parks the crosshair on that frame's hottest cell, sets `ready = true` and `frames = 1`, then stops scheduling. Static, complete, readable.
6. **Zero console output** in the happy path: no `console.log`, no thrown exceptions; every canvas call null-guarded.

---

## J. THE EXACT JS (only this, vanilla, one IIFE at end of body)

1. **Telemetry first:** `window.__DEMO__ = { name: 'thermal', ready: false, frames: 0, effects: [], errors: [] };` then push exactly these, once, in order: `'heat-diffusion'`, `'inferno-lookup'`, `'hottest-cell-hud'`, `'grain-texture'`. Immediately attach `window.addEventListener('error', e => window.__DEMO__.errors.push(String(e.message || e)))`.
2. **Cache everything up front:** `document.documentElement`, `canvas#heat`, its 2D context (null → `.no-canvas` path + one errors push), the `field` canvas (`W × H`) and its ImageData, the `fx` overlay canvas, `cur`/`nxt` Float32Array(1296), the LUT, `.hotspot`, `.hud-value`, the mean `dd`, burger, menu, menu links, and `matchMedia('(prefers-reduced-motion: reduce)')`.
3. **Palette build:** interpolate the 8 section-B stops into the 256-entry LUT once at startup.
4. **Layout cache:** `resize()`, scheduled by a boolean `resizeQueued` + `requestAnimationFrame` (never a timer): measure the canvas ONCE with `getBoundingClientRect`, store `cssW, cssH, rect, cellW = cssW / W, cellH = cssH / H`, size the backing store with `dpr = Math.min(devicePixelRatio, innerWidth <= 900 ? 1.5 : 2)`, `ctx.setTransform(dpr,0,0,dpr,0,0)`, redraw `fx` (hairlines every cell, heavy lines every 8 cells, cool edge tint, vignette). Switch the field to 27×48 at `innerWidth <= 900`, back to 48×27 above.
5. **The rAF loop `frame(ts)`:** increment `window.__DEMO__.frames` by exactly 1 every tick. If `document.hidden`, skip painting and reschedule. Otherwise with `t = ts / 1000`: (a) diffusion pass verbatim from B, no allocation, (b) advance and inject the 3 emitters, (c) one queued pointer injection, (d) LUT colour-pass tracking `maxV/maxX/maxY` and the sum, (e) `putImageData`, (f) `drawImage(field …)` upscaled with smoothing, (g) `drawImage(fx …)`, (h) `translate3d(maxX*cellW, maxY*cellH, 0)` on `.hotspot`, (i) every 6th frame, if changed, `R{maxY+1} · C{maxX+1} · {Math.round(20 + maxV*600)}°C` into `.hud-value` and `{Math.round(20 + (sum/1296)*600)}°C` into the mean. On the FIRST completed paint set `window.__DEMO__.ready = true`. Always reschedule `requestAnimationFrame(frame)`.
6. **Entrance fallback:** two nested rAFs after DOMContentLoaded, then the `.is-in` sweep (Failure Guards 3).
7. **Menu (mobile only):** burger toggles `.menu.open` and `aria-expanded`; Escape closes; any menu link click closes; resize to `> 900px` closes.
8. **Reduced motion:** read the query once; if it matches, run one `frame(6400)` with no reschedule — one static paint, `ready = true`, `frames = 1`.

No other JS. No timers. No libraries. No console calls.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Undertow

- Slug: `undertow`
- Page: https://landingpageprompts.com/prompts/undertow
- Effect: A self-illuminating curl-noise particle vortex draws the eye toward an off-centre data drain.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 45,167; total with repair and cross-check: 175,121
- Verification: 20/20 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - A headless browser reports document.title exactly as “Undertow — Data infrastructure in motion”, document.documentElement.lang as “en”, exactly one h1, and semantic header, nav, main, and footer elements.
  - At 1440x900 and 1920x1080 the page has no vertical document scrollbar and no horizontal overflow, while at 390x844, 768x1024, and 600x900 all content remains inside the viewport width and the page remains readable with vertical scrolling.
  - window.__DEMO__ has name “undertow”, ready is true after first paint, frames increases by at least 20 over a 1200ms interval at 1440x900, effects includes “vortex-particle-field” and “offscreen-glow-composite”, and errors remains empty.
  - The visible canvas has 900 particle line segments on the initial desktop frame, the offscreen glow is composited once per frame, and no getBoundingClientRect or getComputedStyle call occurs inside the animation loop.
  - With prefers-reduced-motion set to reduce, telemetry.frames equals 1, all content has opacity 1, no CSS entrance, pulse, or drain animation is active, and every visible link retains a non-transparent :focus-visible outline.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
WHAT IS BEING BUILT

Build a single-viewport cinematic landing page for a data-infrastructure company named “UNDERTOW”. The page is a dark, editorial product statement: an approximately 900-particle canvas vortex moves behind restrained navigation, a left-aligned hero block, a compact proof strip, and a minimal footer. The visual centre is not a conventional logo lockup. It is an off-centre black drain at 66% horizontal and 51% vertical, surrounded by teal particle acceleration. The hero copy occupies the calmer negative space from 10% to 51% of the viewport.

Set the document title to “Undertow — Data infrastructure in motion” and the root language to en. Use <meta name="viewport" content="width=device-width, initial-scale=1">. At viewport widths of 901px and above, html, body, and .page must be exactly 100dvh high and overflow:hidden. At 900px and below, use normal document flow, allow vertical scrolling, and preserve a minimum content height of 100dvh. Never allow horizontal overflow at any supported width.

The document must contain one <header>, one <main>, one <footer>, and one <nav>. It must contain exactly one <h1>. Every visible control must be a real link or button with an accessible name. Use :focus-visible to render a visible 2px accent ring with a 3px offset.

Do NOT build a dashboard, chart, table, pricing grid, account interface, modal, menu drawer, login form, multi-section marketing site, horizontal carousel, video background, image gallery, 3D scene, or secondary page. Do NOT add a second h1, decorative heading, cookie banner, chat launcher, cursor follower, scroll indicator, framework, library, external asset, or remote API call. Do NOT use image files, SVG files, base64 media, video, GIFs, web fonts other than Google Fonts, or third-party CDNs. Do NOT use React, Tailwind, GSAP, Three.js, Lottie, WebGL, or a build step. Google Fonts is the sole permitted network request; import “Manrope” at weights 400, 500, and 600, with ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif as the fallback stack.

THE BACKDROP

Create a fixed .backdrop element covering the viewport with z-index 0. Its base background is a near-black radial and linear gradient composite, not a flat fill. Use these exact gradient decisions:

- base color: #05080c;
- outer field: radial-gradient(circle at 66% 51%, #06131a 0%, #071017 17%, #080d13 35%, #05080c 68%);
- upper-left cast: radial-gradient(circle at 12% 4%, rgba(42, 62, 73, 0.30) 0%, rgba(14, 25, 32, 0.10) 28%, transparent 52%);
- lower-edge sink: linear-gradient(180deg, transparent 0%, rgba(4, 7, 10, 0) 62%, rgba(0, 0, 0, 0.54) 100%);
- drain: radial-gradient(circle at 66% 51%, #000306 0%, #000306 5%, rgba(0, 3, 6, 0.98) 9%, rgba(0, 5, 8, 0.68) 15%, transparent 26%).

Add a .grain element above the canvas and below the copy. It must be a CSS-generated background, 190px by 190px, repeated at 0, 0, using four inline radial-gradient dots with opacities 0.026, 0.018, 0.021, and 0.012. Apply opacity 1. Do not animate the grain. Add a vignette with inset box-shadow 0 0 190px 64px rgba(0, 0, 0, 0.50), so the left copy and the drain remain the darkest readable regions.

Render one visible <canvas class="vortex"> and one non-DOM offscreen glow canvas. Use exactly 900 particles at 901px and above, 720 from 601px through 900px, 580 from 431px through 600px, and 420 below 431px. Particle positions use CSS-pixel coordinates. Each particle carries x, y, previousX, previousY, age, life, speedBias, size, hueMix, and phase. Particle life is randomized from 5.4s to 10.8s. Initial life offsets must be distributed across the full life interval so the field is populated on the first frame.

The vortex centre is exactly 66% of viewport width and 51% of viewport height. The radial pull strength is 0.0022 per frame per CSS pixel, capped so a particle does not gain more than 2.4 CSS pixels of inward displacement in one frame. Tangential motion uses two offset sine fields as a cheap curl-noise approximation. For a particle at x, y, and time t, compute fieldA as sin(y * 0.0062 + t * 0.00037 + phase), fieldB as sin(x * 0.0047 - t * 0.00029 - phase), and the curl turn as sin((x + y) * 0.0031 + t * 0.00021 + fieldA * 0.72) + fieldB * 0.42. Apply 0.19 CSS pixels of clockwise tangential displacement, then apply the radial pull, then apply a 0.12px drag. A signed cross-clockwise bias of 0.35 multiplied by speedBias creates occasional counter-current strands without reversing the main vortex.

Each particle is drawn as a 1px line from its previous position to its current position. Use source-over for the core field. Particle stroke colors interpolate from #19333a at 70% acceleration to #5eead4 at 100% acceleration, with the final 14% of life approaching #d8fffa so respawns do not flash. Stroke alpha ranges from 0.09 to 0.72. Particle size is stored as a CSS value from 0.7px to 1.25px, but canvas strokes remain exactly 1 device-independent pixel at DPR 1.5. Do not use round particles or glow sprites.

Respawn a particle when life reaches zero, when it enters the central 3.2% radius, or when it leaves the viewport by more than 80px. Respawn on an elliptical rim between 46% and 78% of the larger viewport dimension from the drain. Bias 72% of respawns into the right and lower arcs. Reset previousX and previousY to x and y before the next update.

Every animation frame, clear and update all particles, draw all particle strokes once to the visible canvas, then composite the blurred offscreen field. Create the glow canvas at exactly 50% of the visible canvas backing resolution. Draw the visible particle field to the glow canvas through one drawImage call. Set glowCtx.filter to blur(3.2px) exactly once immediately before that drawImage call, reset it to “none” immediately afterward, and never set glowCtx.filter inside the particle loop. Draw the glow canvas into the visible canvas once with globalCompositeOperation “screen” and globalAlpha 0.34. Reset composite modes after compositing.

The visible canvas uses devicePixelRatio capped at 1.5. Backing dimensions equal rounded CSS dimensions multiplied by 1.5. Set the CSS width and height to 100%. The offscreen canvas uses a 0.5 scale multiplier relative to the visible backing dimensions, not 0.5 device pixels. Resize both canvases only when a resize event or the first measurement changes the stored width or height. The target per-frame cost on a 1440x900 headless viewport is 900 particle updates, 900 single line strokes, one full-resolution offscreen downscale, one filtered offscreen upscale, and no DOM layout reads. Target less than 7ms of JavaScript and canvas work per frame, less than 19,800 visible backing pixels processed per particle coordinate, and no allocation inside the particle loop.

THE LAYER STACK

Use these exact z-index values from back to front:

- body and .page background: 0;
- .backdrop gradients: 0;
- .vortex canvas: 1;
- .grain: 2;
- .vignette: 3;
- header.site-header: 10;
- main.hero: 20;
- footer.site-footer: 30;
- focus rings inherit their control stacking context and must remain above adjacent decoration.

The header, hero, and footer must be transparent and must not receive pointer-events:none. Decorative background layers must have pointer-events:none and aria-hidden="true". The canvas must have aria-hidden="true". The page must never put dense particle strokes behind body copy with opacity below 0.78; apply a left-side linear scrim from rgba(5, 8, 12, 0.90) 0% to rgba(5, 8, 12, 0.46) 38% to transparent 57%.

THE TOKEN TABLE

Define every visual decision in :root with these exact names and values:

- --font-sans: “Manrope”, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif;
- --color-bg: #05080c;
- --color-surface: #0a1117;
- --color-copy: #eef7f5;
- --color-muted: #8da19f;
- --color-faint: #536563;
- --color-line: rgba(148, 184, 180, 0.18);
- --color-accent: #5eead4;
- --color-accent-bright: #d8fffa;
- --color-dark-accent: #0f4f49;
- --header-height: 76px;
- --header-pad-x: clamp(24px, 4.4vw, 84px);
- --page-pad-x: clamp(24px, 5.2vw, 100px);
- --page-pad-y: 32px;
- --hero-max-width: 624px;
- --hero-copy-width: 570px;
- --eyebrow-size: 11px;
- --eyebrow-tracking: 0.20em;
- --eyebrow-line: 14px;
- --h1-size: clamp(52px, 5.25vw, 84px);
- --h1-line: 0.94;
- --h1-tracking: -0.055em;
- --h1-weight: 600;
- --body-size: 16px;
- --body-line: 1.65;
- --body-width: 492px;
- --nav-size: 12px;
- --nav-tracking: 0.05em;
- --button-height: 46px;
- --button-pad-x: 20px;
- --button-radius: 999px;
- --button-font-size: 12px;
- --button-tracking: 0.04em;
- --pill-height: 30px;
- --pill-pad-x: 11px;
- --pill-radius: 999px;
- --pill-font-size: 10px;
- --pill-tracking: 0.13em;
- --proof-gap: 34px;
- --proof-value-size: 19px;
- --proof-label-size: 9px;
- --proof-label-tracking: 0.14em;
- --footer-size: 10px;
- --footer-tracking: 0.12em;
- --focus-width: 2px;
- --focus-offset: 3px;
- --motion-ui: 720ms;
- --motion-fast: 360ms;
- --ease-out: cubic-bezier(0.16, 1, 0.3, 1).

THE COMPOSITION

Build the body as <div class="page"> containing .backdrop, canvas.vortex, .grain, .vignette, then the semantic page landmarks. The .page is position:relative; isolation:isolate; min-height:100dvh.

Build header.site-header as a semantic header positioned absolute at inset:0 0 auto 0, height:var(--header-height), and padding-inline:var(--header-pad-x). Its inner .header-row uses display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:100%. The left child is <a class="wordmark" href="#main" aria-label="Undertow home">UNDERTOW</a>. The center child is <nav aria-label="Primary navigation"> with display:flex; gap:34px. Its exact link labels are “Platform”, “Network”, and “Company”. The right child is <a class="header-cta" href="#contact">Talk to us <span aria-hidden="true">↗</span></a>, justified-self:end. Do not center the navigation by visual guess; preserve the 1fr auto 1fr grid.

Build main#main.hero with position:relative; z-index:20; display:grid; grid-template-columns:minmax(0, 1fr) minmax(360px, 0.86fr); grid-template-rows:auto 1fr auto; min-height:100dvh; padding:132px var(--page-pad-x) 82px. The hero content starts in column 1, row 2, aligned to center with align-self:center and transform:translateY(-16px). The drain remains visible in column 2 around 66% viewport width.

Create an .eyebrow row above the heading. It contains a 6px accent status dot and the exact text “DATA INFRASTRUCTURE / LIVE”. Do not place the status dot inside the accessible name. Add one <h1> with the exact lines “Data moves.<br>Undertow knows<br>where it leads.” The h1 uses the h1 tokens, max-width:624px, margin:22px 0 28px, and text-wrap:balance.

Place this exact paragraph below the h1: “Undertow maps live data flow across your systems, reveals pressure before it becomes failure, and routes every workload toward a clearer path.” Set its exact width to var(--body-width), color:var(--color-muted), and margin:0 0 32px.

Create .actions as display:flex; gap:12px; align-items:center. The primary link is <a class="button button-primary" href="#contact">Explore the platform <span aria-hidden="true">→</span></a>. The secondary link is <a class="button button-secondary" href="#network">View the network</a>. Do not use disabled controls.

Create .proof as a semantic <ul> display:grid; grid-template-columns:repeat(3, max-content); gap:var(--proof-gap); margin:38px 0 0; padding:0; list-style:none. The three exact items are “99.999% / UPTIME TARGET”, “38 ms / MEDIAN ROUTE TIME”, and “2.4B / EVENTS / DAY”. Each li contains a .proof-value and a .proof-label. Do not label the values as observed results; they are product claims shown as landing-page content.

Build footer.site-footer as position:absolute; inset:auto var(--page-pad-x) 28px 0; z-index:30; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:24px; font-size:var(--footer-size); letter-spacing:var(--footer-tracking); color:var(--color-faint). The left text is “© 2026 UNDERTOW”. The center is a 6px teal status dot with the visually hidden text “All systems operational”; do not attach an accessible name to a non-control span. The right link is <a href="mailto:hello@undertow.systems">hello@undertow.systems</a>, justified-self:end.

THE UI LANGUAGE

Style the wordmark as color:var(--color-copy), font-size:14px, font-weight:600, letter-spacing:0.18em, and text-decoration:none. Its hover color is var(--color-accent). Nav links are color:var(--color-muted), font-size:var(--nav-size), letter-spacing:var(--nav-tracking), text-decoration:none, and transition:color 180ms ease. Hover and focus-visible color is var(--color-accent-bright).

The header CTA has height:36px, padding:0 15px, display:inline-flex, align-items:center, gap:9px, border:1px solid rgba(94, 234, 212, 0.34), border-radius:999px, color:var(--color-accent), text-decoration:none, font-size:11px, letter-spacing:0.04em, background:rgba(11, 31, 32, 0.34). Hover transforms to translateY(-1px), changes border-color to rgba(94, 234, 212, 0.72), and changes color to var(--color-accent-bright).

The primary button has exact background:linear-gradient(110deg, #d8fffa 0%, #5eead4 54%, #3ccfba 100%); color:#05201d; border:1px solid rgba(216, 255, 250, 0.72); box-shadow:0 8px 30px rgba(24, 183, 164, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.55). Its hover transform is translateY(-2px); its shadow becomes 0 12px 36px rgba(24, 183, 164, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.72). Its active transform is translateY(0). The secondary button uses background:rgba(9, 17, 22, 0.62), border:1px solid var(--color-line), and color:var(--color-copy). Hover changes background to rgba(15, 34, 38, 0.82), border-color to rgba(94, 234, 212, 0.46), and transform to translateY(-2px).

All focus selectors use outline:var(--focus-width) solid var(--color-accent); outline-offset:var(--focus-offset). Do not remove the browser outline without replacing it. Transitions animate transform, opacity, color, border-color, background, and box-shadow; canvas particle motion is rendered inside canvas and does not trigger DOM layout.

MOTION

Use named keyframes named reveal-up, signal-pulse, and drain-breathe. reveal-up animates opacity from 0 to 1 and transform from translate3d(0, 18px, 0) to translate3d(0, 0, 0) over 720ms with var(--ease-out). signal-pulse animates opacity from 0.45 to 1 and transform from scale(0.82) to scale(1) over 1800ms ease-in-out. drain-breathe animates the static drain’s opacity from 0.88 to 1 and transform from scale(0.985) to scale(1) over 5200ms ease-in-out, alternate, infinite. Because the drain is part of a CSS pseudo-element, preserve its final opacity at 1 and set transform-origin:66% 51%.

Apply this exact stagger:

- header .wordmark -> reveal-up -> 80ms;
- primary nav -> reveal-up -> 150ms;
- header CTA -> reveal-up -> 220ms;
- .eyebrow -> reveal-up -> 300ms;
- h1 -> reveal-up -> 390ms;
- hero paragraph -> reveal-up -> 500ms;
- .button-primary -> reveal-up -> 610ms;
- .button-secondary -> reveal-up -> 670ms;
- .proof li:nth-child(1) -> reveal-up -> 760ms;
- .proof li:nth-child(2) -> reveal-up -> 820ms;
- .proof li:nth-child(3) -> reveal-up -> 880ms;
- footer -> reveal-up -> 980ms;
- .status-dot -> signal-pulse -> 1100ms;
- drain pseudo-element -> drain-breathe -> 0ms.

Add these exact animations:

- .wordmark, nav, .header-cta, .eyebrow, h1, .hero-copy p, .actions > *, .proof li, footer { animation:reveal-up var(--motion-ui) var(--ease-out) both; }
- .status-dot { animation:signal-pulse 1800ms ease-in-out 1100ms 2 both; }
- .vortex-drain { animation:drain-breathe 5200ms ease-in-out 0ms infinite alternate; }

Set every animated element’s resting opacity to 1. Do not leave content dependent on JavaScript for visibility. The JavaScript adds no entrance classes; the CSS animation is declarative and must reveal to opacity 1.

The canvas rAF loop is continuous only when reduced motion is not preferred. It increments telemetry.frames exactly once per callback. It must sustain at least 20 callbacks during any 1.2-second sample at 1440x900. Cache width, height, particle count, and particle array references outside the loop. Never call getBoundingClientRect, getComputedStyle, offsetWidth, offsetHeight, clientWidth, or clientHeight inside the loop.

THE RESPONSIVE TABLE

Apply these exact overrides:

At 1440x900 and 1920x1080:
- use all root tokens;
- --page-pad-x:100px;
- --page-pad-y:32px;
- --header-height:76px;
- --hero-max-width:624px;
- --h1-size:84px at 1920px and 76px at 1440px through clamp resolution;
- particle count:900;
- hero grid columns:minmax(0, 1fr) minmax(360px, 0.86fr);
- footer bottom:28px.

At 768x1024:
- --header-height:68px;
- --header-pad-x:32px;
- --page-pad-x:42px;
- --h1-size:64px;
- --h1-line:0.96;
- --body-width:560px;
- --proof-gap:28px;
- particle count:720;
- hero padding-top:112px;
- hero padding-bottom:88px;
- hero grid columns:minmax(0, 1fr) minmax(210px, 0.55fr);
- drain remains at 66% 51%;
- allow vertical document scroll.

At 600px maximum width:
- --header-height:64px;
- --header-pad-x:22px;
- --page-pad-x:24px;
- --h1-size:52px;
- --h1-line:0.98;
- --body-size:15px;
- --body-width:100%;
- --proof-gap:20px;
- --proof-value-size:17px;
- particle count:580;
- header nav display:none;
- header grid-template-columns:1fr auto;
- hero grid-template-columns:1fr;
- hero padding:112px 24px 78px;
- hero content transform:none;
- .actions flex-wrap:wrap;
- .proof grid-template-columns:repeat(3, minmax(0, 1fr));
- footer position:relative;
- footer inset:auto;
- margin:0 24px 26px;
- footer grid-template-columns:1fr auto;
- footer center display:none;
- allow vertical document scroll.

At 430px maximum width:
- --header-pad-x:18px;
- --page-pad-x:18px;
- --h1-size:44px;
- --h1-line:1.00;
- --h1-tracking:-0.045em;
- --body-size:15px;
- --body-line:1.58;
- --button-height:46px;
- --button-pad-x:17px;
- particle count:420;
- header CTA font-size:10px;
- header CTA padding-inline:12px;
- hero padding:96px 18px 64px;
- .actions display:grid;
- grid-template-columns:1fr;
- gap:10px;
- .actions .button width:100%;
- .proof grid-template-columns:1fr;
- gap:18px;
- .proof li display:grid;
- grid-template-columns:92px 1fr;
- align-items:baseline;
- footer margin-inline:18px;
- footer font-size:9px;

At 901px minimum width and 820px maximum height:
- --header-height:64px;
- --page-pad-x:56px;
- --h1-size:62px;
- --body-size:15px;
- hero padding-top:102px;
- hero padding-bottom:64px;
- .proof margin-top:26px;
- footer bottom:18px;
- particle count:760;
- retain single-viewport clipping.

At 900px maximum width and 720px maximum height:
- --header-height:60px;
- --h1-size:48px;
- --body-line:1.5;
- hero padding-top:88px;
- hero padding-bottom:64px;
- .proof margin-top:22px;
- particle count:560;
- allow vertical document scroll.

FAILURE GUARDS

Every non-canvas content element must have opacity:1 as its base state. CSS animation “both” states must finish at opacity:1 and transform:none. If canvas support is unavailable, keep the CSS gradient backdrop, drain, grain, vignette, and copy visible. The h1 and all navigation must remain usable with JavaScript disabled.

Use a two-rAF fallback. The first rAF is scheduled after setup. The second rAF marks telemetry.ready=true and starts the continuous particle loop only after the first frame has been committed. If the main animation rAF has not advanced after 1500ms, a setTimeout watchdog may call start once, guarded by a boolean, but it must not create a second loop. This two-rAF ordering prevents ready=true before first paint while guaranteeing the animation scheduler is active.

Under prefers-reduced-motion:reduce, remove all entrance, pulse, and drain animations with animation:none; force every animated element to opacity:1 and transform:none; stop the particle loop after rendering exactly one static frame; retain the full CSS backdrop and 1px particle field; set telemetry.frames to 1; leave telemetry.ready true. Buttons must have no movement on hover under reduced motion, changing only color or border-color. Do not call cancelAnimationFrame after a loop that was never started.

Add window error and unhandledrejection listeners that push human-readable strings into telemetry.errors. Wrap setup and animation callbacks in try/catch. On a catch, push the error message, set telemetry.ready=true, and stop scheduling further frames. Never write to console. The document must remain readable if WebGL, external fonts, or canvas APIs are unavailable.

THE EXACT JS

Use this exact script at the end of body. It has no dependencies and no network requests:

<script>
(() => {
  'use strict';
  const telemetry = window.__DEMO__ = { name: 'undertow', ready: false, frames: 0, effects: [], errors: [] };
  const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const canvas = document.querySelector('.vortex');
  const ctx = canvas.getContext('2d', { alpha: true, desynchronized: true });
  const glow = document.createElement('canvas');
  const glowCtx = glow.getContext('2d', { alpha: true, desynchronized: true });
  const drain = { x: 0, y: 0 };
  let width = 0;
  let height = 0;
  let ratio = 1;
  let particles = [];
  let count = 900;
  let raf = 0;
  let running = false;
  let started = false;
  let last = 0;
  let time = 0;

  const pushError = value => {
    if (telemetry.errors.length < 20) telemetry.errors.push(String(value && value.message ? value.message : value));
  };

  window.addEventListener('error', event => pushError(event.error || event.message));
  window.addEventListener('unhandledrejection', event => pushError(event.reason));

  const makeParticle = (initial, i) => {
    const life = 5.4 + Math.random() * 5.4;
    const rim = Math.max(width, height) * (0.46 + Math.random() * 0.32);
    const angle = Math.random() * Math.PI * 2;
    let x;
    let y;
    if (initial) {
      x = drain.x + Math.cos(angle) * rim * (0.78 + Math.random() * 0.22);
      y = drain.y + Math.sin(angle) * rim * (0.56 + Math.random() * 0.22);
    } else {
      const biased = Math.random() < 0.72;
      const a = biased ? (Math.random() < 0.5 ? 0 : Math.PI) + (Math.random() - 0.5) * 2.2 : Math.random() * Math.PI * 2;
      x = drain.x + Math.cos(a) * rim;
      y = drain.y + Math.sin(a) * rim * 0.72;
    }
    const p = {
      x, y, previousX: x, previousY: y,
      life, age: initial ? Math.random() * life : 0,
      speedBias: 0.65 + Math.random() * 0.7,
      size: 0.7 + Math.random() * 0.55,
      hueMix: 0.38 + Math.random() * 0.62,
      phase: (i % 97) * 0.0647 + Math.random() * 0.3
    };
    return p;
  };

  const sizeCanvas = () => {
    width = window.innerWidth;
    height = window.innerHeight;
    ratio = Math.min(window.devicePixelRatio || 1, 1.5);
    canvas.width = Math.round(width * ratio);
    canvas.height = Math.round(height * ratio);
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
    const glowScale = 0.5;
    glow.width = Math.max(1, Math.round(canvas.width * glowScale));
    glow.height = Math.max(1, Math.round(canvas.height * glowScale));
    glowCtx.setTransform(glowScale, 0, 0, glowScale, 0, 0);
    drain.x = width * 0.66;
    drain.y = height * 0.51;
    count = width <= 430 ? 420 : width <= 600 ? 580 : width <= 900 ? 720 : 900;
    particles = new Array(count);
    for (let i = 0; i < count; i += 1) particles[i] = makeParticle(true, i);
    ctx.clearRect(0, 0, width, height);
  };

  const resetParticle = (p, i) => {
    const old = p;
    const next = makeParticle(false, i);
    p.x = next.x;
    p.y = next.y;
    p.previousX = next.x;
    p.previousY = next.y;
    p.life = next.life;
    p.age = 0;
    p.speedBias = next.speedBias;
    p.size = next.size;
    p.hueMix = next.hueMix;
    p.phase = next.phase;
  };

  const render = delta => {
    ctx.clearRect(0, 0, width, height);
    glowCtx.clearRect(0, 0, width, height);
    time += delta;
    const frameScale = Math.min(1.6, Math.max(0.35, delta / 16.667));
    for (let i = 0; i < count; i += 1) {
      const p = particles[i];
      p.previousX = p.x;
      p.previousY = p.y;
      const dx = drain.x - p.x;
      const dy = drain.y - p.y;
      const distance = Math.sqrt(dx * dx + dy * dy) || 1;
      const fieldA = Math.sin(p.y * 0.0062 + time * 0.00037 + p.phase);
      const fieldB = Math.sin(p.x * 0.0047 - time * 0.00029 - p.phase);
      const curl = Math.sin((p.x + p.y) * 0.0031 + time * 0.00021 + fieldA * 0.72) + fieldB * 0.42;
      const inward = Math.min(2.4, distance * 0.0022 * frameScale);
      const tangent = 0.19 * frameScale;
      p.x += (-dy / distance) * tangent + (dx / distance) * inward - p.x * 0.00001;
      p.y += (dx / distance) * tangent + (dy / distance) * inward - p.y * 0.00001;
      p.x += curl * 0.055 * p.speedBias * frameScale;
      p.y -= Math.abs(curl) * 0.035 * p.speedBias * frameScale;
      p.age += delta;
      const progress = p.age / p.life;
      const acceleration = Math.min(1, Math.max(0, (distance - 28) / Math.max(width, height) * 1.7));
      if (progress >= 1 || distance < Math.max(24, Math.min(width, height) * 0.032) || p.x < -80 || p.x > width + 80 || p.y < -80 || p.y > height + 80) {
        resetParticle(p, i);
        continue;
      }
      const lifeFade = Math.min(1, progress * 10, (1 - progress) * 7);
      const mix = acceleration * p.hueMix;
      const red = Math.round(25 + mix * 69);
      const green = Math.round(51 + mix * 183);
      const blue = Math.round(58 + mix * 194);
      const alpha = (0.09 + acceleration * 0.63) * Math.max(0, lifeFade);
      ctx.beginPath();
      ctx.moveTo(p.previousX, p.previousY);
      ctx.lineTo(p.x, p.y);
      ctx.strokeStyle = 'rgba(' + red + ',' + green + ',' + blue + ',' + alpha.toFixed(3) + ')';
      ctx.lineWidth = 1;
      ctx.stroke();
    }
    glowCtx.globalCompositeOperation = 'source-over';
    glowCtx.filter = 'blur(3.2px)';
    glowCtx.drawImage(canvas, 0, 0, width, height);
    glowCtx.filter = 'none';
    ctx.save();
    ctx.globalCompositeOperation = 'screen';
    ctx.globalAlpha = 0.34;
    ctx.drawImage(glow, 0, 0, width, height);
    ctx.restore();
  };

  const frame = now => {
    if (!running) return;
    try {
      const delta = last ? Math.min(40, now - last) : 16.667;
      last = now;
      render(delta);
      telemetry.frames += 1;
      raf = window.requestAnimationFrame(frame);
    } catch (error) {
      pushError(error);
      running = false;
      telemetry.ready = true;
    }
  };

  const start = () => {
    if (started || !ctx || !glowCtx) return;
    started = true;
    running = true;
    last = 0;
    telemetry.effects.push('vortex-particle-field', 'offscreen-glow-composite', 'interface-reveal');
    raf = window.requestAnimationFrame(frame);
    window.setTimeout(() => {
      if (!started) start();
    }, 1500);
  };

  try {
    sizeCanvas();
    window.addEventListener('resize', sizeCanvas, { passive: true });
    if (!ctx || !glowCtx) {
      canvas.style.display = 'none';
      telemetry.ready = true;
    } else if (reduced) {
      render(16.667);
      telemetry.frames = 1;
      telemetry.effects.push('vortex-particle-field', 'offscreen-glow-composite', 'static-reduced-motion');
      window.requestAnimationFrame(() => { window.requestAnimationFrame(() => { telemetry.ready = true; }); });
    } else {
      window.requestAnimationFrame(() => {
        window.requestAnimationFrame(() => {
          start();
          telemetry.ready = true;
        });
      });
    }
  } catch (error) {
    pushError(error);
    canvas.style.display = 'none';
    telemetry.ready = true;
  }
})();
</script>

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Upslope

- Slug: `upslope`
- Page: https://landingpageprompts.com/prompts/upslope
- Effect: A single market curve draws across a black editorial slide, then a sector marker and eight quarterly ticks resolve around it.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 58,434; total with repair and cross-check: 86,020
- Verification: 18/18 automated checks passed
- Independent cross-check: partial (confidence high)
- Acceptance criteria:
  - The page contains exactly one h1 with the text “Markets move before consensus catches up.” and includes semantic header, main, and footer elements.
  - At 1440×900, document.documentElement.scrollHeight is no greater than 900 and document.documentElement.scrollWidth equals document.documentElement.clientWidth; at 390×844, document.documentElement.scrollWidth also equals its clientWidth.
  - The chart is one SVG with viewBox="0 0 1200 620", one 24px ghost stroke, one 4px gradient stroke, one area fill, one 100×100 marker halo, and eight x-axis tick labels.
  - window.__DEMO__ exists with name "upslope", ready becomes true after the first paint, frames increases during animation, effects contains "entrance-complete", and errors remains an array.
  - With prefers-reduced-motion: reduce, the h1, visible curve, area fill, marker, number, and all eight tick labels are visible at opacity 1, and no entrance or hover redraw animation is scheduled.
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
A. WHAT IS BEING BUILT

Build one self-contained index.html for Moraine, a venture-research house publishing one market curve at a time. The document title must be “Moraine — Upslope”. Set the root language attribute to lang="en". Use a responsive viewport meta tag. The page is a cinematic, single-slide landing page, not a dashboard, scrolling article, chart tool, or application shell.

The desktop experience is locked to one viewport: at widths of 901px and above, set html and body to width:100%, height:100%, and height:100dvh where supported; set body overflow:hidden. The composition must remain visible at 1440×900, 1920×1080, and any desktop viewport whose height is at least 600px. At widths of 900px and below, permit vertical document scrolling and use overflow-x:hidden; never permit horizontal scrolling at 390×844, 768×1024, 1440×900, or 1920×1080.

Use semantic document structure: one header, one main, and one footer. The header contains the Moraine wordmark and slide identifier. Main contains the editorial introduction and the market-chart figure. Footer contains the research descriptor, publication label, and one inquiry link. Include exactly one h1: “Markets move before consensus catches up.” No other h1 element is permitted. The chart labels use div, span, text, or SVG text; they must not become additional headings.

Use semantic nav only if it contains a visible interactive or navigational control; otherwise omit nav rather than adding an empty landmark. Every visible link or button must have an explicit accessible name through its text or aria-label. Every focusable control must display a visible :focus-visible ring.

Do NOT build:
- A responsive dashboard, tooltip system, data table, legend panel, axis cross-selector, date filter, account menu, or chart settings UI.
- More than one chart, more than one curve, multiple series, bars, candlesticks, particles, floating cards, glassmorphic panels, or decorative dashboard chrome.
- Remote imagery, raster images, video, GIFs, base64 assets, icon fonts, third-party scripts, frameworks, CSS libraries, animation libraries, or runtime APIs beyond browser-native JavaScript.
- A continuous looping ambient animation. Motion occurs during the one-time entrance and on one deliberate pointer-triggered redraw.
- A mobile-first stacked chart that exceeds the viewport or creates horizontal overflow.
- A cookie banner, modal, cookie wall, lead-capture form, newsletter form, or secondary navigation.
- A canvas renderer. This concept must use one SVG so the curve remains a vector object and the sector marker remains inspectable.
- Any copy implying live financial advice, guaranteed returns, or an actual investment recommendation.

B. THE BACKDROP

Create one fixed, full-viewport backdrop element named .slide-backdrop. It is a CSS-painted field, not an image. Its base color is #0B0B0F. Add three fixed radial gradients and one linear wash:

1. An indigo radial gradient centered at 18% 18%, fading from rgba(91,43,217,0.20) at 0% to rgba(91,43,217,0) at 48%.
2. A pink radial gradient centered at 78% 68%, fading from rgba(255,111,181,0.10) at 0% to rgba(255,111,181,0) at 42%.
3. A blue radial gradient centered at 58% 44%, fading from rgba(63,186,255,0.055) at 0% to rgba(63,186,255,0) at 36%.
4. A top-to-bottom linear gradient from rgba(255,255,255,0.025) at 0% to rgba(255,255,255,0) at 34%.

The backdrop has exactly 14 stationary dust points. Implement them as 14 CSS-positioned span elements inside .backdrop-dust. Each point is 2×2px, border-radius:50%, and uses a solid color selected from rgba(255,255,255,0.20), rgba(255,255,255,0.12), or rgba(138,143,156,0.18). Their x coordinates are 4%, 9%, 14%, 19%, 25%, 31%, 37%, 43%, 49%, 55%, 61%, 68%, 76%, and 84%. Their y coordinates are 17%, 73%, 29%, 84%, 51%, 12%, 66%, 37%, 91%, 6%, 78%, 47%, 20%, and 58%. Do not animate these points.

Add a 1px horizontal rail at y=72px using the header’s bottom border. Add a 1px vertical rail at x:5vw from the top rail to the bottom edge at 20% white opacity. The rail is visual structure, not a control.

The hero chart is one inline SVG with viewBox="0 0 1200 620", preserveAspectRatio="none", overflow:visible. It occupies the lower 62% of the desktop viewport. Give its wrapper width:110vw and a left offset of -5vw so the curve and chart bounds bleed beyond the right edge. Do not use a higher-resolution canvas. The SVG coordinate system is the resolution strategy: fixed viewBox coordinates provide a stable 1200×620 drawing surface, while CSS scales it to the viewport. The SVG must have aria-labelledby and a title/description pair.

The chart contains exactly 8 x-axis ticks, one y-axis title, one curve path ghost, one area path, one visible curve path, one sector marker group, one 100×100 halo circle, one 40px crosshair line, one center dot, one numeric label, and one small caption. There are no second paths representing a comparison series.

The resting area fill uses a vertical linear gradient: #5B2BD9 at 0% with 0.22 alpha, #8D4DE4 at 48% with 0.11 alpha, #FF6FB5 at 100% with 0 alpha. The fill extends to y=520 and must fade to fully transparent at the bottom. The visible path uses a horizontal linear gradient from #5B2BD9 at 0% to #FF6FB5 at 100%. The ghost path is 24px wide with stroke rgba(255,255,255,0.09), fill="none", stroke-linecap="round", and stroke-linejoin="round". The visible path is 4px wide with the same cap and join. It must be a smooth cubic path, not a polyline. Use this exact initial path: M -70 492 C 82 475, 145 438, 230 448 S 350 350, 430 374 S 560 282, 650 305 S 760 202, 850 226 S 985 128, 1270 74.

The marker is centered at cx="850", cy="226". Its halo is exactly 100×100 with fill rgba(255,255,255,0.07) and no stroke. A 2px vertical tick drops 40px from the marker center to the x-axis region. The center dot is 10×10 with a radial or linear gradient from #3FBAFF to #536EFB. The marker label is “$18.4B” and its caption is “AI infrastructure · 2031”.

The x-axis baseline is x1="0" y1="520" x2="1200" y2="520", stroke #8A8F9C at 0.34 alpha and width 1. It is divided by 8 evenly spaced ticks at x=0, 150, 300, 450, 600, 750, 900, and 1050. Each tick has a 7px vertical stroke and a label. Labels read “Q1 ’24”, “Q2 ’24”, “Q3 ’24”, “Q4 ’24”, “Q1 ’25”, “Q2 ’25”, “Q3 ’25”, “Q4 ’25”. The labels are 12px and use #8A8F9C at 0.82 alpha. The y-axis title is rotated -90 degrees, positioned at x=34 and y=250, and reads “MARKET VALUE / USD”.

The per-frame animation budget is explicit: the entrance loop must perform no more than 2 style writes per frame, read no layout dimensions, and allocate no objects inside the rAF callback. The only animated values are SVG stroke-dashoffset, SVG opacity, and transform applied to the marker group. The rAF loop must not call getBoundingClientRect, getComputedStyle, querySelector, createElement, or canvas APIs. Cache all elements and path lengths before the loop starts. Use a duration of 1800ms, a 60fps target, and a maximum of 108 entrance frames. The redraw interaction is 900ms with a maximum of 54 frames. Both loops are time-based and must remove their frame request when complete.

C. THE LAYER STACK

Build the page in this exact back-to-front z-index order:

- z-index:0 — .slide-backdrop and its three gradients.
- z-index:1 — .backdrop-dust, containing the 14 stationary points.
- z-index:2 — .vertical-rail, the fixed 1px left guide.
- z-index:3 — .slide-header, positioned at the top 72px rail.
- z-index:4 — .hero-copy, positioned in the upper-left text region.
- z-index:5 — .chart-stage, the SVG’s wide lower-region wrapper.
- z-index:6 — .chart-annotation, only if needed for a non-SVG caption; prefer SVG text.
- z-index:7 — .slide-footer, positioned at the bottom.
- z-index:8 — :focus-visible ring state; the browser ring must appear above neighboring content.

The chart must visually pass behind the copy, but the copy remains above the chart. The chart’s right side may be clipped by the viewport intentionally; the SVG itself must never create document-level horizontal overflow. Keep every z-index explicit.

D. TOKEN TABLE

Define these CSS custom properties on :root with these exact values:

- --bg: #0B0B0F
- --indigo: #5B2BD9
- --pink: #FF6FB5
- --blue: #3FBAFF
- --blue-end: #536EFB
- --muted: #8A8F9C
- --white: #FFFFFF
- --ink: #F4F3F7
- --line: rgba(255,255,255,0.15)
- --line-soft: rgba(255,255,255,0.09)
- --ghost: rgba(255,255,255,0.09)
- --copy-width: 55%
- --header-height: 72px
- --footer-height: 56px
- --page-pad-x: 5vw
- --page-pad-y: 28px
- --hero-top: 116px
- --chart-top: 38vh
- --chart-height: 62vh
- --h1-size: clamp(40px, 4.4vw, 76px)
- --h1-line: 0.98
- --h1-weight: 560
- --body-size: 15px
- --body-line: 1.55
- --eyebrow-size: 11px
- --eyebrow-line: 1.2
- --meta-size: 12px
- --meta-line: 1.35
- --tick-size: 12px
- --rail: 1px
- --focus-ring: #3FBAFF
- --duration-entrance: 1800ms
- --duration-marker: 240ms
- --duration-tick: 420ms
- --ease-editorial: cubic-bezier(0.65, 0, 0.35, 1)
- --ease-ui: cubic-bezier(0.22, 1, 0.36, 1)

Use system fallback stack: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif. Load Google Fonts only if the implementation uses it; the page must remain correct if the request fails.

E. THE COMPOSITION

Build the body as follows.

1. Header. The header is fixed or absolutely positioned at inset:0 0 auto 0, height:72px, padding:0 5vw, display:flex, align-items:center, justify-content:space-between, border-bottom:1px solid var(--line), background:transparent. The left wordmark is an anchor or span with exact text “MORaine” in 13px, letter-spacing:0.18em, color:var(--ink), and text-transform:uppercase. The right header text is “RESEARCH / 03” in 11px, letter-spacing:0.16em, color:var(--muted). On desktop, both elements are 32px from the horizontal page padding.

2. Main. Main is position:relative; min-height:100%; padding:116px 5vw 76px. The hero copy is width:55%; max-width:760px; position:relative; z-index:4. Place the eyebrow at 0px below the hero top. Its exact copy is “FIELD NOTE 03 / ARTIFICIAL INTELLIGENCE”. It is 11px, uppercase, letter-spacing:0.18em, color:var(--muted). Place the h1 at margin-top:22px, width:100%, font-size:var(--h1-size), line-height:var(--h1-line), letter-spacing:-0.055em, color:var(--ink), font-weight:var(--h1-weight), and max-width:8.6em. Its exact copy is “Markets move before consensus catches up.” Place the deck 28px below the h1, width:470px, max-width:100%, font-size:var(--body-size), line-height:var(--body-line), color:var(--muted). Its exact copy is “Moraine maps the quiet inflection points shaping the next decade of venture. This curve tracks the infrastructure layer beneath the AI economy.” Place a metadata row 26px below the deck. It is a flex row with gap:18px. The first item reads “UPDATED 18 JUN 2025”. The second reads “8 QUARTERS / 1 SIGNAL”. Both are 11px, uppercase, letter-spacing:0.12em, color:var(--muted).

3. Chart stage. Place the chart stage at position:absolute; left:-5vw; top:38vh; width:110vw; height:62vh; min-height:380px; z-index:5; pointer-events:none. The SVG must fill this stage. The path begins at x=-70 and ends at x=1270 so the visible curve runs off both edges. The area fill is clipped by the SVG bounds and fades before the bottom of the chart. Preserve the x-axis labels at 12px with 90ms stagger.

4. Footer. Position the footer at left:5vw, right:5vw, bottom:24px, height:32px, display:flex, align-items:center, justify-content:space-between, z-index:7. The left exact copy is “MORAINE / A VENTURE-RESEARCH HOUSE”. The right exact copy is “ONE CURVE AT A TIME”. Use 10px, letter-spacing:0.16em, color:var(--muted), uppercase. The footer may include one link after the right copy, but it is optional; if present, use an underlined link labelled “Request the full note” with a visible focus ring.

At desktop widths, the h1 must not overlap the marker or the brightest curve section. The 55% copy measure and 62% chart placement create a deliberate diagonal from upper-left text to upper-right curve endpoint. The chart remains the dominant object: the visible stroke and ghost stroke together must occupy more visual area than any text block.

F. THE UI LANGUAGE

There are no prominent CTA buttons in the default composition. If adding the footer inquiry link, style it as a 11px uppercase text link in var(--ink), text-decoration:underline, text-underline-offset:4px, border-radius:3px, padding:4px 0. Its hover color is var(--pink), and its focus-visible outline is 2px solid var(--focus-ring) with offset:4px. Do not add a filled rectangle button.

The Moraine wordmark may be an anchor only if it links to the current page. Its hover state changes opacity from 1 to 0.72 over 160ms. It must retain a visible focus ring. Do not use a pill-shaped navigation bar. The sector marker is a data annotation, not a control, and must not receive pointer events.

All visible interactive controls use a minimum hit area of 36×36px where their visual content is smaller. Focus treatment is outline:2px solid var(--focus-ring); outline-offset:4px; border-radius:3px. Hover must not move layout; it may change color, opacity, or text-decoration only.

G. MOTION

Create the following named keyframes in CSS:

- draw-curve: from stroke-dashoffset:var(--path-length) to stroke-dashoffset:0.
- reveal-area: from opacity:0 to opacity:1.
- pop-marker: from opacity:0; transform:scale(0.7) to opacity:1; transform:scale(1).
- grow-crosshair: from transform:scaleY(0) to transform:scaleY(1).
- reveal-tick: from opacity:0; transform:translateY(5px) to opacity:1; transform:translateY(0).
- settle-copy: from opacity:0; transform:translateY(12px) to opacity:1; transform:translateY(0).

Set the resting state of all copy, chart, marker, and tick elements to opacity:1 and transform:none before animation classes are applied. The entrance sequence must be:

- .backdrop-dust: no animation.
- .eyebrow: settle-copy, duration:520ms, delay:80ms, easing var(--ease-ui).
- h1: settle-copy, duration:760ms, delay:180ms, easing var(--ease-ui).
- .hero-deck: settle-copy, duration:620ms, delay:300ms, easing var(--ease-ui).
- .hero-meta: settle-copy, duration:520ms, delay:420ms, easing var(--ease-ui).
- .curve-ghost: draw-curve, duration:1800ms, delay:0ms, easing var(--ease-editorial).
- .curve-visible: draw-curve, duration:1800ms, delay:0ms, easing var(--ease-editorial).
- .curve-area: reveal-area, duration:300ms, delay:1500ms, easing linear.
- .sector-marker: pop-marker, duration:240ms, delay:1600ms, easing var(--ease-editorial).
- .crosshair: grow-crosshair, duration:180ms, delay:1600ms, easing var(--ease-ui).
- tick 1: reveal-tick, duration:360ms, delay:1200ms.
- tick 2: reveal-tick, duration:360ms, delay:1290ms.
- tick 3: reveal-tick, duration:360ms, delay:1380ms.
- tick 4: reveal-tick, duration:360ms, delay:1470ms.
- tick 5: reveal-tick, duration:360ms, delay:1560ms.
- tick 6: reveal-tick, duration:360ms, delay:1650ms.
- tick 7: reveal-tick, duration:360ms, delay:1740ms.
- tick 8: reveal-tick, duration:360ms, delay:1830ms.

The marker’s transform origin is its center at 850px, 226px. The crosshair must grow downward from the marker center, not from the SVG top. Set the marker group pointer-events:none.

The chart has one hover behavior. Add a pointerenter listener to the chart stage. Ignore it when the reduced-motion media query matches. On the first valid pointerenter, change the path data to this alternate cubic path: M -70 492 C 78 480, 150 466, 235 420 S 352 392, 440 330 S 558 314, 650 270 S 766 236, 858 174 S 1000 118, 1270 42. Redraw both strokes over 900ms with the same draw-curve timing. Fade the area from opacity:0 to 1 during the first 300ms. The marker remains at cx=850, cy=174 and the label changes from “$18.4B” to “$21.9B”. Do not listen to pointerleave. The redraw occurs once per page lifetime.

H. THE RESPONSIVE TABLE

Use these exact overrides:

At width 901px through 1439px:
- --page-pad-x:5vw
- --hero-top:104px
- --chart-top:38vh
- --chart-height:62vh
- --h1-size:clamp(40px,4.4vw,64px)
- .hero-copy width:55%
- .hero-deck width:430px
- .slide-header height:72px
- .slide-footer bottom:24px

At width 1440px through 1919px:
- --page-pad-x:5vw
- --hero-top:116px
- --chart-top:38vh
- --chart-height:62vh
- --h1-size:76px
- .hero-copy width:55%
- .hero-deck width:470px
- .slide-header height:72px
- .slide-footer bottom:24px

At width 1920px and above:
- --page-pad-x:96px
- --hero-top:124px
- --chart-top:38vh
- --chart-height:62vh
- --h1-size:76px
- .hero-copy width:55%; max-width:820px
- .hero-deck width:470px
- .slide-header height:72px
- .slide-footer left:96px; right:96px; bottom:28px

At width 768px through 900px:
- html and body: height:auto; min-height:100dvh; overflow-y:auto; overflow-x:hidden
- --page-pad-x:32px
- --page-pad-y:24px
- --header-height:64px
- --hero-top:96px
- --chart-top:470px
- --chart-height:520px
- --h1-size:56px
- --h1-line:1.02
- .hero-copy width:76%
- .hero-deck width:510px
- .slide-header padding-left:32px; padding-right:32px; height:64px
- .slide-footer position:relative; left:auto; right:auto; bottom:auto; margin:32px; min-height:40px
- .chart-stage position:relative; left:-24px; top:auto; width:calc(100% + 48px); height:520px; margin-top:0
- main padding:96px 32px 24px
- .slide-footer text remains visible below the chart

At width 390px through 767px:
- html and body: height:auto; min-height:100dvh; overflow-y:auto; overflow-x:hidden
- --page-pad-x:20px
- --page-pad-y:20px
- --header-height:58px
- --hero-top:82px
- --chart-top:420px
- --chart-height:460px
- --h1-size:42px
- --h1-line:1.03
- .hero-copy width:100%
- .hero-deck width:100%; font-size:14px
- .hero-meta display:grid; grid-template-columns:1fr 1fr; gap:8px 14px
- .slide-header padding-left:20px; padding-right:20px; height:58px
- .slide-header right text font-size:9px
- .slide-footer left:20px; right:20px; bottom:18px; gap:12px; align-items:flex-start
- .slide-footer left copy and right copy each width:48%; font-size:9px; line-height:1.45
- .chart-stage position:relative; left:-12px; top:auto; width:calc(100% + 24px); height:460px
- main padding:82px 20px 72px
- .vertical-rail display:none
- .slide-footer position:relative; margin-top:28px; min-height:44px

At height 700px or less and width 901px or more:
- --header-height:60px
- --hero-top:82px
- --h1-size:48px
- .hero-deck font-size:13px; max-width:420px
- .slide-header height:60px
- .slide-footer bottom:14px
- .chart-stage top:36vh; height:64vh; min-height:340px

At height 600px or less and width 901px or more:
- --header-height:54px
- --hero-top:68px
- --h1-size:40px
- .hero-deck font-size:12px; line-height:1.4
- .slide-header height:54px
- .slide-footer bottom:10px
- .chart-stage top:34vh; height:66vh; min-height:320px

I. FAILURE GUARDS

All content must be visible with the page loaded even if JavaScript is delayed or unavailable. Set the base opacity of .eyebrow, h1, .hero-deck, .hero-meta, .curve-ghost, .curve-visible, .curve-area, .sector-marker, .crosshair, and every tick to 1. JavaScript may add the entrance classes, but it must first establish the final resting values, then animate from explicit initial values.

Use a two-rAF fallback before starting the timeline. The first requestAnimationFrame ensures the browser has committed the initial styles. The second requestAnimationFrame starts the entrance sequence. If requestAnimationFrame is unavailable, show the resting state immediately. If a path length is unavailable, use a precomputed fallback of 1550 SVG user units and do not throw.

Wrap initialization in try/catch. On error, set the telemetry error string, reveal the resting state, and do not allow the exception to escape. Add a window error listener before initialization. Never use console.log, console.warn, or console.error. Never leave a stale rAF loop after completion.

In the prefers-reduced-motion: reduce media query, set all animation-duration to 1ms, animation-delay to 0ms, transition-duration to 1ms, and transform to none. Do not perform the hover redraw. Keep all content at opacity:1. The chart must remain readable, with the full visible stroke, area fill, marker, number, and eight ticks already present.

J. THE EXACT JS

Use plain JavaScript at the end of body. The implementation must contain this exact telemetry initialization before any other runtime work:

    window.__DEMO__ = { name: 'upslope', ready: false, frames: 0, effects: [], errors: [] };

Add this error listener immediately:

    window.addEventListener('error', function (event) {
      window.__DEMO__.errors.push(String(event.message || 'Unknown error'));
    });

Cache all required elements once:

    var root = document.documentElement;
    var stage = document.querySelector('.chart-stage');
    var ghost = document.querySelector('.curve-ghost');
    var visible = document.querySelector('.curve-visible');
    var area = document.querySelector('.curve-area');
    var marker = document.querySelector('.sector-marker');
    var crosshair = document.querySelector('.crosshair');
    var ticks = Array.prototype.slice.call(document.querySelectorAll('.axis-tick'));
    var number = document.querySelector('.sector-value');
    var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var hasRedrawn = false;
    var running = false;
    var startTime = 0;
    var mode = 'entrance';
    var pathLength = 1550;
    var duration = 1800;
    var rafId = 0;

Use this initial path string exactly:

    var initialPath = 'M -70 492 C 82 475, 145 438, 230 448 S 350 350, 430 374 S 560 282, 650 305 S 760 202, 850 226 S 985 128, 1270 74';

Use this alternate path string exactly:

    var alternatePath = 'M -70 492 C 78 480, 150 466, 235 420 S 352 392, 440 330 S 558 314, 650 270 S 766 236, 858 174 S 1000 118, 1270 42';

Set the SVG ghost and visible path stroke-dasharray and stroke-dashoffset to pathLength. If getTotalLength is available, call it once for each path before the loop and use the larger finite result; otherwise retain 1550. Do not call getTotalLength inside the frame callback.

Set the marker transform-origin to 850px 226px with CSS. Set the crosshair transform-origin to 850px 226px with CSS. Set the area opacity to 0 only after the two-rAF fallback begins, and set the marker opacity to 0 and scale to 0.7 at the same time. Set all tick elements to opacity:0 and transform:translateY(5px) at the same time. Set copy elements to opacity:0 and transform:translateY(12px) at the same time.

Use the following animation function. It must contain no layout reads and no DOM creation:

    function animate(now) {
      if (!startTime) startTime = now;
      var elapsed = now - startTime;
      var progress = Math.max(0, Math.min(1, elapsed / duration));
      var eased = progress < 0.5
        ? 4 * progress * progress * progress
        : 1 - Math.pow(-2 * progress + 2, 3) / 2;
      var offset = pathLength * (1 - eased);
      ghost.style.strokeDashoffset = String(offset);
      visible.style.strokeDashoffset = String(offset);
      if (elapsed >= 240) {
        area.style.opacity = String(Math.min(1, (elapsed - 240) / 300));
      }
      if (elapsed >= 1200) {
        for (var i = 0; i < ticks.length; i += 1) {
          var tickProgress = Math.max(0, Math.min(1, (elapsed - (1200 + i * 90)) / 360));
          ticks[i].style.opacity = String(tickProgress);
          ticks[i].style.transform = 'translateY(' + ((1 - tickProgress) * 5) + 'px)';
        }
      }
      if (elapsed >= 1600) {
        var markerProgress = Math.max(0, Math.min(1, (elapsed - 1600) / 240));
        marker.style.opacity = String(markerProgress);
        marker.style.transform = 'scale(' + (0.7 + markerProgress * 0.3) + ')';
        crosshair.style.opacity = String(Math.min(1, markerProgress * 1.25));
        crosshair.style.transform = 'scaleY(' + Math.min(1, markerProgress * 1.4) + ')';
      }
      window.__DEMO__.frames += 1;
      if (progress < 1) {
        rafId = window.requestAnimationFrame(animate);
      } else {
        running = false;
        window.__DEMO__.effects.push('entrance-complete');
      }
    }

For the two-rAF fallback, call requestAnimationFrame twice before setting startTime and requesting the third frame. The first callback only records that the browser has committed styles. The second callback sets startTime=0, running=true, and requests animate. If reduced motion is true, skip the loop, set every animated element to its final value, push 'reduced-motion', and set ready=true after the first paint.

For hover redraw, use a pointerenter listener on stage. If reduced or hasRedrawn or running, return. Set hasRedrawn=true, mode='redraw', duration=900, startTime=0, pathLength to the cached alternate path length, set ghost.setAttribute('d', alternatePath), visible.setAttribute('d', alternatePath), set area opacity to 0, set marker transform-origin to 850px 174px, set marker transform to scale(0.7), set marker opacity to 0, set crosshair transform-origin to 850px 174px, set number.textContent='$21.9B', and start the same rAF loop. During redraw, use the same eased progress but update the area after 150ms, marker after 640ms, and crosshair after 640ms. Push 'hover-redraw' when complete. Do not restart the copy or tick animations.

After the initial style setup and the first paint, set window.__DEMO__.ready = true. Use requestAnimationFrame once for this readiness assignment so it occurs after the first rendered frame.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Vellum

- Slug: `vellum`
- Page: https://landingpageprompts.com/prompts/vellum
- Effect: Huge serif type bleeds into view through slowly expanding radial ink masks on warm cotton paper
- Model: `xiaomi/mimo-v2.6-pro` (Xiaomi MiMo v2.6 Pro (xiaomi/mimo-v2.6-pro)) on cmd-code
- Build tokens: 25,761; total with repair and cross-check: 55,511
- Verification: 19/20 automated checks passed
- Independent cross-check: confirmed (confidence high)
- Acceptance criteria:
  - exactly one <h1> whose normalized textContent is 'Print that outlives us.', split into 2 .line elements containing 20 .ltr glyph spans in total
  - canvas#bloom paints non-blank content and keeps repainting (pixel hash changes across frames) at 1440x900, and window.__DEMO__.frames increments once per rAF tick
  - window.__DEMO__ is initialized with name 'vellum', ready becomes true after the first paint, effects contains 'ink-bleed-mask', 'ink-bloom-canvas', 'hairline-rules' and 'paper-grain', and errors stays empty
  - at 1440px and 1920px html/body and .page are locked to a single 100dvh frame with overflow hidden; at 390px and 768px there is no horizontal overflow
  - semantic header/nav/main/footer exist with exactly 3 nav links and 3 footer links all carrying accessible names, no network requests occur except Google Fonts, and under prefers-reduced-motion every .ltr glyph is fully visible with no running animations
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
Build one complete, self-contained `index.html` for **Vellum** — a luxury letterpress and print studio landing page. Document title: `Vellum — Print That Outlives Us`. `<html lang="en">`. ONE file only: plain HTML + CSS + JS in `<style>`/`<script>`. No frameworks, no bundlers, no external media (no images, no video, no audio, no base64 blobs, no CDN scripts, no fonts but Google Fonts). Every pixel comes from CSS gradients, inline SVG, text, or `<canvas>`. This is the library's light page: warm off-white cotton ground, near-black warm ink, one spot-colour oxide red as a second ink pass.

**Viewport rule:** at `>= 901px` the page is one frame: `html, body { height:100%; overflow:hidden }` and `.page { height:100dvh; overflow:hidden }`. NO SCROLL on desktop. At `<= 900px` the page may scroll vertically. No horizontal overflow at any width — checked at 390x844, 768x1024, 1440x900, 1920x1080.

**Do NOT build:** no video, no WebGL, no Three.js, no Lottie, no GSAP, no jQuery, no Tailwind, no React, no images (remote or base64), no audio, no forms, no pricing tables, no testimonials, no carousel, no cookie banner, no scroll indicator, no desktop hamburger (menu only at `<=900px`), no sections beyond header / hero / footer, no footer links beyond the three specified, no dark mode toggle, no backdrop blur stronger than 14px.

---

## A. WHAT IS BEING BUILT

A single-viewport landing page for a Lisbon letterpress studio called **Vellum**. Warm off-white cotton ground (`#f2ece2`), six soft ink blooms drifting beneath the surface on a low-resolution `<canvas>` upscaled and blurred by CSS, a hairline rule system (96px horizontal / 160px vertical grid at 4–5% ink, one major vertical rule, four corner registration marks), and a paper-grain overlay in multiply blend. The composition carries a mono eyebrow, a giant Fraunces serif H1 in two lines, a lead paragraph, two squared buttons, and a specimen panel with ink swatches. The signature effect is the **ink-bleed reveal**: each H1 glyph is an inline-block span whose radial-mask solid radius animates 0% → 124%, so every letter appears as a blot of ink spreading outward through paper fibre, feathered at the edge, staggered left-to-right.

---

## B. THE BACKDROP — paper, blooms, rules, grain

**B1. `.paper`** — `position:fixed; inset:0; z-index:0; pointer-events:none`, `background-color: #f2ece2` plus four stacked gradients (first listed = frontmost):
1. `radial-gradient(ellipse 70% 52% at 18% 8%, rgba(255,252,246,0.92) 0%, rgba(255,252,246,0.34) 38%, transparent 68%)` — light source, top left.
2. `radial-gradient(ellipse 90% 70% at 82% 96%, rgba(120,100,74,0.16) 0%, rgba(120,100,74,0.06) 42%, transparent 74%)` — warm shade, bottom right.
3. `linear-gradient(168deg, #f6f1e8 0%, #f2ece2 46%, #ece4d7 100%)` — stock tone.
4. `linear-gradient(180deg, rgba(23,19,15,0.05) 0%, transparent 14%, transparent 86%, rgba(23,19,15,0.07) 100%)` — edge burn.

**B2. `canvas#bloom`** — `position:fixed; inset:0; width:100%; height:100%; z-index:1; display:block; pointer-events:none; filter: blur(30px); opacity:0.86; mix-blend-mode: multiply`.

**Resolution trick (critical):** the canvas never renders at device resolution. Backing store `iw = Math.max(160, Math.round(innerWidth * 0.28))`, `ih = Math.max(120, Math.round(innerHeight * 0.28))`; `canvas.width = iw; canvas.height = ih`. Dpr is deliberately NOT applied — the CSS stretch plus the single static `filter: blur(30px)` does all smoothing. At 1440x900 the store is 403x252.

**Offscreen blobs (drawn once at init, never per frame):** two 96x96 canvases, each a single radial gradient from centre (48,48) radius 48:
```
ink   : rgba(23,19,15,1) 0%, rgba(23,19,15,0.62) 34%, rgba(23,19,15,0.24) 62%, rgba(23,19,15,0) 100%
oxide : rgba(176,74,42,1) 0%, rgba(176,74,42,0.58) 34%, rgba(176,74,42,0.22) 62%, rgba(176,74,42,0) 100%
```

**The six blooms** — `bx, by` normalised, `r` a fraction of `min(iw,ih)`, `a` the globalAlpha, `P` the drift period in seconds:

```
#  blob   bx    by    r     a     P     phase   ax    ay
1  ink    0.18  0.26  0.52  0.16  23s   0.0     0.06  0.05
2  ink    0.74  0.18  0.46  0.13  31s   1.7     0.05  0.06
3  oxide  0.46  0.72  0.58  0.20  27s   3.1     0.07  0.04
4  ink    0.88  0.62  0.40  0.11  37s   4.4     0.04  0.05
5  oxide  0.12  0.78  0.44  0.15  41s   2.2     0.06  0.05
6  ink    0.60  0.40  0.62  0.09  47s   5.6     0.05  0.04
```

Per frame, `t` in seconds, with `w1 = 6.2832 / P`, `w2 = w1 / 1.37`, `w3 = w1 / 0.61` baked per bloom at init: `x = (bx + ax * Math.sin(t * w1 + phase)) * iw`, `y = (by + ay * Math.sin(t * w2 + phase * 0.6)) * ih`, `s = r * Math.min(iw, ih) * (1 + 0.12 * Math.sin(t * w3))`, then `ctx.globalAlpha = a; ctx.drawImage(blob, x - s/2, y - s/2, s, s)`. No division in the loop.

**Per-frame cost budget:** 1 `clearRect` + 6 `drawImage`. No `createRadialGradient`, no `ctx.filter`, no `ctx.shadowBlur`, no `getBoundingClientRect`, no path building inside the loop. Six blits of ~210x210 onto a 403x252 target, under 1.4 ms, never more than 8 canvas draw calls per frame.

**B3. `.rules`** — `position:fixed; inset:0; z-index:2; pointer-events:none`, background `repeating-linear-gradient(180deg, rgba(23,19,15,0.055) 0 1px, transparent 1px 96px), repeating-linear-gradient(90deg, rgba(23,19,15,0.040) 0 1px, transparent 1px 160px)`, masked so the grid dies at the frame edge with `radial-gradient(ellipse 78% 66% at 50% 44%, #000 0%, #000 40%, rgba(0,0,0,0.30) 72%, transparent 100%)` — set both `-webkit-mask-image` and `mask-image`.

**B4. `.rule-v`** — the one major rule: `position:fixed; left:8.6vw; top:0; bottom:0; width:1px; z-index:2; background: linear-gradient(180deg, transparent 0%, rgba(23,19,15,0.22) 11%, rgba(23,19,15,0.22) 89%, transparent 100%)`.

**B5. `.marks`** — four 18x18 registration crosshairs at `inset: 26px` (all corners), `z-index:2`, `opacity:0.5`, background an inline SVG data URI: a 6.5r circle plus a full cross, `stroke='%2317130F' stroke-opacity='.38' stroke-width='.8'`. Decorative: `aria-hidden="true"`.

**B6. `.sheen`** — `position:fixed; inset:-20% -60%; z-index:3; pointer-events:none; background: linear-gradient(104deg, transparent 0%, rgba(255,255,255,0.40) 46%, transparent 60%, transparent 100%); opacity:0.28; animation: sheen 34s cubic-bezier(0.45,0,0.55,1) infinite`; keyframes translate `-28% → 28%` on X only.

**B7. `.vign`** — `position:fixed; inset:0; z-index:4; pointer-events:none; background: radial-gradient(ellipse 92% 84% at 50% 46%, transparent 0%, transparent 52%, rgba(60,48,34,0.07) 78%, rgba(60,48,34,0.14) 100%)`.

**B8. `.grain`** — `position:fixed; inset:-50%; width:200%; height:200%; z-index:40; pointer-events:none; opacity:0.11; mix-blend-mode: multiply`, background an inline SVG `feTurbulence` data URI (`type="fractalNoise" baseFrequency="0.82" numOctaves="3" stitchTiles="stitch"` + `feColorMatrix type="saturate" values="0"`), `background-size: 180px`, animated `grain 1.05s steps(4) infinite` jittering `transform: translate` through `(0,0) (-1.5%,1%) (1%,-1.5%) (-1%,1.5%)`.

---

## C. LAYER STACK (back → front)

1. `html, body` — `#f2ece2`, forced twice (see Failure Guards).
2. `.paper` — z-index 0, the four gradients.
3. `canvas#bloom` — z-index 1, blurred ink blooms, multiply.
4. `.rules` + `.rule-v` + `.marks` — z-index 2, hairline system, all `pointer-events:none`.
5. `.sheen` — z-index 3.
6. `.vign` — z-index 4.
7. `.page` — z-index 10, `position:relative; display:grid; grid-template-rows: auto minmax(0,1fr) auto; min-height:100dvh` (height:100dvh inside the desktop lock).
8. `header` — z-index 30; `main` — z-index 20; `footer` — z-index 30.
9. `.grain` — z-index 40, above everything, `pointer-events:none`.
10. `.menu` (mobile overlay, only `<=900px`) — z-index 80 when open.

---

## D. TOKEN TABLE (defaults at 1440x900)

```
--paper:        #f2ece2
--paper-2:      #e9e1d5
--paper-hi:     #fbf7f0
--ink:          #17130f
--ink-soft:     #3a322b
--muted:        #6e6357
--muted-2:      #9a8e80
--accent:       #b04a2a
--accent-2:     #c08a2e
--accent-wash:  rgba(176,74,42,0.10)
--line:         rgba(23,19,15,0.20)
--line-soft:    rgba(23,19,15,0.10)
--line-hair:    rgba(23,19,15,0.055)
--focus:        #b04a2a
--serif:        "Fraunces", "Times New Roman", Georgia, serif
--mono:         "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
--logo:         20px
--logo-sub:     9.5px
--nav:          13px
--eyebrow:      11.5px
--h1:           104px
--h1-lh:        0.94
--lead:         18px
--btn:          12.5px
--btn-h:        44px
--spec-lg:      34px
--spec-md:      18px
--spec-sm:      11.5px
--foot:         11.5px
--track-caps:   0.18em
--radius:       2px
--header-x:     48px
--header-y:     26px
--header-h:     46px
--page-x:       48px
--hero-y:       36px
--hero-gap:     22px
--hero-max:     960px
--aside-w:      300px
--gap-col:      56px
--footer-x:     48px
--footer-y:     24px
--grain-op:     0.11
--ease-out:     cubic-bezier(0.16,1,0.3,1)
--ease-ink:     cubic-bezier(0.33,0.02,0.28,1)
--enter-dur:    0.9s
--bleed-dur:    0.72s
```

Fonts (Google Fonts ONLY, with the fallback stacks above): one `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` and one stylesheet `https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=IBM+Plex+Mono:wght@400;500&display=swap`. This is the document's only network request.

---

## E. THE COMPOSITION — exact build order

`.page` is the grid container with three rows: `<header>`, `<main>`, `<footer>`.

**HEADER** — `height: var(--header-h); padding: var(--header-y) var(--header-x) 0; display:flex; align-items:center; justify-content:space-between; gap:24px`.
- Left: `a.brand` (href `#`, accessible name "Vellum home"): `vellum` in `var(--serif)`, `font-size: var(--logo); font-weight:500; letter-spacing:-0.015em; color: var(--ink)`, then `<span class="brand-sub">EST. 1974</span>` in `var(--mono)`, `font-size: var(--logo-sub); letter-spacing: var(--track-caps); color: var(--muted-2); vertical-align: super; margin-left:8px`.
- Centre: `nav` with exactly 3 links — `Works`, `Process`, `Stock` — each `href="#"`, `position:relative`, `var(--serif)`, `font-size: var(--nav); letter-spacing:0.01em; color: var(--ink-soft); text-decoration:none`, `display:flex; gap:34px; align-items:center`. Hairline underline `::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.28s var(--ease-out) }`; `:hover::after, :focus-visible::after { transform: scaleX(1) }`.
- Right: `a.cta` — see section F; text `Request a proof`.

**MAIN (hero)** — `display:grid; grid-template-columns: minmax(0,1fr) var(--aside-w); gap: var(--gap-col); align-items:center; padding: var(--hero-y) var(--page-x); max-width: var(--hero-max); margin: 0 auto; width:100%`. Left column `.hero-copy { display:flex; flex-direction:column; gap: var(--hero-gap); min-width:0 }`:

1. `.eyebrow` — `var(--mono)`, `font-size: var(--eyebrow); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted)`. Copy: `Letterpress · Hot foil · Hand-set type`, preceded by a 34px `<span class="tick">` hairline (1px tall, `background: var(--line)`, `display:inline-block; vertical-align:middle; margin-right:12px`).
2. `h1` — EXACTLY ONE `<h1>`, `var(--serif)`, `font-weight:400; font-size: var(--h1); line-height: var(--h1-lh); letter-spacing:-0.035em; color: var(--ink); margin:0`, `aria-label="Print that outlives us."`. Two `.line` blocks (`display:block`) separated by one whitespace text node, so `textContent` reads `Print that outlives us.` while each line renders on its own row: Line 1 `Print that`, Line 2 `outlives us.`. Inside each line every glyph is `<span class="ltr">X</span>`; words are wrapped in `<span class="word">` (`display:inline-block; white-space:nowrap`) with a space text node between them. Letters of `outlives` take `ltr--spot` (`color: var(--accent)`) — the second ink pass. Spaces are NOT spans. See section G for the bleed.
3. `.lead` — `var(--serif)`, `font-size: var(--lead); line-height:1.58; letter-spacing:-0.012em; color: var(--ink-soft); max-width: 52ch; margin:0`. Copy: `Vellum sets, presses and binds limited editions by hand — one sheet at a time, on presses that have not stopped running since 1974.`
4. `.actions { display:flex; gap:12px; flex-wrap:wrap }` — `a.btn.btn--ink` text `Request a proof`, then `a.btn.btn--ghost` text `See the stock`.

Right column `aside.specimen` — `border:1px solid var(--line-soft); background: linear-gradient(180deg, rgba(255,255,255,0.52) 0%, rgba(233,225,213,0.30) 100%); border-radius: var(--radius); padding: 22px 22px 18px; display:flex; flex-direction:column; gap:14px`, labelled by `<h2 class="spec-title">Specimen 04</h2>` (`var(--mono); font-size:11.5px; letter-spacing:var(--track-caps); text-transform:uppercase; color:var(--muted); margin:0; font-weight:400`) — an `h2`, never an `h1`, the only other heading. Each `.spec-row` is `display:flex; align-items:baseline; justify-content:space-between; gap:12px`; each `.rule` is `height:1px; background: var(--line-soft); transform-origin:0 50%`:
- Row 1: `<span class="spec-lg">Aa</span>` (`var(--serif); font-size: var(--spec-lg); font-weight:300; letter-spacing:-0.02em; color:var(--ink)`) + right-aligned `<span class="spec-tag">96 pt</span>` (`var(--mono); font-size: var(--spec-sm); color: var(--muted-2); letter-spacing:0.06em`).
- `.rule`.
- Row 2: `<span class="spec-md">Hand-set</span>` at `var(--spec-md)` + tag `24 pt`.
- `.rule`.
- Row 3: `<span class="spec-sm">Cotton · 600 gsm</span>` (`var(--mono); font-size: var(--spec-sm); letter-spacing:0.08em; color: var(--ink-soft)`) + tag `Ed. 90`.
- `.swatches { display:flex; gap:8px }` — 4 chips, each `width:26px; height:26px; border:1px solid rgba(23,19,15,0.18)`, backgrounds `#17130f`, `#b04a2a`, `#c08a2e`, `#e9e1d5`; the row is `aria-hidden="true"` (decorative, not a control).

**FOOTER** — `padding: var(--footer-y) var(--footer-x); display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line-soft)`. Left: `var(--mono)`, `font-size: var(--foot); color: var(--muted)`: `© 2026 Vellum Press · Lisbon`.
- Centre: `ul.meta` with exactly 3 `li` — `600 gsm cotton`, `Editions of 90`, `Foil &amp; letterpress` — `display:flex; gap:0; list-style:none; margin:0; padding:0`; each `li` is `var(--mono); font-size: var(--foot); color: var(--muted); padding: 0 14px`, `border-left:1px solid var(--line-soft)` on all but the first and `border-right` on all but the last.
- Right: exactly 3 links — `instagram`, `contact`, `studio` — `href="#"`, `var(--mono); font-size: var(--foot); color: var(--ink-soft); text-decoration:none`, `display:flex; gap:22px`, hover `color: var(--accent)`. Each link's text is its accessible name.

---

## F. THE UI LANGUAGE — squared, letterpress, hairline

Two button treatments, both `border-radius: var(--radius)` (2px — print is square), `height: var(--btn-h); padding: 0 20px; display:inline-flex; align-items:center; justify-content:center; font-family: var(--mono); font-size: var(--btn); letter-spacing:0.06em; text-transform: uppercase; text-decoration:none`, and `transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out), border-color 0.22s var(--ease-out), transform 0.22s var(--ease-out)`.

- `.btn--ink`: `color: var(--paper-hi); border:1px solid var(--ink); background: linear-gradient(180deg, #241d17 0%, #17130f 58%, #0e0b09 100%); box-shadow: 0 14px 34px rgba(23,19,15,0.24), inset 0 1px 0 rgba(255,255,255,0.10)`. Hover `background: linear-gradient(180deg, #302720 0%, #1e1813 58%, #12100d 100%); transform: translateY(-1px)`. Active `transform: translateY(0)`.
- `.btn--ghost`: `color: var(--ink); border:1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.46) 0%, rgba(233,225,213,0.16) 100%)`. Hover `border-color: var(--ink); background: linear-gradient(180deg, rgba(255,255,255,0.70) 0%, rgba(233,225,213,0.30) 100%); transform: translateY(-1px)`.
- `.cta` in the header: `height:34px; padding:0 14px; font-size:11.5px`, otherwise `.btn--ghost` but `color: var(--accent); border-color: rgba(176,74,42,0.42); background: var(--accent-wash)`; hover `border-color: var(--accent); background: rgba(176,74,42,0.16)`.

Every `a` and `button`: `:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius) }`. No default blue ring; no `text-decoration` but the nav hover hairline. `::selection { background: rgba(176,74,42,0.22); color: var(--ink) }`.

---

## G. MOTION — entrance stagger + named keyframes

Resting state first: `.appear { opacity: 1 }`. Entrance: `animation-duration: var(--enter-dur); animation-fill-mode: both; animation-timing-function: var(--ease-out); animation-delay: var(--d, 0s)`. Each animated element carries `.appear`, a modifier class, and an inline `--d`.

The ink-bleed animates a registered custom property driving a radial mask:
```
@property --bleed { syntax: "<percentage>"; inherits: false; initial-value: 124%; }
.ltr { --bleed: 124%; --ox: 50%; --oy: 58%; display:inline-block;
  -webkit-mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 0%, #000 var(--bleed),
    rgba(0,0,0,0.62) calc(var(--bleed) * 1.14), rgba(0,0,0,0.20) calc(var(--bleed) * 1.30), transparent calc(var(--bleed) * 1.46));
  mask-image: identical to -webkit-mask-image }
@keyframes in-bleed { from { --bleed: 0%; opacity: 0.55 } to { --bleed: 124%; opacity: 1 } }
```
`.ltr` also sets `--ox`/`--oy` per glyph from this six-origin cycle, in document order, restarting each line: `(34%,62%) (58%,44%) (46%,70%) (66%,52%) (38%,50%) (54%,66%)`. `.ltr--spot` letters add `+0.22s` to their delay — the oxide pass lands after the black pass.

Stagger table (element → modifier → `--d`):
```
brand                appear--fade   0.06s
nav Works            appear--fade   0.12s
nav Process          appear--fade   0.18s
nav Stock            appear--fade   0.24s
header cta           appear--rise   0.30s
eyebrow              appear--fade   0.34s
h1 line 1 letters    appear--bleed  0.46s + i*0.034s  (i = 0..8 — 9 glyphs)
h1 line 2 letters    appear--bleed  0.62s + i*0.030s  (i = 0..10 — 11 glyphs; +0.22s if .ltr--spot)
lead                 appear--soft   1.18s
btn--ink             appear--rise   1.30s
btn--ghost           appear--rise   1.38s
specimen panel       appear--soft   1.02s
spec row 1/2/3       appear--soft   1.10s / 1.18s / 1.26s
footer left          appear--fade   1.46s
footer centre        appear--fade   1.52s
footer right         appear--fade   1.58s
```
`.appear--bleed` uses `animation-duration: var(--bleed-dur); animation-timing-function: var(--ease-ink)`.

Named keyframes (all end at opacity 1 / identity transform):
```
in-fade   from { opacity: 0 }                                  to { opacity: 1 }
in-soft   from { opacity: 0; transform: translateY(12px) }      to { opacity: 1; transform: none }
in-rise   from { opacity: 0; transform: translateY(9px) scale(0.985) } to { opacity: 1; transform: none }
in-bleed  from { --bleed: 0%; opacity: 0.55 }                   to { --bleed: 124%; opacity: 1 }
in-rule   from { transform: scaleX(0) }                         to { transform: scaleX(1) }
sheen     0% { transform: translate3d(-28%,0,0) } 50% { transform: translate3d(28%,0,0) } 100% { transform: translate3d(-28%,0,0) }
grain     0% { transform: translate(0,0) } 25% { transform: translate(-1.5%,1%) } 50% { transform: translate(1%,-1.5%) } 75% { transform: translate(-1%,1.5%) } 100% { transform: translate(0,0) }
```
The `.tick` hairline and every specimen `.rule` use `in-rule` (`transform-origin: 0 50%`), delays matching their parent row. Canvas blooms, `sheen` and `grain` run continuously, independent of the entrance stagger.

---

## H. RESPONSIVE TABLE — exact token overrides

```
>= 1600px:
  --h1: 120px  --logo: 21px  --nav: 13.5px  --lead: 19px  --btn: 13px  --btn-h: 46px
  --header-x: 56px  --page-x: 56px  --footer-x: 56px  --hero-max: 1060px
  --aside-w: 320px  --gap-col: 64px  --spec-lg: 38px

>= 1920px:
  --h1: 136px  --logo: 22px  --nav: 14px  --lead: 20px  --btn-h: 48px
  --header-x: 72px  --page-x: 72px  --footer-x: 72px  --hero-max: 1180px
  --aside-w: 340px  --gap-col: 76px  --spec-lg: 42px  --header-y: 30px

1280px – 1599px:
  --h1: 94px  --header-x: 44px  --page-x: 44px  --footer-x: 44px
  --hero-max: 900px  --aside-w: 280px  --gap-col: 48px

901px – 1279px:
  --h1: 72px  --lead: 16.5px  --header-x: 32px  --page-x: 32px  --footer-x: 32px
  --header-y: 22px  --hero-max: 760px  --aside-w: 244px  --gap-col: 36px  --spec-lg: 28px

>= 901px AND max-height 850px:
  --h1: 74px  --hero-y: 24px  --header-y: 18px  --hero-gap: 16px
  --lead: 16px  --spec-lg: 28px  --footer-y: 18px

>= 901px AND max-height 720px:
  --h1: 58px  --hero-y: 14px  --header-y: 12px  --hero-gap: 12px
  --lead: 14.5px  --eyebrow: 11px  --btn-h: 38px  --spec-lg: 24px  --spec-md: 16px
  --footer-y: 12px  --aside-w: 224px

>= 901px (desktop lock, all heights):
  html, body { height:100%; overflow:hidden }   .page { height:100dvh; overflow:hidden }

<= 900px:
  no vh lock; page may scroll; nav becomes a full-viewport overlay menu:
  - header keeps brand + burger: <button class="burger" aria-label="Menu" aria-expanded="false">
    with three 18x1.5px bars in var(--ink), gap 5px
  - .menu { position:fixed; inset:0; z-index:80; background: rgba(242,236,226,0.94);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display:flex;
    flex-direction:column; align-items:flex-start; justify-content:center;
    padding: 0 32px; gap: 26px; transform: translateY(-100%);
    transition: transform 0.45s var(--ease-out) }   .menu.open { transform: none }
  - menu holds the 3 nav links stacked at 22px serif plus the header cta; Escape,
    link click, and resize to >900px all close it
  - main becomes grid-template-columns: minmax(0,1fr); the specimen aside drops below the
    copy with margin-top: 28px; .rule-v is display:none
  --h1: 46px  --header-x: 24px  --page-x: 24px  --footer-x: 24px  --hero-max: 100%
  .grain opacity stays --grain-op: 0.11

<= 560px:
  --h1: 34px  --lead: 15px  --header-x: 20px  --page-x: 20px  --footer-x: 20px
  --btn-h: 42px  --spec-lg: 26px  --hero-gap: 18px
  footer becomes flex-direction:column; align-items:flex-start; gap:10px
  .meta li:first-child { padding-left: 0 }; .meta wraps with row-gap 6px
  header cta is display:none — it lives inside the menu on mobile
  .swatches chips shrink to 22x22; --grain-op: 0.09; .marks is hidden
```

Canvas constants are responsive too: the 0.28 scale stays; at `<=900px` bloom `r` multiplies by 1.15 (fewer pixels, so blooms must read larger) and `a` by 0.85. The lead's `max-width` is `100%` below 901px. Each block above is a width `@media`; the max-height blocks add `and (min-width: 901px)`, desktop only.

---

## I. FAILURE GUARDS — the page is never blank, never broken

1. **Paper-first:** the FIRST CSS rule is `html, body { background:#f2ece2 !important; color:#17130f }`; the body tag carries `style="background:#f2ece2;color:#17130f"`; a later rule restates `html, body { background: var(--paper) }`.
2. **Resting opacity is 1:** every `.appear` element's un-animated computed style is its final state (opacity 1, no transform). `.ltr` spans default to `--bleed: 124%` — a fully open mask — so a failed animation leaves legible type; if `@property` is unsupported, `mask-image` falls back to `none` and the letters show anyway. `fill-mode: both` only holds the FROM state during the delay.
3. **Two-rAF entrance fallback:** after two nested `requestAnimationFrame` ticks, for each `.appear`, if `el.getAnimations` is missing or reports no animation with `playState` `"running"` or `"finished"`, add `.is-in` to every `.appear`. `.is-in { animation:none !important; opacity:1 !important; transform:none !important; -webkit-mask-image:none !important; mask-image:none !important }`.
4. **Canvas fallback:** if `canvas.getContext('2d')` returns null, add `.no-canvas` to `<html>`; CSS hides `canvas#bloom` and paints static blooms on `.paper::after`: `radial-gradient(circle at 18% 26%, rgba(23,19,15,0.07), transparent 34%), radial-gradient(circle at 46% 72%, rgba(176,74,42,0.09), transparent 36%), radial-gradient(circle at 74% 18%, rgba(23,19,15,0.05), transparent 30%)`. The page reads correctly regardless.
5. **Reduced motion:** inside `@media (prefers-reduced-motion: reduce)`: `*, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important }`; force `.appear, .ltr, .tick, .rule` to `opacity:1 !important; transform:none !important; -webkit-mask-image:none !important; mask-image:none !important`; freeze `.sheen` at `opacity:0.14` and stop the grain animation; the loop counts frames but repaints nothing.
6. **Contrast:** body copy `#3a322b` on `#f2ece2` (`> 9:1`), muted mono `#6e6357` (`> 5:1`), never lower. No text opacity below 0.86.
7. **No console output** in the happy path: no `console.*`, no thrown exceptions; every canvas and media-query call guarded.

---

## J. THE EXACT JS (one IIFE at the end of body, nothing else)

1. `window.__DEMO__ = { name: 'vellum', ready: false, frames: 0, effects: [], errors: [] };` then `window.addEventListener('error', e => window.__DEMO__.errors.push(String((e && e.message) || e)))`. Push effect names once, in this order: `'ink-bleed-mask'`, `'ink-bloom-canvas'`, `'hairline-rules'`, `'paper-grain'`.
2. **Cache at startup:** `document.documentElement`, `canvas#bloom`, its 2d context, `.burger`, `.menu`, all `.menu a`, `matchMedia('(prefers-reduced-motion: reduce)')`, `t0 = performance.now()`. No `getBoundingClientRect` anywhere in the file; all sizing reads `window.innerWidth` / `window.innerHeight`.
3. **Blob builder:** `makeBlob(r,g,b)` builds a 96x96 canvas with one `createRadialGradient(48,48,0,48,48,48)` (stops `0 → rgba(r,g,b,1)`, `0.34 → 0.62 alpha`, `0.62 → 0.24 alpha`, `1 → 0 alpha`), fills a 96x96 rect, returns it. Called exactly twice (ink `23,19,15`; oxide `176,74,42`), never in the loop.
4. **resize():** `iw = Math.max(160, Math.round(innerWidth * 0.28))`, `ih = Math.max(120, Math.round(innerHeight * 0.28))`, `canvas.width = iw; canvas.height = ih`. Scheduled only by a boolean `resizeQueued` consumed by one rAF; never a timer, never twice per frame.
5. **draw(t):** `ctx.clearRect(0,0,iw,ih)`; for each of the 6 blooms compute `x, y, s` from the section B table with `Math.sin`, set `ctx.globalAlpha = a`, `ctx.drawImage(blob, x - s/2, y - s/2, s, s)`; reset `globalAlpha = 1`. No gradients, filters, shadows, paths.
6. **Loop:** `function step(now){ window.__DEMO__.frames += 1; var paint = !document.hidden && (!reduced || !painted); if (paint) { draw(reduced ? 6.0 : (now - t0) / 1000); painted = true; window.__DEMO__.ready = true; } requestAnimationFrame(step) }`, kicked off once. `ready` becomes true after the first paint; `frames` increments once per frame; a hidden document counts the tick but skips painting.
7. **Entrance fallback:** two nested `requestAnimationFrame` callbacks, then per `.appear` run the `getAnimations` check from guard 3 and add `.is-in` to all if any check fails.
8. **Menu (mobile only):** burger click toggles `.menu.open` and `aria-expanded`; Escape closes; any menu link click closes; the `resize` handler closes the menu above 900px and sets `resizeQueued`.
9. **Reduced motion:** if the media query matches, `reduced = true`, so `draw(6.0)` runs once, `ready` becomes true, and no further pixels change.

No other JS. No libraries, no timers, no `console` calls, no `fetch`. Final file must be under 90 KB.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

# Section (293 prompts)

## About Brand Overview

- Slug: `jiro-about-brand-overview`
- Page: https://landingpageprompts.com/prompts/jiro-about-brand-overview
- Effect: A clean, light-themed about section featuring a two-column layout with animated reveal effects. Includes a pill badge, headline with muted secondary text, a featured image, and a 6
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 36,677; total with repair and cross-check: 36,677
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Brand Overview". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Brand Overview".

Purpose
Give visitors a calm, credibility-first introduction to the company behind the product. The section tells a short brand story and backs it with headline metrics, for first-time visitors weighing up the brand.

Layout & content
- Two-column layout pairing a text column with a featured photograph.
- A small pill badge above the headline, then a headline with a muted secondary line of supporting copy.
- A six-item stat grid, each entry combining a figure, a short label and a small arrow icon.
- Keep wording neutral; the description supplies no real brand copy.

Visual direction
Light, minimal and airy. Lean on whitespace and restrained type rather than decoration, and let the photography carry most of the colour. Set headings in Inter Tight and keep supporting text quieter than the headline.

Interaction & motion
Use Framer Motion for staggered, scroll-triggered reveals on a custom cubic-bezier ease, so badge, headline, image and stats arrive in sequence rather than all at once.

Stack
- React functional component + Tailwind CSS.
- framer-motion and lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Countdown

- Slug: `jiro-about-countdown`
- Page: https://landingpageprompts.com/prompts/jiro-about-countdown
- Effect: A light-themed about section with animated number counters. Features a pill badge, large descriptive headline, and 4-column stats grid with animated count-up numbers on scroll. Use
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 54,534; total with repair and cross-check: 54,534
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Countdown". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Countdown".

Purpose
Introduce the company behind the product with a light, minimal about section whose centrepiece is a row of animated number counters. It should read as an editorial statement of who we are, then back that statement with countable proof points.

Layout & content
- A small pill badge above the headline acting as the section eyebrow.
- A large descriptive headline that carries the section message.
- A four-column stats grid beneath the headline, each column holding a label and a count-up number.
- Keep supporting copy short and use neutral placeholder wording.

Visual direction
Light theme, minimal and restrained: generous whitespace, quiet borders, and typographic hierarchy doing the work. Set headings in Geist and body text in Inter, inside a neutral palette with one subtle accent for the badge.

Interaction & motion
Use Framer Motion for blur-up reveals with custom cubic-bezier easing as the section enters the viewport. Stat numbers count up on scroll, with subtle hover effects on the columns.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Multi Layout

- Slug: `jiro-about-multi-layout`
- Page: https://landingpageprompts.com/prompts/jiro-about-multi-layout
- Effect: A light-themed multi-layout about section with overlapping images and animated counters. Features uppercase badge, large Instrument Serif headline with muted text, asymmetric two-c
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,501; total with repair and cross-check: 19,501
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Multi Layout". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Multi Layout".

Purpose
Introduce the company behind the product in a light, elegant multi-layout block. It pairs a human profile image with hard numbers, so visitors meet the people and the traction in one view.

Layout & content
- A small uppercase badge above a large serif headline and a muted supporting text line.
- An asymmetric two-column grid: an overlapping profile image on one side, a descriptive paragraph on the other.
- A stats row across four columns, each combining a count-up number with a short label.
- Stack the grid to one column on small screens and let the stats row wrap.

Visual direction
Light and elegant, photography-led. Use Inter for body and interface text and Instrument Serif for the headline, with generous whitespace so the muted text sits quietly beneath the serif.

Interaction & motion
Animate the counters on scroll, and give the image and text blocks a blur-up reveal with a premium cubic-bezier easing curve.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the reveals and the count-up numbers.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Team Overview

- Slug: `jiro-about-team-overview`
- Page: https://landingpageprompts.com/prompts/jiro-about-team-overview
- Effect: A light-themed about section with dot grid background, floating UI card, and animated metrics. Features uppercase badge, large responsive headline, CTA button with hover effect, he
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,954; total with repair and cross-check: 25,954
- Verification: 14/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Team Overview". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Team Overview".

Purpose
Introduce the people behind the product in a light, minimal way, pairing a confident headline and CTA with visible proof of momentum. It is the opener visitors read when deciding who is behind the company.

Layout & content
- Uppercase badge above a large responsive headline, with a short supporting paragraph and a CTA button.
- A hero image area with a floating UI card layered over it, containing an animated bar chart that reads as a dashboard or growth preview.
- A four-column metrics row with animated counters, separated by vertical dividers.
- Subtle blob shapes behind the content for depth.

Visual direction
Light theme, minimal and airy. Dot grid background, Inter typography, soft blurred blobs and restrained surfaces so the floating card and the metric numbers carry the emphasis.

Interaction & motion
Blur-up reveal animations on mount or scroll using premium cubic-bezier easing, counters that animate into view, and a hover effect on the CTA button.

Stack
- React functional component + Tailwind CSS.
- framer-motion for reveals, counters and hover states.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About us 01 Blaze

- Slug: `jiro-about-us-01-blaze`
- Page: https://landingpageprompts.com/prompts/jiro-about-us-01-blaze
- Effect: A travel-focused About section with adventure imagery, mission narrative, and warm editorial typography. Built for travel platforms, tourism brands, and experience-driven service b
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,786; total with repair and cross-check: 24,786
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About us 01 Blaze". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About us 01 Blaze".

Purpose
Introduce a travel and experience-driven brand by pairing adventure imagery with a short mission narrative. Written for travel platforms, tourism brands and service businesses that sell trips or guided experiences.

Layout & content
- Editorial opening that pairs a mission statement with adventure photography.
- A supporting narrative block explaining who the brand serves and what it stands for.
- A photographic strip or gallery carrying the adventure imagery.
- A marquee band running short brand or value phrases as animated text.

Visual direction
Light, warm and editorial: large display type, generous whitespace, and a warm photographic treatment so the imagery reads as the hero rather than decoration.

Interaction & motion
Animate the mission text on entrance, let the phrase marquee scroll continuously, and add light interactive hover states on the photographic cards.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance, marquee and hover animation.
- lucide-react for iconography.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Us 01 Kelo

- Slug: `jiro-about-us-01-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-about-us-01-kelo
- Effect: An AI product About section with company mission, team stats, and product philosophy narrative. Designed for AI startups, tech brands, and product-led SaaS company pages.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,155; total with repair and cross-check: 27,155
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Us 01 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Us 01 Kelo".

Purpose
Introduce an AI product company: what it stands for, who is behind it, and the philosophy that shapes what it builds. Aimed at AI startups, tech brands and product-led SaaS pages that need a credible company story.

Layout & content
- A mission statement block with a large lead sentence and a supporting paragraph.
- A compact team stats strip; present the figures as editable stand-ins.
- A product philosophy narrative explaining how the team approaches building its product.
- A closing line or link that leads into the rest of the company pages.

Visual direction
Light, minimal and modern: generous whitespace, a restrained type scale, thin dividers and a calm neutral surface. The stats should read as quiet data points rather than loud badges.

Interaction & motion
Animate the section on scroll: fade and short upward reveals for the mission copy, plus a staggered entrance for the stats strip.

Stack
- React functional component + Tailwind CSS.
- framer-motion for scroll reveals and lucide-react for small icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Us 01 Orbit

- Slug: `jiro-about-us-01-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-about-us-01-orbit
- Effect: A coach About section with professional headshot, value proposition, and consultation booking CTAs. Designed for personal coaches, mentors, and one-on-one service providers.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 43,808; total with repair and cross-check: 43,808
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Us 01 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Us 01 Orbit".

Purpose
Introduce a coach as a real person and make the case for booking a consultation. It speaks to prospective clients of personal coaching, mentoring and one-on-one services who need to trust the practitioner first.

Layout & content
- A primary column anchored by a professional headshot of the coach.
- A value proposition block: short headline plus one paragraph stating who the coach helps and how they work.
- Supporting proof points that reinforce the value proposition.
- Consultation booking calls to action, worded as a direct invitation to book time.

Visual direction
Light and minimal, with generous whitespace, restrained type and a calm editorial rhythm. Keep surfaces clean and let the headshot carry the warmth; nothing should read as loud or salesy.

Interaction & motion
The headshot and copy fade and rise into place on scroll, with the call to action settling last. Use Framer Motion for short, subtle entrances only.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Us 02 Orbit

- Slug: `jiro-about-us-02-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-about-us-02-orbit
- Effect: A personal brand About section with portfolio imagery, achievement stats, and narrative storytelling layout. Built for creators, freelancers, and personal brand websites.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 18,737; total with repair and cross-check: 18,737
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Us 02 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Us 02 Orbit".

Purpose
Introduce a personal brand through portfolio imagery and a narrative story, so visitors understand who is behind the work and what has been achieved. Written for creators, freelancers, and personal brand websites.

Layout & content
- An about block combining a short narrative story with supporting portfolio imagery.
- An achievement stats row that surfaces key numbers alongside the story.
- Image and text arranged so the storytelling and the visuals read as one section.
- Keep the copy structural: no real names, numbers, or quotes.

Visual direction
Light, minimal and modern: generous white space, restrained type, and imagery treated as the hero content rather than decoration. Stats should feel quiet and editorial, not loud.

Interaction & motion
Animate the section on scroll entry with Framer Motion: fade and rise for the narrative and stats, and a gentle reveal for the portfolio images. Keep movement subtle and restrained.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance and reveal animations.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Us 03 Moxo

- Slug: `jiro-about-us-03-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-about-us-03-moxo
- Effect: A brand About section with mission narrative, team highlight cards, and culture-driven imagery. Designed for SaaS brands, tech companies, and B2B product sites.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,294; total with repair and cross-check: 30,294
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Us 03 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Us 03 Moxo".

Purpose
This section tells a brand's story to prospective customers of a SaaS or tech company. It should establish why the company exists, what it stands for, and who is behind it, so a B2B visitor can form a human impression before evaluating the product.

Layout & content
- A mission narrative block that opens the section.
- Team highlight cards introducing the people behind the brand.
- Culture-driven imagery supporting the narrative.
- A restrained call to action or contact prompt at the end.

Visual direction
Go dark and elegant, with photography as the primary visual material. Keep the palette restrained and the type refined so the mission copy reads as considered rather than promotional.

Interaction & motion
Use framer-motion for gentle reveal and hover motion on the narrative block and team cards; keep it soft and editorial rather than flashy.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Us 03 Orbit

- Slug: `jiro-about-us-03-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-about-us-03-orbit
- Effect: An educator About section with course catalog preview, teacher bio, and enrollment-focused layout. Suited for online instructors, training platforms, and education brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,708; total with repair and cross-check: 25,708
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Us 03 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Us 03 Orbit".

Purpose
Introduce an educator and their teaching offer: who is behind the program, what can be learned, and how to enrol. Written for online instructors, training platforms and education brands.

Layout & content
- A light, minimal intro with a short mission statement and a supporting line about the teacher.
- A course catalog preview: course cards, each with a title, a brief topic line and a neutral call to view it.
- A teacher bio block pairing portrait imagery with a short biography and credentials.
- An enrolment-focused closing area with a single clear call to action.
- Keep the ordering readable: mission, catalog, teacher, enrol.

Visual direction
Light and minimal with generous whitespace, calm type scale and playful touches in the small details. Photography is used for the teacher and course thumbnails; avatars appear where people are referenced.

Interaction & motion
Sections fade and rise into view with Framer Motion, and course cards lift subtly on hover. Motion stays gentle and human.

Stack
- React functional component + Tailwind CSS.
- framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Us 04 Orbit

- Slug: `jiro-about-us-04-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-about-us-04-orbit
- Effect: A consultant About section with professional imagery, expertise badges, and engagement-focused CTAs. Built for consultants, advisors, and B2B service professionals.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,496; total with repair and cross-check: 19,496
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Us 04 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Us 04 Orbit".

Purpose
Present a consultant or advisory practice in a way that reads as experienced and approachable. The section should establish professional credibility, spell out areas of expertise, and give visitors an obvious next step toward working together.

Layout & content
- Professional imagery presented alongside the section's narrative copy.
- A row of expertise badges summarising the practice areas.
- One or more engagement-focused calls to action inviting a conversation.
- Use large type for the headline so the section reads as confident rather than dense.

Visual direction
Light, minimal and typographic. Large headline type should dominate, with imagery and badges kept restrained so the section stays calm for a B2B services audience.

Interaction & motion
Use Framer Motion for a gentle entrance animation as the section scrolls into view. Keep it to a single reveal pass; no looping motion.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Us 05 Moxo

- Slug: `jiro-about-us-05-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-about-us-05-moxo
- Effect: A SaaS About section with company timeline, team stats, and culture imagery grid. Built for tech startups, product companies, and B2B software brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,426; total with repair and cross-check: 28,426
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Us 05 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Us 05 Moxo".

Purpose
Tell the company story to prospective SaaS buyers: where the team came from, who is behind the product, and what the culture looks like day to day. Built for tech startups, product companies and B2B software brands.

Layout & content
- A short intro heading to open the section.
- A company timeline laying out milestones in chronological order, using neutral placeholder labels rather than invented dates or figures.
- A team stats block summarising the people behind the product.
- A culture imagery grid of photographic tiles showing the team and the workplace.

Visual direction
Light theme, bold and confident. Photography leads: large, high-quality culture images paired with a tight typographic scale for headings, timeline labels and stats.

Interaction & motion
Framer Motion entrance animations for the timeline, the stats block and the imagery grid, staggered so each block reveals as it scrolls into view.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Us 05 Orbit

- Slug: `jiro-about-us-05-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-about-us-05-orbit
- Effect: A coaching About section with split-image layout, story narrative, and credentials timeline. Designed for life coaches, business mentors, and personal development brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,926; total with repair and cross-check: 30,926
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Us 05 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Us 05 Orbit".

Purpose
Present a coaching brand's story and credibility in a split-image about section. It speaks to prospective clients of life coaching, business mentoring and personal development work, giving them the founder's narrative and the proof that sits behind it.

Layout & content
- A split layout with a photography-led image column beside the narrative copy.
- A story narrative block carrying the coach's background and approach in a few short paragraphs.
- A credentials timeline listing qualifications and milestones in chronological order.
- A marquee strip of brand logos signalling associations and trust.

Visual direction
Light and photographic, with quiet typography and enough whitespace that the timeline reads as a calm, scannable list rather than a dense block of text.

Interaction & motion
Animate the narrative and timeline items into view on scroll, and keep the brand-logo marquee running continuously in a seamless loop.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the scroll reveals and the marquee.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Us 06 Orbit

- Slug: `jiro-about-us-06-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-about-us-06-orbit
- Effect: A personal brand About section with profile imagery, achievement metrics, and value-driven narrative. Built for coaches, freelancers, and solopreneur portfolio sites.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,161; total with repair and cross-check: 24,161
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Us 06 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Us 06 Orbit".

Purpose
Present a personal brand through profile imagery, achievement metrics and a value-driven narrative. It speaks to coaches, freelancers and solopreneurs who need an about block that sells the person, not a faceless company.

Layout & content
- A portrait or profile photography area paired with the narrative copy.
- A value-driven story block that states what the person stands for and how they work.
- A metrics strip summarising achievements, with each figure given room to breathe.
- A closing line or link that leads further into the site.

Visual direction
Light theme with bold, large type and real photography as the anchor. Keep the surrounding chrome quiet so the profile image and the big headline dominate.

Interaction & motion
Animated reveals for the imagery and the narrative blocks, with counters or staggered entrances for the achievement metrics.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance and scroll animations.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## About Us 07 Orbit

- Slug: `jiro-about-us-07-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-about-us-07-orbit
- Effect: An educator About section with teaching philosophy, credentials grid, and student testimonial preview. Suited for online teachers, course creators, and education professionals.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 22,811; total with repair and cross-check: 22,811
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "About us" block called "About Us 07 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an About us section for a modern website: "About Us 07 Orbit".

Purpose
Present an educator's teaching philosophy alongside proof of experience and a preview of student feedback. Suited to online teachers, course creators and education professionals who need to build trust quickly.

Layout & content
- Intro block stating the teaching philosophy in a few direct lines.
- A credentials grid summarising background, subjects and qualifications.
- A compact stats row using animated numbers for experience-related figures.
- A testimonial preview that teases a longer student story.

Visual direction
Light, minimal and modern: restrained neutral surfaces, clear typographic hierarchy, and small icon accents rather than heavy decoration.

Interaction & motion
Animate the stats counters and reveal the credentials grid and testimonial preview with subtle staggered entrances.

Stack
- React functional component + Tailwind CSS.
- framer-motion for counters and entrance animation.
- lucide-react for iconography.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Agent Hero Kelo

- Slug: `jiro-ai-agent-hero-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-ai-agent-hero-kelo
- Effect: An autonomous AI agent hero with task automation preview, agent workflow visuals, and conversion-driven CTAs. Designed for AI agent platforms, workflow automation, and intelligent 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,449; total with repair and cross-check: 30,449
- Verification: 19/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Agent Hero Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Agent Hero Kelo".

Purpose
Present an autonomous AI agent in the first screen: what the agent does, how its task automation works, and why a visitor should start. Built for AI agent platforms, workflow automation tools and intelligent assistant products.

Layout & content
- A dark hero with a headline, a short subheadline about autonomous task automation, and conversion-driven primary and secondary CTAs.
- A task automation preview panel showing an agent working through a task, as illustrative mock content.
- Agent workflow visuals: connected steps or nodes that suggest a multi-step agent run.
- A dashboard preview surface rendered in glassmorphism over the background.

Visual direction
Dark and glassy: translucent layered panels, soft borders, a video background behind the content, and a type hierarchy that keeps the CTA the loudest element.

Interaction & motion
Animated: the background video loops, the dashboard preview and workflow visuals animate in on load, and the CTAs respond on hover.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance and hover motion, lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Automation Hero Kelo

- Slug: `jiro-ai-automation-hero-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-ai-automation-hero-kelo
- Effect: An AI workflow automation hero with task flow preview, integration logos, and time-saving messaging. Designed for AI automation platforms, no-code workflow tools, and productivity 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 37,032; total with repair and cross-check: 37,032
- Verification: 18/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Automation Hero Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Automation Hero Kelo".

Purpose
Open an AI workflow automation product page by showing how work moves through connected steps, so teams evaluating AI automation platforms, no-code workflow tools and productivity software immediately understand the time saved.

Layout & content
- A hero headline and supporting line built around time-saving messaging, with a primary and a secondary call to action.
- A task flow preview showing steps connected in sequence, standing in for a running workflow.
- A row of integration logo placeholders implying the tools a workflow connects to.
- Dark glass panels separating the copy, the flow preview and the logo row.

Visual direction
Dark and modern, layered with glassmorphism: translucent panels, soft borders and restrained type. A video background sits behind the content, kept dim enough that the hero copy stays dominant.

Interaction & motion
The background video loops quietly behind the content, while the task flow and logo row animate in. Drive the entrances with Framer Motion and keep them brief.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Budget Tracker Hero Velara

- Slug: `jiro-ai-budget-tracker-hero-velara`
- Page: https://landingpageprompts.com/prompts/jiro-ai-budget-tracker-hero-velara
- Effect: A personal finance AI hero with budget dashboard preview, spending insights badges, and trust-focused CTAs. Designed for AI budgeting apps, expense trackers, and financial planning
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,031; total with repair and cross-check: 24,031
- Verification: 18/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Budget Tracker Hero Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Budget Tracker Hero Velara".

Purpose
Present a personal finance AI product in the first screen, pairing a headline and trust-focused calls to action with a preview of the budgeting dashboard. Designed for AI budgeting apps, expense trackers, and financial planning SaaS.

Layout & content
- A hero headline with supporting subcopy and trust-focused CTA buttons.
- A dashboard preview panel showing a budget view.
- Spending insight badges placed near the preview to highlight what the product surfaces.
- A dark video background layer behind the whole hero.

Visual direction
Dark, modern and animated: a deep base with the dashboard preview as the focal light element, and badges styled as compact, legible chips. Keep contrast high so the preview reads clearly over the video layer.

Interaction & motion
Animate the hero with Framer Motion: staggered entrance for headline, CTAs, and preview, plus a gentle float or parallax on the dashboard panel. The background video plays behind the content.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Budget Tracking Landing Page - Velara AI

- Slug: `jiro-ai-budget-tracking-landing-page-velara-ai`
- Page: https://landingpageprompts.com/prompts/jiro-ai-budget-tracking-landing-page-velara-ai
- Effect: A complete landing page for AI budgeting and expense tracking apps. Includes a balance-preview hero, smart insight feature cards, category breakdowns, pricing tiers, testimonials, 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,984; total with repair and cross-check: 27,984
- Verification: 19/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Fintech" block called "AI Budget Tracking Landing Page - Velara AI". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Fintech landing page for a modern website: "AI Budget Tracking Landing Page - Velara AI".

Purpose
This is a complete landing page for an AI budgeting and expense tracking app, aimed at fintech founders launching budget apps, AI money trackers or personal finance tools. It must carry a visitor from first impression to download intent.

Layout & content
- A hero built around a balance preview, over a video background.
- Smart insight feature cards explaining what the product surfaces.
- Category breakdowns showing how spending is organised.
- Pricing tiers with a monthly/yearly toggle.
- Testimonials and closing download CTAs.

Visual direction
Dark overall, with dashboard previews as the hero visual language. Keep the interface imagery legible against the background and use the animated accents to guide attention rather than fill space.

Interaction & motion
Animate dashboard previews and cards, wire the pricing toggle to switch billing periods, and make the breakdowns and FAQ-style accordion interactive.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Chatbot Agent Header

- Slug: `jiro-ai-chatbot-agent-header`
- Page: https://landingpageprompts.com/prompts/jiro-ai-chatbot-agent-header
- Effect: A modern hero section for AI chatbot products featuring a serif headline with orange italic accent, cloud background image, dual CTA buttons (primary orange fill, secondary orange 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 39,763; total with repair and cross-check: 39,763
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Chatbot Agent Header". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Chatbot Agent Header".

Purpose
Open an AI chatbot product page with an elegant hero that states what the agent does and moves visitors to try it or talk to sales. Aimed at teams evaluating conversational AI.

Layout & content
- A serif headline with an orange italic accent phrase, sized as the visual anchor.
- A short supporting paragraph beneath the headline.
- Dual call to action buttons: a primary orange fill and a secondary orange outline that fills on hover.
- A dashboard mockup image with a soft drop shadow, suggesting the product interface.
- A cloud background image sitting behind the hero content.
- Headings use DM Serif Display.

Visual direction
Light and elegant with photography-led atmosphere. Orange is the only accent, used for the italic headline phrase and the two buttons; everything else stays neutral.

Interaction & motion
Fade-up entrances for the headline, paragraph, buttons and mockup, staggered in reading order via Framer Motion. Hover fill transition on the secondary button.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Content Generator Hero Velara

- Slug: `jiro-ai-content-generator-hero-velara`
- Page: https://landingpageprompts.com/prompts/jiro-ai-content-generator-hero-velara
- Effect: An AI content generation hero with prompt input preview, generated output mockup, and writer-focused messaging. Built for AI copywriting tools, blog generators, and content automat
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,077; total with repair and cross-check: 24,077
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Content Generator Hero Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Content Generator Hero Velara".

Purpose
Open an AI writing product page by showing the product working rather than only describing it. The hero must communicate that a short prompt turns into finished written content, and it should speak directly to writers and content teams.

Layout & content
- A prompt input preview showing a short instruction being entered.
- A generated output mockup presenting the resulting draft.
- A writer-focused headline with supporting copy.
- A primary and a secondary call to action.

Visual direction
Dark, futuristic and gradient-led. Use gradient washes behind the input and the output mockup to suggest generation, and keep the interface chrome crisp so the product preview stays legible.

Interaction & motion
Use Framer Motion for an interactive sequence: the prompt preview fills in, then the output mockup appears, with subtle hover and focus responses on the input. lucide-react icons can mark the input and output states.

Stack
- React functional component + Tailwind CSS.
- framer-motion and lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Customer Support Hero Kelo

- Slug: `jiro-ai-customer-support-hero-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-ai-customer-support-hero-kelo
- Effect: An AI customer support hero with chat widget preview, response automation badges, and trust-building CTAs. Built for AI chatbot platforms, support automation, and helpdesk SaaS pro
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 39,335; total with repair and cross-check: 39,335
- Verification: 19/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Customer Support Hero Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Customer Support Hero Kelo".

Purpose
Open the page for an AI customer support product with an animated hero that shows the assistant in action and builds enough trust for a visitor to start a trial or book a demo. Built for AI chatbot platforms, support automation and helpdesk SaaS.

Layout & content
- A hero headline and supporting subtext about AI-driven customer support.
- A chat widget preview panel rendering a realistic support conversation in the product interface.
- A row of response automation badges calling out what the assistant handles on its own.
- Trust-building calls to action plus a secondary action to see more.

Visual direction
Dark theme with glassmorphic surfaces: frosted translucent panels, thin light borders and soft depth. The chat preview reads as a floating glass card above the background.

Interaction & motion
Use Framer Motion for entrance and state transitions in the hero and chat preview. Keep the video background muted, looping and behind a dark overlay so text stays legible.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Customer Support Landing Page - Kelo

- Slug: `jiro-ai-customer-support-landing-page-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-ai-customer-support-landing-page-kelo
- Effect: A complete landing page for AI customer support and helpdesk platforms. Includes a chat-preview hero, automation features, integration logos, pricing tiers, customer testimonials, 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,063; total with repair and cross-check: 31,063
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "AI Agents & Chatbots" block called "AI Customer Support Landing Page - Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an AI Agents & Chatbots landing page for a modern website: "AI Customer Support Landing Page - Kelo".

Purpose
This is a complete landing page for an AI customer support or helpdesk product, assembled from stacked sections. It carries the whole pitch: what the agent does, how it automates support work, what it connects to, what it costs and why customers trust it.

Layout & content
- A hero with a chat-preview visual and a conversion-focused call to action.
- An automation features block describing the support capabilities.
- An integration logo strip.
- Pricing tiers with a monthly and yearly toggle.
- Customer testimonials and closing conversion CTAs.

Visual direction
Light, minimal and modern, with a clean type scale and restrained accent. Hero motion may come from a video background; keep the rest of the page calm so the chat preview stays the focal point.

Interaction & motion
Animate sections in on scroll, drive the toggle to swap billing periods, and let the accordion rows expand and collapse.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Developer Solver Hero Velara

- Slug: `jiro-ai-developer-solver-hero-velara`
- Page: https://landingpageprompts.com/prompts/jiro-ai-developer-solver-hero-velara
- Effect: An AI coding assistant hero with terminal preview, code snippet animation, and developer-focused messaging. Built for AI development tools, copilots, and engineering productivity p
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 43,851; total with repair and cross-check: 43,851
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Developer Solver Hero Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header hero section for a modern website: "AI Developer Solver Hero Velara".

Purpose
Open an AI coding assistant product page by showing the tool in action. The hero must speak to developers evaluating copilots and engineering productivity platforms, so it leads with capability rather than marketing adjectives.

Layout & content
- A headline and supporting line framed around developer productivity and AI assistance.
- A terminal or code editor preview panel showing a snippet, with the snippet animating as if it were being written.
- A supporting visual or secondary panel consistent with a dark developer tool aesthetic.
- Primary and secondary actions placed near the headline.

Visual direction
Dark, modern and glassy: translucent panels with blur, thin borders and a restrained palette. Treat the terminal preview as the focal surface.

Interaction & motion
Animated code typing or line-by-line snippet reveal, plus entrance motion for the hero copy. A subtle looping background video is appropriate for the dark hero.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the snippet and entrance animation.
- lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI HR Manager Website Header

- Slug: `jiro-ai-hr-manager-website-header`
- Page: https://landingpageprompts.com/prompts/jiro-ai-hr-manager-website-header
- Effect: A dark, cinematic hero section for an AI HR platform featuring a looping silk background video, glassmorphic badge, gradient CTA buttons with spring hover animations, and an intera
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,011; total with repair and cross-check: 26,011
- Verification: 18/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI HR Manager Website Header". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI HR Manager Website Header".

Purpose
Open an AI HR platform's marketing page with a cinematic, dark hero that communicates what the product does and drives visitors toward a trial or demo.

Layout & content
- Full-width hero with a looping silk background video behind the headline.
- A glassmorphic badge above the headline for a short product signal.
- Headline plus a supporting line of product copy.
- Gradient CTA buttons, one primary and one secondary.
- An interactive video product card with custom playback controls.

Visual direction
Dark and cinematic: deep background, soft gradient light, frosted glass surfaces, and a bright gradient accent reserved for the calls to action.

Interaction & motion
Use spring hover animation on the CTA buttons, animate hero copy in on load, and wire the product card's play, pause and scrub controls to the embedded video.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance, spring hover and glass transitions.
- lucide-react for icons and playback controls.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Image Genertion Hero kelo

- Slug: `jiro-ai-image-genertion-hero-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-ai-image-genertion-hero-kelo
- Effect: An AI image generator hero with prompt-to-image preview, gallery showcase, and creator-focused messaging. Built for AI art platforms, image generation SaaS, and creative AI tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 44,356; total with repair and cross-check: 44,356
- Verification: 19/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Image Genertion Hero kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Image Genertion Hero kelo".

Purpose
Sell an AI image generator to creators: show that a text prompt becomes an image, prove output quality with a gallery, and speak to people who make visuals for a living. For AI art platforms, image generation SaaS and creative AI tools.

Layout & content
- A dark hero with a creator-focused headline, a subheadline and a primary CTA.
- A prompt-to-image preview: a prompt input shown beside the resulting generated image, as illustrative mock content.
- A gallery showcase strip of generated image slots that suggests range and variety.
- A secondary link for exploring the gallery or examples.

Visual direction
Dark with photography-led imagery: the generated images carry the colour while the surrounding UI stays quiet and minimal so the visuals read clearly.

Interaction & motion
Interactive and animated: the prompt-to-image preview transitions between example states, the gallery animates on scroll or hover, and the video background plays behind the hero.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the transitions, lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Interior Generator Header

- Slug: `jiro-ai-interior-generator-header`
- Page: https://landingpageprompts.com/prompts/jiro-ai-interior-generator-header
- Effect: A stunning hero section for AI interior design tools featuring an animated mesh gradient background with grain texture overlay, glassmorphic badge, Geist font heading, two-column l
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,926; total with repair and cross-check: 30,926
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Interior Generator Header". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Interior Generator Header".

Purpose
Launch an AI interior design tool with a hero that shows the product working, targeting people who need to see an input and result side by side before trying it.

Layout & content
- Two-column hero: the left column carries the heading, a supporting line and a feature list with gradient checkmark icons; the right column holds a form card and an image card.
- A glassmorphic badge above the heading.
- A gradient-bordered call to action button.
- Background treatment: an animated mesh gradient with a grain texture overlay.
- Heading set in the Geist font.

Visual direction
Light, gradient-led and glassmorphic: soft colour fields under a fine grain layer, translucent cards, and gradient accents on badge, button and checkmarks. Type stays clean so the gradient decorates.

Interaction & motion
CSS keyframe animations move the mesh gradient continuously, and an inner shimmer drives the badge and button. Framer Motion handles card and content entrances; the form card is interactive.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Marketing Hero Kelo

- Slug: `jiro-ai-marketing-hero-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-ai-marketing-hero-kelo
- Effect: An AI marketing platform hero with campaign preview, performance metrics, and growth-focused CTAs. Built for marketing automation, AI ad tools, and digital marketing SaaS products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 36,241; total with repair and cross-check: 36,241
- Verification: 13/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Marketing Hero Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Marketing Hero Kelo".

Purpose
Open a marketing automation product page with a hero that shows campaign work and performance at a glance, then drives growth-focused action. Built for marketing automation, AI ad tools, and digital marketing SaaS products.

Layout & content
- A hero headline with supporting subcopy and growth-focused CTAs.
- A campaign preview panel showing marketing output.
- Performance metrics displayed alongside or beneath the preview.
- A dark video background behind the hero content.

Visual direction
Dark, modern and animated: a deep backdrop so the campaign preview and metrics stand out, with metrics treated as crisp, compact readouts rather than a large chart.

Interaction & motion
Use Framer Motion for a staggered entrance of headline, CTAs, preview, and metrics, with a slow drift or parallax on the preview panel. Background video runs continuously.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Marketing Landing Page - Kelo

- Slug: `jiro-ai-marketing-landing-page-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-ai-marketing-landing-page-kelo
- Effect: A complete landing page for AI marketing automation and content generation SaaS. Includes a campaign-preview hero, feature sections for AI copy and analytics, integration grid, pri
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,494; total with repair and cross-check: 31,494
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Marketing & Sales" block called "AI Marketing Landing Page - Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Marketing & Sales landing page for a modern website: "AI Marketing Landing Page - Kelo".

Purpose
This is a complete landing page for an AI marketing automation and content generation SaaS, aimed at marketers and founders launching AI marketing tools, ad platforms or content engines. It should communicate capability and drive sign-up.

Layout & content
- A campaign-preview hero over a video background.
- Feature sections covering AI copy and analytics.
- An integration grid showing connected platforms.
- Pricing tiers with a monthly/yearly toggle.
- Testimonials and closing CTAs.

Visual direction
Light and modern, with dashboard previews doing the explanatory work. Keep layouts airy and typography confident so the product surfaces, not decoration, hold attention.

Interaction & motion
Animate section entrances and preview panels, make the pricing toggle switch billing periods, and support an accordion pattern for the longer explanatory content.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Notepad Website Header

- Slug: `jiro-ai-notepad-website-header`
- Page: https://landingpageprompts.com/prompts/jiro-ai-notepad-website-header
- Effect: Dark hero section for an AI notepad app with background video light rays, gradient text label, Playfair Display serif headline, animated glassmorphic card carousel with Recharts ba
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 39,280; total with repair and cross-check: 39,280
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Notepad Website Header". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Notepad Website Header".

Purpose
Launch an AI notepad app with a dark, atmospheric hero that shows the product in motion and reassures visitors about platform availability before they sign up.

Layout & content
- A gradient text label above the headline, acting as an eyebrow.
- A Playfair Display serif headline plus a short supporting line.
- An animated glassmorphic card carousel in which each card contains a Recharts bar chart illustrating note or usage activity.
- Dual call to action buttons: a pink primary carrying an Apple icon, and a dark secondary.
- A trust row listing platform availability.
- A background video of light rays behind the whole hero.

Visual direction
Dark, glassmorphic and gradient-led. Frosted translucent cards with backdrop blur float over the moving light-ray footage, with pink reserved as the primary action colour.

Interaction & motion
The card carousel animates continuously and pauses on hover; headline and buttons fade up on load. Video background plays muted and loops.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react
- recharts

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Notes Taker Hero Velara

- Slug: `jiro-ai-notes-taker-hero-velara`
- Page: https://landingpageprompts.com/prompts/jiro-ai-notes-taker-hero-velara
- Effect: An AI note-taking hero section with transcript preview, audio visualizer accents, and productivity-led CTAs. Designed for meeting recorders, AI transcription apps, and knowledge ma
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 21,477; total with repair and cross-check: 21,477
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Notes Taker Hero Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Notes Taker Hero Velara".

Purpose
Introduce an AI note-taking product by showing a captured conversation turning into usable notes. The hero targets people who record meetings and want transcripts without manual effort.

Layout & content
- A transcript preview panel showing speaker turns as text.
- Audio visualizer accents implying live recording.
- A productivity-led headline with supporting copy.
- A clear primary call to action, plus a secondary path for the cautious visitor.

Visual direction
Dark and modern, with glassmorphism panels floating over a video background. Keep text contrast high enough to read over moving footage, and make the transcript panel the sharpest element on screen.

Interaction & motion
Use Framer Motion for entrance and state transitions, and animate the audio visualizer bars so the panel reads as live. The video background should loop quietly behind the glass surfaces without competing with the copy.

Stack
- React functional component + Tailwind CSS.
- framer-motion and lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Sales Call Analyzer Header

- Slug: `jiro-ai-sales-call-analyzer-header`
- Page: https://landingpageprompts.com/prompts/jiro-ai-sales-call-analyzer-header
- Effect: A modern, fully responsive SaaS header for AI sales call analysis products. Features a glassmorphism navbar with purple accent branding, hero section with gradient CTA buttons, and
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,885; total with repair and cross-check: 31,885
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Sales Call Analyzer Header". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Sales Call Analyzer Header".

Purpose
Introduce an AI sales call analysis product: a fully responsive SaaS header that pairs a glassmorphism navbar and hero with a dashboard preview proving the analytics story.

Layout & content
- A glassmorphism navbar carrying product navigation and the purple accent branding.
- A hero headline with subtext and gradient CTA buttons.
- A comprehensive dashboard card previewing call statistics, each metric carrying a trend indicator.
- An AI analytics panel with expandable accordion sections, sitting with or inside the dashboard card.

Visual direction
Light theme with glassmorphism: translucent frosted surfaces, purple accents reserved for branding and the gradient CTAs, and clean dashboard typography. Trend indicators use small lucide-react arrow icons.

Interaction & motion
Framer Motion for the hero entrance, accordion expand and collapse, and hover states on the CTAs and navbar. Everything must stay fully responsive from mobile up to desktop.

Stack
- React functional component + Tailwind CSS.
- framer-motion, lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Task Management Hero Velara

- Slug: `jiro-ai-task-management-hero-velara`
- Page: https://landingpageprompts.com/prompts/jiro-ai-task-management-hero-velara
- Effect: An AI task management hero with kanban-style preview, automation messaging, and conversion-focused CTAs. Suited for AI-powered project tools, workflow automation, and intelligent p
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 20,567; total with repair and cross-check: 20,567
- Verification: 18/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Task Management Hero Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Task Management Hero Velara".

Purpose
Open the page for an AI-powered project and task tool. The hero must explain that the product automates workflow planning while showing a kanban-style preview that makes the automation tangible for teams evaluating productivity platforms.

Layout & content
- A headline and supporting paragraph on the left, framed around automation messaging.
- Primary and secondary conversion-focused call-to-action buttons.
- A kanban-style dashboard preview as the hero visual, showing columns of task cards.
- Enough vertical space for the preview to sit inside the fold on desktop and stack below the copy on mobile.

Visual direction
Dark, modern and product-led, with the dashboard preview rendered as a crisp UI panel that contrasts against the dark background. Motion in the hero may come from a video background.

Interaction & motion
Animate the hero copy and buttons in on load, and let the dashboard preview enter with a subtle rise or fade.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the entrance animation, lucide-react for interface icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Video Editor Hero Luma

- Slug: `jiro-ai-video-editor-hero-luma`
- Page: https://landingpageprompts.com/prompts/jiro-ai-video-editor-hero-luma
- Effect: An AI video editing hero with timeline preview, transcript-based editing visuals, and creator-focused messaging. Suited for AI video tools, podcast editors, and content creation pl
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 40,162; total with repair and cross-check: 40,162
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Video Editor Hero Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header hero section for a modern website: "AI Video Editor Hero Luma".

Purpose
Introduce an AI video editing product to creators by showing the editing surface itself. The hero should communicate transcript-based editing and timeline control for AI video tools, podcast editors and content platforms.

Layout & content
- A creator-focused headline with a short supporting paragraph.
- A dashboard preview panel containing a timeline and a transcript-style editing view, showing how edits map to text.
- Supporting UI details such as selection states or clip markers inside the preview.
- Primary and secondary call to action buttons near the copy.

Visual direction
Dark, modern and glassy. Translucent surfaces with blur, fine borders and a cool neutral palette, with the dashboard preview as the brightest element on the page.

Interaction & motion
Animated entrance for the copy and a gentle motion treatment inside the preview, such as a progressing playhead or shifting transcript highlight.

Stack
- React functional component + Tailwind CSS.
- lucide-react for icons.
- No additional animation library is listed; plain CSS or Tailwind transitions are fine.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI video Translator Hero Luma

- Slug: `jiro-ai-video-translator-hero-luma`
- Page: https://landingpageprompts.com/prompts/jiro-ai-video-translator-hero-luma
- Effect: An AI video translation hero with multi-language preview, lip-sync demo imagery, and global reach messaging. Built for video localization tools, dubbing platforms, and translation 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,804; total with repair and cross-check: 23,804
- Verification: 14/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI video Translator Hero Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI video Translator Hero Luma".

Purpose
Launch an AI video translation product with a hero that shows localization in action and frames the offer around global reach. Built for video localization tools, dubbing platforms and translation AI services.

Layout & content
- Hero headline with a short line of global-reach messaging.
- A multi-language preview showing the same content rendered across languages.
- Lip-sync demo imagery that visualizes the translation result.
- Primary and secondary calls to action.
- A compact trust or capability row beneath the hero.

Visual direction
Light and modern with soft gradient accents, clean type, and product imagery treated as the focal point rather than a background texture.

Interaction & motion
Animate the language preview between states, use entrance animation on the hero copy, and add interactive hover feedback on the preview and CTAs.

Stack
- React functional component + Tailwind CSS.
- framer-motion for state transitions, entrance and hover animation.
- lucide-react for iconography.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Voice Generator Header

- Slug: `jiro-ai-voice-genarator-header`
- Page: https://landingpageprompts.com/prompts/jiro-ai-voice-genarator-header
- Effect: A full-screen AI voice generator hero with looping background video, gradient badge, bold Manrope headline, and dual CTA pill buttons. Built for text-to-speech platforms, voice AI 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 35,769; total with repair and cross-check: 35,769
- Verification: 19/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Voice Generator Header". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Voice Generator Header".

Purpose
Give a text-to-speech product a full-screen opening that communicates voice AI at a glance, with a clear route to try it. For text-to-speech platforms, voice AI products and audio generation SaaS.

Layout & content
- A full-screen hero with a looping background video behind the content.
- A gradient badge above the headline marking the product or a launch.
- A bold headline set in Manrope, plus a short supporting line.
- Two CTA pill buttons: one primary, one secondary.

Visual direction
Dark, gradient-led and minimal: the gradient badge and the pill buttons are the only saturated accents, the video supplies depth, and typography carries the rest.

Interaction & motion
The background video loops continuously; badge and buttons may fade or lift in on load. Keep motion subtle so the headline stays legible over the video.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## AI Voice Platform Hero Luma

- Slug: `jiro-ai-voice-platform-hero-luma`
- Page: https://landingpageprompts.com/prompts/jiro-ai-voice-platform-hero-luma
- Effect: An AI voice generation hero with waveform visualizer, voice library preview, and developer-focused CTAs. Designed for text-to-speech platforms, voice cloning APIs, and audio AI pro
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,821; total with repair and cross-check: 26,821
- Verification: 18/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "AI Voice Platform Hero Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "AI Voice Platform Hero Luma".

Purpose
Present an AI voice generation platform to developers and product teams. It should make text-to-speech, voice cloning and audio AI capability legible at a glance and route visitors toward developer-facing calls to action.

Layout & content
- A hero headline with a short supporting line, plus developer-focused calls to action such as documentation and getting started.
- A waveform visualizer as the central visual, standing in for generated audio.
- A voice library preview area where individual voices can be inspected.
- A tab row that switches between voices or voice categories.

Visual direction
Dark, modern and audio-native: deep surfaces, crisp waveform lines and restrained type. Tabs should read as a precise control strip rather than a decorative element.

Interaction & motion
The waveform animates as if audio is playing, and switching tabs swaps the voice preview with a Framer Motion transition. The section is explicitly interactive, so hover and active tab states must be clear.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Aurora Gradient

- Slug: `jiro-aurora-gradient`
- Page: https://landingpageprompts.com/prompts/jiro-aurora-gradient
- Effect: An aurora gradient motion background with soft, flowing blob shapes in pastel pink, blue, and orange tones. Drop it behind any hero, page, card, or modal to add organic, dreamy mot
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,750; total with repair and cross-check: 27,750
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Background" block called "Aurora Gradient". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Background section for a modern website: "Aurora Gradient".

Purpose
Provide a reusable motion background of soft, flowing aurora shapes that adds organic, dreamy movement to an otherwise flat section. Meant to sit behind any hero, page, card, or modal.

Layout & content
- A full-bleed background layer that fills its parent container.
- Soft flowing blob shapes drifting slowly across the surface.
- No foreground copy of its own: it is a layer designed to have white or light text content placed on top.
- Keep it composable so it can be dropped behind heroes, pages, cards, or modals.

Visual direction
Colorful, pastel and gradient-driven, with soft pink, blue, and orange tones blending into one another. The result should feel dreamy and organic rather than geometric.

Interaction & motion
Continuous ambient animation: blobs flow and shift slowly on a loop. Motion should be smooth and low-contrast so overlaid text stays readable.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required beyond React.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Blog 01 Blaze

- Slug: `jiro-blog-01-blaze`
- Page: https://landingpageprompts.com/prompts/jiro-blog-01-blaze
- Effect: A travel blog grid section with destination article cards, vibrant imagery, and category badges. Built for travel platforms, tourism brands, and lifestyle content sites.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 33,420; total with repair and cross-check: 33,420
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Blogs & Articles" block called "Blog 01 Blaze". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Blogs & Articles section for a modern website: "Blog 01 Blaze".

Purpose
This section presents a travel publication's latest writing to people planning trips. It should make destination articles easy to scan by subject and invite readers into the archive.

Layout & content
- A section heading with a short line of context.
- A grid of destination article cards.
- Vibrant imagery on each card.
- Category badges labelling each article's subject.

Visual direction
Light, minimal and modern, with photography as the dominant element. Let the images stay vivid while the surrounding type and spacing remain quiet, so the grid reads cleanly at a glance.

Interaction & motion
Use framer-motion for staggered card reveals on scroll and a gentle lift on hover; keep card-level motion brief.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Blog 01 Orbit

- Slug: `jiro-blog-01-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-blog-01-orbit
- Effect: A coaching blog grid section with article preview cards, category badges, and outcome-focused headlines. Suited for coaches, course creators, and personal brand content.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 37,003; total with repair and cross-check: 37,003
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Blogs & Articles" block called "Blog 01 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Blogs & Articles section for a modern website: "Blog 01 Orbit".

Purpose
Surface a coach's writing so prospective students can sample the teaching style and see the outcomes discussed. Built for coaches, course creators and personal brand content.

Layout & content
- A section header with a short title and one line framing the articles.
- A grid of article preview cards, each with a thumbnail, a category badge, an outcome-focused headline and a short excerpt.
- An author row on each card using a small avatar and name.
- A single link at the end of the grid to view all articles.
- Keep the grid even and let card content vary in length naturally.

Visual direction
Light and minimal: restrained type, soft card separation, photography as the main colour source. Category badges stay quiet so the headlines remain the loudest element.

Interaction & motion
Cards fade and rise into view in a light stagger with Framer Motion, and lift slightly on hover with the thumbnail easing in scale. No looping motion.

Stack
- React functional component + Tailwind CSS.
- framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Blog 01 Pixa

- Slug: `jiro-blog-01-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-blog-01-pixa
- Effect: Three-column blog grid with rounded image cards, colored category badges with icons, hover zoom effects, and staggered scroll-triggered reveal animations.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,628; total with repair and cross-check: 24,628
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Blogs & Articles" block called "Blog 01 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Blogs & Articles section for a modern website: "Blog 01 Pixa".

Purpose
Give the site an editorial surface that invites browsing. The section should present recent articles clearly enough that a visitor can scan titles, recognise topics and choose one to open.

Layout & content
- A three-column grid of article cards.
- Each card carries a rounded image, a coloured category badge with an icon, a title and short supporting copy.
- Every card links out to its own article.
- Neutral placeholder headlines and dates, since no real articles are supplied.

Visual direction
Light and photography-forward. The rounded image cards carry the visual weight, the badges add small hits of colour, and the surrounding type stays minimal so the images lead.

Interaction & motion
Use Framer Motion for staggered scroll-triggered reveals across the grid, and a gentle zoom on the card image on hover. lucide-react supplies the badge icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion and lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Blog 02 Pixa

- Slug: `jiro-blog-02-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-blog-02-pixa
- Effect: Featured article with overlay gradient and side list of recent posts with thumbnail images, horizontal slide-in animations, and hover color transitions.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 41,911; total with repair and cross-check: 41,911
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Blogs & Articles" block called "Blog 02 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Blogs & Articles section for a modern website: "Blog 02 Pixa".

Purpose
Surface editorial content: one featured article given visual priority, with a compact list of recent posts beside it so a reader can move straight on to another story.

Layout & content
- A featured article card with a photographic cover image and a gradient overlay carrying the title and meta line.
- A side list of recent posts, each row pairing a thumbnail image with a title and meta line.
- Links from every card to its article, using placeholder hrefs.
- A section heading to frame the block.

Visual direction
Light and minimal, with photography doing the heavy lifting: generous white space, restrained type, and hover colour transitions on titles and links.

Interaction & motion
Framer Motion for horizontal slide-in animations as the featured card and the recent list enter the viewport, plus hover colour transitions on the post rows.

Stack
- React functional component + Tailwind CSS.
- framer-motion, lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Blogs - Luxterra

- Slug: `jiro-blogs-luxterra`
- Page: https://landingpageprompts.com/prompts/jiro-blogs-luxterra
- Effect: Explore useful real estate insights, market trends, buying guides, investment tips, and property advice designed to help buyers and investors make smarter decisions.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,075; total with repair and cross-check: 23,075
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Blogs & Articles" block called "Blogs - Luxterra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Blogs & Articles section for a modern website: "Blogs - Luxterra".

Purpose
Surface editorial content for a real estate audience. The section must help buyers and investors find useful insights, market trends, buying guides, investment tips and property advice, and make it obvious which article to open next.

Layout & content
- A grid of article cards, each with a photography thumbnail, a title, a short excerpt and a category badge.
- Category badges that label each post so readers can scan by topic.
- A section heading and a short supporting line introducing the library.
- Make the grid responsive, dropping from several columns to a single column on small screens.

Visual direction
Light and editorial, with photography carrying most of the visual weight, restrained borders and a clear typographic hierarchy between title, excerpt and badge.

Interaction & motion
Make the cards interactive on hover with a gentle lift or image zoom, and animate the grid items into view on scroll.

Stack
- React functional component + Tailwind CSS.
- framer-motion for reveal and hover motion, lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Charity Headers

- Slug: `jiro-charity-headers`
- Page: https://landingpageprompts.com/prompts/jiro-charity-headers
- Effect: A nonprofit hero section with mission-driven imagery, donation CTAs, and impact metrics preview. Built for charity organizations, fundraising campaigns, and social impact brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 34,404; total with repair and cross-check: 34,404
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Charity Headers". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header hero section for a modern website: "Charity Headers".

Purpose
Open a nonprofit or fundraising page with a mission-first hero. It must make the cause legible immediately and give visitors an obvious way to give, aimed at charities, campaigns and social impact brands.

Layout & content
- A mission-driven headline with a short statement of what the organisation does.
- A photographic hero image area that carries the emotional weight of the cause.
- Donation call to action buttons, with a clear primary action.
- A preview row of impact metrics so visitors can see outcomes at a glance.

Visual direction
Light and elegant, led by photography. Generous white space, restrained type and calm surfaces so the imagery and the donation action stand out.

Interaction & motion
Animated entrance for the headline, image and metrics, keeping the motion gentle and respectful rather than flashy.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Chrome Bezel 3D

- Slug: `jiro-chrome-bezel-3d`
- Page: https://landingpageprompts.com/prompts/jiro-chrome-bezel-3d
- Effect: A premium skeuomorphic pill button with rotating prismatic chrome bezel effect. Features a conic gradient that spins continuously creating rainbow light reflections on a brushed me
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,442; total with repair and cross-check: 19,442
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Chrome Bezel 3D". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button component for a modern website: "Chrome Bezel 3D".

Purpose
Deliver a premium, skeuomorphic pill button whose metallic bezel reads as a physical object, for use as a hero or primary call to action.

Layout & content
- A pill-shaped button with a brushed metal outer frame.
- A white gradient button surface carrying the label.
- A rotating prismatic chrome bezel ring around the frame.
- Layered highlight and shadow details that sell the physical depth.

Visual direction
Light and glossy: a conic gradient spinning behind the bezel to throw rainbow light reflections across the metal, high-contrast white surface, and realistic multi-layer shadows.

Interaction & motion
The conic gradient spins continuously; on hover the button lifts slightly, and on press it compresses into an active pressed state.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Circle Reveal Button

- Slug: `jiro-circle-reveal-button`
- Page: https://landingpageprompts.com/prompts/jiro-circle-reveal-button
- Effect: A pill button with a circle reveal hover effect — a circle expands from the cursor entry point filling the button with a new color while the text transitions. Fully customizable co
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 34,229; total with repair and cross-check: 34,229
- Verification: 15/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Circle Reveal Button". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button component for a modern website: "Circle Reveal Button".

Purpose
Provide a reusable pill button whose hover state is the interaction itself: a circle expands from wherever the cursor enters and fills the button with a second colour while the label transitions. Suitable anywhere a single CTA needs to feel considered.

Layout & content
- A pill-shaped button with a centred text label.
- A circular reveal layer that originates at the cursor entry point and expands to fill the pill.
- Prop-driven colours for the resting state, the reveal fill and the text, so one component supports several variations.
- An optional leading or trailing icon slot.

Visual direction
Light and minimal: a clean pill on a neutral surface, with the reveal fill as the one vivid moment. Keep the resting button quiet so the hover reads as a deliberate change.

Interaction & motion
Interactive and animated: track the pointer entry position, expand the circle with a smooth transition, and cross-fade the label colour in step. Provide a keyboard-focus equivalent.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Contact Us 01 Orbit

- Slug: `jiro-contact-us-01-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-contact-us-01-orbit
- Effect: A coaching contact section with inquiry form, supporting contact details, and warm conversion-focused layout. Built for coaches, mentors, and personal development brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 22,857; total with repair and cross-check: 22,857
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Contact Us" block called "Contact Us 01 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Contact Us section for a modern website: "Contact Us 01 Orbit".

Purpose
Give prospective coaching clients a warm, low-friction way to start a conversation. The section is for coaches, mentors and personal development brands, so the tone should feel personal and inviting rather than corporate.

Layout & content
- A short introduction that invites the enquiry and sets the tone.
- An inquiry form as the primary element: name, email and message fields with a submit action.
- A supporting column of contact details beside the form.
- A photographic element to soften the layout and add a human presence.

Visual direction
Light and minimal, with soft surfaces, generous spacing and modern but restrained typography. Photography supplies the warmth; everything else stays quiet and legible.

Interaction & motion
Interactive form states only: clear focus and hover treatment on fields, plus a visible submit and confirmation state. No scroll animation is required.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Contact Us 02 Orbit

- Slug: `jiro-contact-us-02-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-contact-us-02-orbit
- Effect: A coaching contact section with inquiry form, contact method cards, and consultation-focused layout. Built for coaches, course creators, and personal brand sites.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 33,807; total with repair and cross-check: 33,807
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Contact Us" block called "Contact Us 02 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Contact Us section for a modern website: "Contact Us 02 Orbit".

Purpose
Give prospective clients a clear way to start a conversation, combining an inquiry form with the available contact methods. Built for coaches, course creators, and personal brand sites.

Layout & content
- An inquiry form as the primary element of the section.
- Contact method cards listing the ways to get in touch.
- A consultation-focused framing in the section copy, so the form reads as the start of a conversation.
- Any supplementary detail presented as collapsible accordion rows.

Visual direction
Light, minimal, and modern: clean surfaces, restrained type, and cards that stay simple so the form remains the focus.

Interaction & motion
Animate form and card entrances with Framer Motion, and make the accordion rows expand and collapse smoothly with an interactive open/close state. Icons from lucide-react support the contact method cards.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## CTA 01 Luma

- Slug: `jiro-cta-01-luma`
- Page: https://landingpageprompts.com/prompts/jiro-cta-01-luma
- Effect: A flagship AI media CTA section with prominent headline, creator-focused messaging, and primary conversion button. Suited for AI video, audio, and content generation tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,020; total with repair and cross-check: 24,020
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Calls To Action" block called "CTA 01 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Calls To Action section for a modern website: "CTA 01 Luma".

Purpose
This is a flagship call to action for an AI media product, speaking to creators who make video, audio and generated content. It should be the most emphatic moment on the page and push the visitor toward one primary action.

Layout & content
- A prominent headline carrying the creator-focused message.
- A short supporting line of body copy.
- One primary conversion button as the focal point.

Visual direction
Dark and futuristic, built on gradient and neon accents. Treat the section as a lit stage: the headline should dominate, and the glow should concentrate around the action rather than spread evenly.

Interaction & motion
Use framer-motion for an entrance reveal of the headline and button, plus restrained hover and press feedback on the primary action.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## CTA 01 Orbit

- Slug: `jiro-cta-01-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-cta-01-orbit
- Effect: A flagship coaching CTA section with prominent headline, outcome-focused subtext, and consultation CTA. Built for coaches, course creators, and personal development brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 29,043; total with repair and cross-check: 29,043
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Calls To Action" block called "CTA 01 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Calls To Action section for a modern website: "CTA 01 Orbit".

Purpose
Close a coaching page by turning interest into a booked consultation. The section states the outcome on offer and asks for one decisive action, for coaches, course creators and personal development brands.

Layout & content
- A prominent headline stating the transformation in plain, confident language.
- Outcome-focused subtext of one or two sentences supporting the headline.
- A single consultation call to action button as the only action in the section.
- A small row of avatars as a human, social-proof detail beside the call to action.
- Generous vertical space above and below so the block reads as a pause in the page.

Visual direction
Light and bold with a minimal layout: one strong type scale jump, plenty of whitespace, and no competing decoration. Avatar imagery supplies the only colour.

Interaction & motion
Static section; no animation required.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## CTA 01 Velara

- Slug: `jiro-cta-01-velara`
- Page: https://landingpageprompts.com/prompts/jiro-cta-01-velara
- Effect: An AI product CTA section with bold headline, capability badge, and conversion-driven dual buttons. Designed for AI platforms, automation tools, and intelligent SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 20,157; total with repair and cross-check: 20,157
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Calls To Action" block called "CTA 01 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Calls To Action section for a modern website: "CTA 01 Velara".

Purpose
Convert a reader who has already scrolled this far. The section should restate the product's core promise in one bold line and remove any friction between interest and the next click.

Layout & content
- A capability badge above the headline.
- A bold, short headline carrying the main promise.
- One line of supporting copy.
- Two buttons: a primary conversion action and a secondary lower-commitment action.

Visual direction
Dark, futuristic and neon-accented, sitting on a gradient field. Keep the composition centred and uncluttered so the headline and the two buttons are the only things competing for attention.

Interaction & motion
Use Framer Motion for a subtle entrance reveal and for hover and press feedback on the buttons. Keep the motion restrained; emphasis should come from contrast rather than movement.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## CTA 02 Luma

- Slug: `jiro-cta-02-luma`
- Page: https://landingpageprompts.com/prompts/jiro-cta-02-luma
- Effect: An AI media CTA section with bold headline, creator-focused subtext, and conversion-driven buttons. Built for AI video tools, content platforms, and generative SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,193; total with repair and cross-check: 27,193
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Calls To Action" block called "CTA 02 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Calls To Action section for a modern website: "CTA 02 Luma".

Purpose
Close the page with one decisive invitation to act: a bold statement aimed at creators, supported by subtext about what they can make. Built for AI video tools, content platforms and generative SaaS.

Layout & content
- A bold headline as the dominant element of the section.
- Creator-focused subtext directly beneath it.
- One primary conversion button plus a secondary ghost button or text link.
- A photographic backdrop sitting behind the copy.

Visual direction
Dark and bold: heavy type contrast, a photographic background pushed back under a dark overlay, and a primary button that reads instantly against it. Keep to one accent colour.

Interaction & motion
Animate the headline, subtext and buttons on entry with CSS transitions or keyframes, and give each button a clear hover state. No motion dependency is declared for this component.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## CTA 02 Orbit

- Slug: `jiro-cta-02-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-cta-02-orbit
- Effect: A coaching CTA section with split-screen layout, transformation imagery, and enrollment-driven buttons. Designed for coaches, mentors, and online education platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,326; total with repair and cross-check: 27,326
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Calls To Action" block called "CTA 02 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Calls To Action section for a modern website: "CTA 02 Orbit".

Purpose
Close a coaching or online education page with a decisive enrollment push. It targets prospective clients of coaches, mentors and course platforms, and should turn the end of the page into a clear next step rather than a soft sign-off.

Layout & content
- A split-screen layout: copy and buttons on one side, transformation imagery on the other.
- A bold headline and a short supporting line framing the outcome of enrolling.
- One primary enrollment button plus a quieter secondary action.
- A row of avatars suggesting a community already taking part.

Visual direction
Light and minimal but bold in scale, with heavy headline weight, generous spacing, and imagery that shows change or progress rather than product UI.

Interaction & motion
Animate the two halves in from opposite sides on scroll, with a soft hover state on the enrollment buttons and a gentle stagger across the avatar row.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance and hover motion, lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## CTA 03 orbit

- Slug: `jiro-cta-03-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-cta-03-orbit
- Effect: A coaching CTA section with personal imagery, conversion-focused headline, and consultation booking button. Built for coaches, course creators, and personal brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 35,895; total with repair and cross-check: 35,895
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Calls To Action" block called "CTA 03 orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Calls To Action section for a modern website: "CTA 03 orbit".

Purpose
Convert visitors into booked conversations for a coaching or personal brand offer. The section pairs personal imagery with a direct, conversion-focused headline and a consultation booking action.

Layout & content
- A conversion-focused headline with a short supporting line about working together.
- Personal imagery of the coach or brand owner beside or behind the copy.
- A consultation booking button as the primary action, with room for a secondary link.
- A marquee band of avatars suggesting the community around the offer.

Visual direction
Light and minimal, letting the personal imagery and the headline dominate. Keep surfaces flat and typography confident.

Interaction & motion
Animated entrance for the copy and imagery, a continuously scrolling avatar marquee, and a hover treatment on the booking button.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance and marquee motion.
- lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Electric Border Button

- Slug: `jiro-electric-border-button`
- Page: https://landingpageprompts.com/prompts/jiro-electric-border-button
- Effect: A reusable button wrapper with animated electric/lightning border effect using Canvas 2D. Features octaved noise displacement for organic movement, configurable color/speed/chaos p
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,247; total with repair and cross-check: 31,247
- Verification: 18/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Electric Border Button". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button component for a modern website: "Electric Border Button".

Purpose
Provide a reusable button wrapper whose animated electric border makes a call to action feel energetic and alive on a dark interface.

Layout & content
- A wrapper component that accepts any button content as children.
- A Canvas 2D drawn border that traces the button outline.
- Octaved noise displacement so the border movement looks organic rather than mechanical.
- Configurable colour, speed and chaos parameters exposed as props.
- Multiple stacked glow layers around the edge.

Visual direction
Dark theme with a green neon aesthetic: a near-black surface, a bright neon stroke, and layered bloom around the border.

Interaction & motion
The border animates continuously; make it high DPI aware and keep it responsive by measuring the element with a ResizeObserver.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required; draw the effect with the Canvas 2D API.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Energy Beam Bg

- Slug: `jiro-energy-beam-bg`
- Page: https://landingpageprompts.com/prompts/jiro-energy-beam-bg
- Effect: An energy beam motion background with glowing cyan and magenta beams radiating from a central glow, layered over deep black. Drop it behind any hero, page, card, or modal to add hi
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,315; total with repair and cross-check: 24,315
- Verification: 15/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Background" block called "Energy Beam Bg". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Background component for a modern website: "Energy Beam Bg".

Purpose
Supply a reusable motion backdrop that gives a flat section high-energy, sci-fi movement. It sits behind a hero, page, card or modal, and is intended to carry white or light text content on top.

Layout & content
- A full-bleed background layer with no content of its own.
- A central glow as the origin point of the composition.
- Beams radiating outward from that centre.
- A layering API so it can be dropped behind an existing section without restructuring it.

Visual direction
Dark and neon: glowing cyan and magenta beams over deep black, with soft bloom rather than hard edges. Contrast stays high enough that light text remains readable on top.

Interaction & motion
Animated: the beams and the central glow move continuously so the background never feels static. Keep the movement slow and ambient, and respect reduced-motion preferences.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the beam and glow animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 01 Kelo

- Slug: `jiro-faq-01-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-faq-01-kelo
- Effect: An AI FAQ section with accordion-style expandable questions, capability categories, and clean typography. Built for AI agents, automation SaaS, and AI-powered platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 22,226; total with repair and cross-check: 22,226
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 01 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 01 Kelo".

Purpose
Answer the questions that block adoption of an AI product, for buyers of AI agents, automation SaaS and AI-powered platforms. It should read as a fast reference, not as marketing copy.

Layout & content
- A short section intro: headline and one supporting line.
- An accordion list of expandable questions, each row revealing its answer on click.
- Capability categories that group the questions so visitors can scan by topic.
- Clean typography throughout, with answers kept to short paragraphs.

Visual direction
Light and minimal: a calm, readable column, thin dividers between rows, and no decoration competing with the text. Hierarchy comes from type scale and spacing rather than colour.

Interaction & motion
Rows expand and collapse with an animated height and fade, driven by Framer Motion. Use lucide-react for the expand and collapse chevrons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 01 Luma

- Slug: `jiro-faq-01-luma`
- Page: https://landingpageprompts.com/prompts/jiro-faq-01-luma
- Effect: A dark-themed FAQ section with 2-column layout featuring a sticky header on the left with title, description, and CTA button, and an animated accordion on the right. Includes smoot
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,242; total with repair and cross-check: 24,242
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 01 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 01 Luma".

Purpose
Answer common questions in a scannable, dark-themed layout, pairing an introductory column with an expandable question list. Suited to product and marketing pages that need a focused FAQ.

Layout & content
- A two-column layout: a sticky left column holding the title, description, and a CTA button.
- A right column containing the accordion of questions and answers.
- Accordion rows that expand and collapse one at a time.
- Neutral placeholder question copy, since the description supplies none.

Visual direction
Dark, minimal, and modern, using the Inter Tight typeface. Keep the left column quiet and let the accordion carry the interaction weight.

Interaction & motion
Use Framer Motion with AnimatePresence for smooth expand and collapse, rotating chevron icons on open, and hover effects on each accordion item. lucide-react supplies the chevrons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 01 Moxo

- Slug: `jiro-faq-01-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-faq-01-moxo
- Effect: A SaaS FAQ section with accordion-style expandable questions, product-focused categories, and clean typography. Built for B2B software, productivity tools, and SaaS brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 21,939; total with repair and cross-check: 21,939
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 01 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 01 Moxo".

Purpose
This section answers the questions a B2B software buyer asks before committing. It should reduce friction for visitors evaluating productivity tools or a SaaS platform by making answers quick to find.

Layout & content
- A section heading introducing the questions.
- Accordion rows that expand to reveal each answer.
- Product-focused question categories grouping related items.
- Clean, legible answer typography.

Visual direction
Light and elegant, with generous spacing and restrained type. Nothing decorative should compete with the questions; the hierarchy between question and answer must be obvious at a glance.

Interaction & motion
Animate accordion expansion and collapse with framer-motion, and pair each row with a lucide-react indicator icon that reflects its open state.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 01 Orbit

- Slug: `jiro-faq-01-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-faq-01-orbit
- Effect: A coaching FAQ section with accordion-style expandable questions, student-focused categories, and clean typography. Designed for coaches and online education platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,176; total with repair and cross-check: 25,176
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 01 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 01 Orbit".

Purpose
Answer the questions students ask before joining a coaching program, grouped so people can find the relevant concern quickly. Designed for coaches and online education platforms.

Layout & content
- A section heading with one line explaining that common questions are answered here.
- A set of student-focused category groupings, each labelling a cluster of related questions.
- Accordion rows: a question as the trigger and an answer panel that expands beneath it.
- Neutral placeholder questions and answers, written in a calm explanatory tone.
- Close with a short line pointing to support for anything not covered.

Visual direction
Light and minimal with clean typography: comfortable line length, clear question weight, and quiet dividers between rows. No boxes or heavy borders.

Interaction & motion
Accordion panels expand and collapse with an animated height and fade via Framer Motion, and a small indicator rotates to show state. One row open at a time keeps the list calm.

Stack
- React functional component + Tailwind CSS.
- framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 01 Velara

- Slug: `jiro-faq-01-velara`
- Page: https://landingpageprompts.com/prompts/jiro-faq-01-velara
- Effect: An AI FAQ section with accordion-style expandable questions, capability-focused categories, and clean layout. Built for AI platforms, ML tools, and AI-powered SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 21,399; total with repair and cross-check: 21,399
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 01 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 01 Velara".

Purpose
Answer the questions that stop people from trying an AI product. The section should group questions by capability area so visitors can find the topic matching their concern instead of reading one flat list.

Layout & content
- A section heading with a short intro line.
- Question categories organised around product capabilities.
- Accordion rows beneath each category, each pairing one question with its answer.
- Neutral placeholder questions and answers, since no real copy is supplied.

Visual direction
Dark and minimal. Rely on spacing, a single accent for open rows and clean typography rather than borders or boxes. Answers should be comfortably readable at body size.

Interaction & motion
Use Framer Motion to animate accordion expansion and collapse with a smooth height and opacity transition, plus a rotating indicator on the open row.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 02 Kelo

- Slug: `jiro-faq-02-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-faq-02-kelo
- Effect: An AI FAQ section with two-column accordion grid, smooth toggle animations, and concise answer layout. Built for AI platforms, automation tools, and intelligent products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,458; total with repair and cross-check: 31,458
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 02 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 02 Kelo".

Purpose
Answer the questions buyers ask before committing to an AI product, in a scannable format that keeps every answer short. Built for AI platforms, automation tools and intelligent products.

Layout & content
- A section heading with a short introductory line.
- A two-column accordion grid: questions split across both columns on desktop and collapsing to one column on small screens.
- Each row expands in place to reveal a concise answer, with the first item optionally open.
- A category tab strip for filtering questions, since the tags include tabs.

Visual direction
Light and minimal: thin divider rules between rows, a clear question weight, and muted answer text. Keep decoration out of the way so the questions dominate.

Interaction & motion
Framer Motion for smooth toggle animations on expand and collapse, with a lucide-react chevron rotating to show state. Triggers should be real buttons carrying aria-expanded.

Stack
- React functional component + Tailwind CSS.
- framer-motion, lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 02 Luma

- Slug: `jiro-faq-02-luma`
- Page: https://landingpageprompts.com/prompts/jiro-faq-02-luma
- Effect: An AI FAQ section with accordion-style expandable rows, smooth animations, and minimal typography. Designed for AI media platforms, video tools, and creative AI.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 18,401; total with repair and cross-check: 18,401
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 02 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 02 Luma".

Purpose
Answer the questions that block sign-up for an AI media or video tool. The section must clear up how the product works and what buyers can expect, in a dark, minimal layout that keeps attention on the answers.

Layout & content
- A short section heading introducing the questions.
- Accordion rows, each with a question line and an expandable answer panel.
- A chevron or plus icon on each row signalling open and closed state.
- Collapse an open answer when another row is expanded, keeping the list scannable.

Visual direction
Dark and minimal, with quiet dividers between rows, restrained type and no decorative clutter. Contrast comes from spacing and the open state rather than from colour.

Interaction & motion
Animate each answer panel smoothly on expand and collapse, rotate the row icon, and keep the transition short enough that scanning stays fast.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the expand animation, lucide-react for the row icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 02 Moxo

- Slug: `jiro-faq-02-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-faq-02-moxo
- Effect: A SaaS FAQ section with two-column accordion layout, expandable rows, and product-focused question categories. Designed for B2B software, productivity tools, and SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 34,186; total with repair and cross-check: 34,186
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 02 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 02 Moxo".

Purpose
Answer product questions for a B2B SaaS audience without sending them to support. The section organises questions into clear categories so buyers of productivity tools and business software can self-serve.

Layout & content
- A short section heading with an optional supporting line.
- A two-column accordion layout, with question categories grouped so related topics sit together.
- Expandable rows that reveal an answer in place.
- A closing support or contact prompt at the end of the section.

Visual direction
Light, minimal and typographic. Quiet dividers, generous line height and a single accent for the expanded state.

Interaction & motion
Animated expand and collapse for each row, with a smooth height transition and a rotating indicator icon.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the accordion transitions.
- lucide-react for the expand and collapse icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 02 Orbit

- Slug: `jiro-faq-02-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-faq-02-orbit
- Effect: A coaching FAQ section with accordion expandable rows, smooth toggle animations, and minimal layout. Built for coaches, course creators, and education brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 29,206; total with repair and cross-check: 29,206
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 02 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 02 Orbit".

Purpose
Answer the questions prospective coaching clients ask before booking, in a compact section that keeps the page calm and scannable. Built for coaches, course creators and education brands.

Layout & content
- A short section heading with optional supporting line.
- Accordion rows, each with a question and a collapsible answer.
- A single expanded row at a time by default.
- A supporting photographic element that keeps the section from feeling like a wall of text.

Visual direction
Light and minimal: thin dividers between rows, quiet neutral surfaces, and a photographic accent that stays secondary to the questions.

Interaction & motion
Expand and collapse rows with smooth toggle animation, including height and opacity transitions on the answer panel.

Stack
- React functional component + Tailwind CSS.
- framer-motion for accordion height and fade transitions.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 02 Velara

- Slug: `jiro-faq-02-velara`
- Page: https://landingpageprompts.com/prompts/jiro-faq-02-velara
- Effect: An AI FAQ section with two-column accordion grid, expandable rows, and developer-focused questions. Designed for AI APIs, ML platforms, and intelligent products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,327; total with repair and cross-check: 30,327
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 02 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 02 Velara".

Purpose
Answer the questions developers ask before adopting an AI API or ML platform: how it works, what integrating it involves, and what to expect. The tone is technical and direct.

Layout & content
- A two-column accordion grid of question rows.
- Each row expands in place to reveal its answer; the question stays put and only the answer body changes.
- Questions grouped around developer concerns such as integration, capabilities and usage.
- A short section heading with one supporting line.

Visual direction
Dark, minimal and calm: restrained type, thin separators between rows, and a single subtle accent for the open state.

Interaction & motion
Animated accordion: rows expand and collapse with a height and opacity transition, and the open/closed indicator rotates. Either allow several rows open at once or close others, but keep the behaviour consistent.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the accordion transitions.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 03 Kelo

- Slug: `jiro-faq-03-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-faq-03-kelo
- Effect: An AI FAQ section with accordion expandable rows, automation-focused categories, and minimal typography. Designed for AI agents, automation platforms, and intelligent SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 20,899; total with repair and cross-check: 20,899
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 03 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 03 Kelo".

Purpose
Cover the practical questions around AI agents and automation for people evaluating automation platforms and intelligent SaaS. The section should let a visitor filter to the topic they care about, then read a short answer.

Layout & content
- A section intro with headline and one supporting line.
- A tab strip of automation-focused question categories.
- Accordion rows beneath the tabs, each expanding to reveal its answer.
- Minimal typography, with answers kept short and scannable.

Visual direction
Light and minimal, built around a single readable column. Tabs stay quiet and typographic, accordion rows are separated by fine rules, and no colour or ornament competes with the text.

Interaction & motion
Switching tabs swaps the visible question set, and rows animate open and closed with Framer Motion. lucide-react supplies the tab and chevron icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 03 Luma

- Slug: `jiro-faq-03-luma`
- Page: https://landingpageprompts.com/prompts/jiro-faq-03-luma
- Effect: An AI media FAQ section with two-column accordion grid, expandable rows, and creator-driven questions. Built for AI video, audio, and content generation tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 45,153; total with repair and cross-check: 45,153
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 03 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 03 Luma".

Purpose
Address the questions creators ask before adopting an AI media tool, in a compact two-column accordion. Built for AI video, audio, and content generation tools.

Layout & content
- A two-column accordion grid of questions and answers.
- Expandable rows that open in place to reveal the answer.
- Questions framed around creator concerns and product capability.
- An optional tab control to switch between question groupings.

Visual direction
Dark, minimal, and modern: restrained type on a dark base, with clear row separators so the grid stays legible at a glance.

Interaction & motion
Animate expand and collapse with Framer Motion, and rotate the chevron on open. Tabs, where used, switch with an animated transition and hover states on each row. lucide-react supplies the icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 03 Moxo

- Slug: `jiro-faq-03-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-faq-03-moxo
- Effect: A SaaS FAQ section with accordion-style expandable rows, smooth animations, and minimal typography. Built for B2B software, productivity platforms, and SaaS products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,215; total with repair and cross-check: 23,215
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 03 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 03 Moxo".

Purpose
This section handles pre-sales questions for a B2B software or SaaS product. It should give a prospective buyer short, findable answers without adding visual noise to the page.

Layout & content
- A concise section heading.
- Accordion rows that expand to reveal answers.
- A question set covering the product's main concerns.
- Minimal supporting typography throughout.

Visual direction
Light and minimal. Favour a single narrow column of rows, quiet separators and tight typographic hierarchy so the section feels calm rather than dense.

Interaction & motion
Animate each accordion row's expand and collapse smoothly with framer-motion, and use lucide-react for the row indicator icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons (install both via npm install framer-motion lucide-react).

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 03 Orbit

- Slug: `jiro-faq-03-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-faq-03-orbit
- Effect: A coaching FAQ section with two-column accordion layout, expandable rows, and program-focused questions. Suited for coaches, mentors, and personal development platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,466; total with repair and cross-check: 27,466
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 03 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 03 Orbit".

Purpose
Explain the practical details of a coaching or mentoring program, laid out so visitors can scan two columns of questions at once. Suited to coaches, mentors and personal development platforms.

Layout & content
- A section heading with a brief line introducing the program questions.
- A two-column layout that distributes the accordion rows evenly between the columns.
- Expandable rows in each column, each with a question trigger and an answer panel.
- Program-focused question copy covering format, commitment and expectations, written as neutral placeholders.
- A closing support line with an icon and a way to get in touch.

Visual direction
Dark and minimal: a deep background, restrained borders, high-contrast question text and muted answer text. Icons are line-drawn and used sparingly as row markers.

Interaction & motion
Rows expand and collapse with animated height and opacity through Framer Motion, and chevron or plus icons rotate between states. Stagger the initial reveal of the rows.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 03 Velara

- Slug: `jiro-faq-03-velara`
- Page: https://landingpageprompts.com/prompts/jiro-faq-03-velara
- Effect: An AI product FAQ section with accordion rows, developer-focused question categories, and clean typography. Designed for AI platforms, ML APIs, and intelligent SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,984; total with repair and cross-check: 27,984
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 03 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 03 Velara".

Purpose
Serve a more technical audience evaluating an AI product or API. Questions should be grouped around developer concerns such as integration, limits and behaviour, and answered plainly.

Layout & content
- A section heading with a brief supporting line.
- Developer-focused question categories grouping related topics.
- Accordion rows, each pairing one question with one answer.
- Neutral placeholder question and answer wording throughout.

Visual direction
Dark, minimal and typographically clean. Use restrained type and generous spacing, with one subtle accent marking the active row. Avoid decorative elements that would compete with dense technical copy.

Interaction & motion
Use Framer Motion for smooth accordion open and close transitions and a small indicator rotation on the active row.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 04 Kelo

- Slug: `jiro-faq-04-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-faq-04-kelo
- Effect: An AI FAQ section with two-column accordion layout, expandable rows, and capability-focused questions. Suited for AI platforms, automation tools, and AI-powered SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,877; total with repair and cross-check: 28,877
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 04 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 04 Kelo".

Purpose
Explain what an AI platform can do by answering capability-focused questions, arranged so a visitor can scan the whole set at once. Suited for AI platforms, automation tools and AI-powered SaaS.

Layout & content
- A section heading with a brief supporting line.
- A two-column accordion layout: question rows distributed across both columns on desktop, stacked on mobile.
- Expandable rows that reveal a concise answer when opened.
- Questions written around product capabilities; use neutral placeholder wording since the description supplies no real text.

Visual direction
Light, minimal and quiet: a consistent row rhythm, hairline separators, a restrained type scale, and no decorative imagery.

Interaction & motion
Framer Motion for the expand and collapse transition on each row, animating height and opacity smoothly with a rotating state indicator.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 04 Luma

- Slug: `jiro-faq-04-luma`
- Page: https://landingpageprompts.com/prompts/jiro-faq-04-luma
- Effect: An AI media FAQ section with accordion rows, creator-focused question categories, and clean layout. Suited for AI video tools, content platforms, and creative AI SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,573; total with repair and cross-check: 27,573
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 04 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 04 Luma".

Purpose
Give creators using an AI video or media platform the answers they need before signing up. This FAQ is organised around creator concerns, so the questions should read as though they came from people making and publishing content.

Layout & content
- A heading framing the section as answers for creators.
- Grouped question categories so related topics sit together.
- Accordion rows with a question line and an expandable answer panel.
- A clean, low-decoration layout keeping the rows evenly spaced.

Visual direction
Dark and minimal, with a calm type scale and clear separation between categories. Avoid heavy borders; let whitespace and subtle dividers organise the content.

Interaction & motion
Animate the answer panels open and closed with a smooth height transition, and rotate the row indicator so the state change is legible at a glance.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the expand animation, lucide-react for row icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 04 Moxo

- Slug: `jiro-faq-04-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-faq-04-moxo
- Effect: A SaaS FAQ section with two-column accordion grid, expandable rows, and capability-focused questions. Suited for productivity tools, business software, and B2B platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 33,158; total with repair and cross-check: 33,158
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 04 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 04 Moxo".

Purpose
Explain product capabilities to evaluating teams. The section is written for productivity tools, business software and B2B platforms where buyers arrive with capability questions before they talk to sales.

Layout & content
- A heading and short lead-in for the question block.
- A two-column accordion grid, so several questions stay visible at once.
- Expandable rows containing capability-focused answers.
- A final row or footer note pointing to further help.

Visual direction
Light, minimal and calm. Thin dividers between rows, restrained type scale and one accent colour used only for active state.

Interaction & motion
Animated open and close transitions on each accordion item, with staggered entrance for the grid columns.

Stack
- React functional component + Tailwind CSS.
- framer-motion for accordion and entrance animation.
- lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 04 Orbit

- Slug: `jiro-faq-04-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-faq-04-orbit
- Effect: A coaching FAQ section with accordion rows, student-focused question categories, and clean typography. Built for coaches, course creators, and online education brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,255; total with repair and cross-check: 27,255
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 04 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 04 Orbit".

Purpose
Give coaching and course audiences fast answers, grouped so that students can find the topic that applies to them. Built for coaches, course creators and online education brands.

Layout & content
- Section heading plus a short orienting line.
- Accordion rows with question and collapsible answer.
- Question grouping by student-focused categories such as enrolment, schedule and support.
- Small icon affordances on each row to signal expand and collapse.

Visual direction
Light and minimal with clean typography: generous line height, restrained dividers, and no decorative clutter competing with the copy.

Interaction & motion
Animate accordion open and close states smoothly, rotating the row indicator and fading the answer panel in.

Stack
- React functional component + Tailwind CSS.
- framer-motion for accordion animation.
- lucide-react for the row indicator icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 05 Kelo

- Slug: `jiro-faq-05-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-faq-05-kelo
- Effect: An AI FAQ section with accordion rows, automation-focused question categories, and clean typography. Built for AI agents, automation SaaS, and intelligent platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 22,654; total with repair and cross-check: 22,654
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 05 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 05 Kelo".

Purpose
Answer the practical questions buyers have about AI agents and automation: what the platform automates, how it is set up, and how it fits existing work. For AI agent products, automation SaaS and intelligent platforms.

Layout & content
- A stack of accordion rows, each a question with a collapsible answer.
- Question categories that reflect automation concerns rather than generic product questions.
- A clean typographic hierarchy: section heading, supporting line, then the rows.
- A closing line pointing to support or a demo.

Visual direction
Light, minimal and typographic: a neutral surface, comfortable line length, generous row spacing, and a quiet accent for the expanded state.

Interaction & motion
Animated accordion: smooth expand and collapse with a rotating indicator. Keep the motion short so scanning stays fast.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the expand and collapse transitions.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 05 Moxo

- Slug: `jiro-faq-05-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-faq-05-moxo
- Effect: A SaaS FAQ section with accordion rows, product-focused question categories, and refined typography. Built for B2B software, productivity tools, and enterprise SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 17,445; total with repair and cross-check: 17,445
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 05 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 05 Moxo".

Purpose
Handle the questions B2B software buyers ask before a trial or a purchase. It is written for enterprise SaaS, productivity tools and business software, so answers should sound precise and product-focused.

Layout & content
- A section header with a headline and one supporting line.
- Accordion rows, each expanding to reveal a single focused answer.
- Product-focused question categories that organise the rows by topic.
- Refined typography with comfortable line length for longer answers.

Visual direction
Light and minimal with a refined editorial feel: a narrow content column, subtle row separation, and restrained type contrast between question and answer. Colour stays almost absent.

Interaction & motion
Accordion rows expand and collapse with a short animated transition via Framer Motion, and lucide-react provides the indicator icons. Hover states on rows should be visible but understated.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 05 Velara

- Slug: `jiro-faq-05-velara`
- Page: https://landingpageprompts.com/prompts/jiro-faq-05-velara
- Effect: An AI FAQ section with two-column accordion layout, expandable rows, and capability-focused questions. Built for AI tools, automation platforms, and developer SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,156; total with repair and cross-check: 19,156
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 05 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 05 Velara".

Purpose
Explain what an AI platform can actually do, answering capability questions in a two-column accordion. Built for AI tools, automation platforms, and developer SaaS.

Layout & content
- A two-column accordion layout of capability-focused questions and answers.
- Expandable rows that reveal their answer inline.
- Questions written around platform capability and technical fit.
- Neutral placeholder question and answer copy.

Visual direction
Dark, minimal, and modern: a quiet dark surface, tight type scale, and subtle row dividers so the accordion reads as one tidy block.

Interaction & motion
Use Framer Motion for smooth expand and collapse transitions, with chevron rotation on open and hover feedback on each row. lucide-react supplies the icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ 2 Column Straight

- Slug: `jiro-faq-2-column-straight`
- Page: https://landingpageprompts.com/prompts/jiro-faq-2-column-straight
- Effect: A clean, light-themed FAQ section with 2-column layout featuring a sticky header on the left and a minimalist accordion on the right. Includes pink plus icon that rotates to X on o
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,181; total with repair and cross-check: 23,181
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ 2 Column Straight". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ 2 Column Straight".

Purpose
This is a clean, light FAQ block for a product or service page. It should let a visitor read the questions on one side while keeping the section's framing visible on the other, so orientation is never lost while scrolling.

Layout & content
- A two-column layout: a sticky header on the left, the question list on the right.
- A minimalist accordion of questions and answers.
- A plus icon on each row that rotates into an X when opened.
- Bottom border separators between rows.

Visual direction
Light, minimal and straight-edged. Use the Manrope font, a restrained neutral palette, and a pink accent only for the plus icon so the toggle state stays unmistakable.

Interaction & motion
Use Framer Motion for staggered scroll animations and for the icon rotation; allow only one accordion item open at a time.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ Middle Image

- Slug: `jiro-faq-middle-image`
- Page: https://landingpageprompts.com/prompts/jiro-faq-middle-image
- Effect: A dark-themed centered FAQ section with a glowing background image at the bottom, glassmorphic accordion cards with backdrop blur, Sansation bold heading, Inter Tight body text, ch
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 37,332; total with repair and cross-check: 37,332
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ Middle Image". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ Middle Image".

Purpose
Resolve objections in a visually striking, dark FAQ block whose atmosphere matches a premium product page, while keeping the answers themselves easy to read.

Layout & content
- A centered heading in Sansation bold with a short supporting line in Inter Tight.
- A centered stack of accordion cards holding question triggers and answer panels.
- A glowing background image anchored at the bottom of the section, sitting behind the cards.
- Neutral placeholder questions and answers, written to sound helpful rather than promotional.
- Single-open behaviour: opening one card closes the others.

Visual direction
Dark with glassmorphism: translucent cards with backdrop blur and soft borders float over the glowing bottom image. The glow stays diffuse so text contrast is never compromised.

Interaction & motion
Chevron icons rotate on toggle, panels animate open and closed, and cards enter with staggered scroll-triggered reveals using Framer Motion.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ Middle Simple

- Slug: `jiro-faq-middle-simple`
- Page: https://landingpageprompts.com/prompts/jiro-faq-middle-simple
- Effect: A clean, light-themed centered FAQ section with numbered questions ({01}, {02}), gray background cards, Plus icon that rotates to X on open, Inter and Manrope fonts, single-open ac
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,261; total with repair and cross-check: 28,261
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ Middle Simple". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ Middle Simple".

Purpose
Answer common questions in a short, low-friction block that sits mid-page. The centred layout should feel light and uncluttered so the section reads as reassurance rather than another wall of content.

Layout & content
- A centred section heading with a short supporting line.
- Accordion items on grey background cards, each with a numbered label in the {01}, {02} style.
- A Plus icon on every row that rotates into an X when the row opens.
- Single-open behaviour: opening one row closes the others.

Visual direction
Light, minimal and soft. Grey cards on a light page, restrained type, and a subtle shadow that appears on the active card to lift it slightly. Pair Inter for headings with Manrope for supporting text.

Interaction & motion
Use Framer Motion for a staggered scroll entrance with a scale effect, and animate the icon rotation plus the card expansion when a row opens.

Stack
- React functional component + Tailwind CSS.
- framer-motion and lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ Vendo

- Slug: `jiro-faq-vendo`
- Page: https://landingpageprompts.com/prompts/jiro-faq-vendo
- Effect: A standard FAQ section with accordion-style expandable questions, smooth toggle animation, and concise answer layout. Built for SaaS products and B2B platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,443; total with repair and cross-check: 30,443
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ Vendo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ Vendo".

Purpose
Give SaaS and B2B visitors fast answers to common pre-sales questions through a familiar accordion pattern that never gets in the way of the content.

Layout & content
- A section heading and a one-line introduction.
- Accordion-style rows where each question expands in place to show its answer.
- A tab strip grouping questions by topic, since the tags include tabs.
- Concise answers of two or three short sentences each, written as neutral placeholder copy.

Visual direction
Light and minimal: clear question typography, muted answer text, generous vertical spacing, and subtle separators between rows.

Interaction & motion
Framer Motion drives a smooth toggle animation on open and close. Use a lucide-react chevron that rotates to indicate state, and keep every trigger a real button with aria-expanded.

Stack
- React functional component + Tailwind CSS.
- framer-motion, lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQ with Image

- Slug: `jiro-faq-with-image`
- Page: https://landingpageprompts.com/prompts/jiro-faq-with-image
- Effect: A stunning FAQ section with a fixed background image, glassmorphic accordion cards with backdrop blur effect, Playfair Display heading font, smooth expand/collapse animations with 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,236; total with repair and cross-check: 24,236
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQ with Image". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQ with Image".

Purpose
Answer common questions over a full-bleed photographic backdrop, giving the section a premium, editorial feel. It is a general-purpose FAQ block for any site that wants its answers to feel considered rather than utilitarian.

Layout & content
- A fixed background image covering the section, with content layered on top.
- Glassmorphic accordion cards with backdrop blur holding each question and answer.
- A heading set in Playfair Display, with elegant serif typography throughout.
- Single-open accordion behaviour so only one card is expanded at a time.

Visual direction
Light and elegant, with frosted glass cards, soft translucency and photography visible behind the content. Typography should lean on the serif heading to carry the premium tone.

Interaction & motion
Use AnimatePresence for smooth expand and collapse of each answer, and animate the cards into view as the section scrolls in.

Stack
- React functional component + Tailwind CSS.
- framer-motion for expand, collapse and reveals, lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQs 01 Pixa

- Slug: `jiro-faqs-01-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-faqs-01-pixa
- Effect: Clean single-column FAQ accordion with animated expand/collapse, pill badge header, Inter Tight typography, and email support footer. Pixa design series.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 22,561; total with repair and cross-check: 22,561
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQs 01 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQs 01 Pixa".

Purpose
Give visitors a clean, low-friction way to get answers and a fallback route to a human. It suits a product marketing page that ends its questions with a support contact.

Layout & content
- A pill badge header above the section title.
- A single-column accordion of questions with expand and collapse behaviour.
- An email support footer below the list, offering a direct contact route.
- Consistent spacing between rows so the list scans easily.

Visual direction
Light and minimal, set in Inter Tight typography. Pill badge, thin row dividers and restrained spacing keep the focus on the question text.

Interaction & motion
Animated expand and collapse on each row, with a smooth height and opacity transition and a rotating chevron.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the accordion animation.
- lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQs 01 Solra

- Slug: `jiro-faqs-01-solra`
- Page: https://landingpageprompts.com/prompts/jiro-faqs-01-solra
- Effect: An agency FAQ section with accordion-style expandable rows, editorial typography, and refined neutral palette. Built for design studios, creative agencies, and brand consultancies.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 20,190; total with repair and cross-check: 20,190
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQs 01 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQs 01 Solra".

Purpose
Handle agency objections and scope questions in a section that reads as considered and editorial rather than transactional. Built for design studios, creative agencies and brand consultancies.

Layout & content
- Editorial heading that introduces the questions.
- Accordion-style expandable rows, one question per row.
- A collapsible answer panel for each row.
- A closing line inviting the visitor to get in touch.

Visual direction
Light, minimal and editorial: a refined neutral palette, strong typographic contrast between question and answer, and restrained rules instead of card chrome.

Interaction & motion
Smoothly animate row expansion and collapse, with the indicator and answer content transitioning together.

Stack
- React functional component + Tailwind CSS.
- framer-motion for expand and collapse transitions.
- lucide-react for the row indicator icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## FAQs - Luxterra

- Slug: `jiro-faqs-luxterra`
- Page: https://landingpageprompts.com/prompts/jiro-faqs-luxterra
- Effect: Find clear answers about property listings, pricing, viewings, buying processes, financing, and real estate services to make your property search simpler and more informed.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,373; total with repair and cross-check: 28,373
- Verification: 12/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Faq" block called "FAQs - Luxterra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Faq section for a modern website: "FAQs - Luxterra".

Purpose
Give property buyers and searchers clear answers about listings, pricing, viewings, the buying process, financing and the real estate services on offer, so a property search feels simpler and better informed.

Layout & content
- An accordion list of questions covering listings, pricing, viewings, the buying process, financing and services.
- Each row expands to reveal its answer in place.
- An introductory heading that frames the section as guidance for buyers.
- A closing prompt inviting a question or a viewing request.

Visual direction
Light, elegant and minimal: refined typography, calm spacing, soft dividers, and a restrained accent that feels premium rather than salesy.

Interaction & motion
Animated accordion with smooth height transitions and a subtle indicator rotation, plus an optional gentle fade-in as the section enters the viewport.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the transitions and lucide-react for the row indicators.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Feature 04 Solra

- Slug: `jiro-feature-04-solra`
- Page: https://landingpageprompts.com/prompts/jiro-feature-04-solra
- Effect: An agency feature section with case study preview, capability cards, and editorial narrative layout. Suited for design agencies, creative studios, and branding firms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,652; total with repair and cross-check: 25,652
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Feature 04 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Feature 04 Solra".

Purpose
Show how an agency works through evidence rather than claims, for design agencies, creative studios and branding firms. The section should read as an editorial narrative about capability, with a real piece of work as its proof.

Layout & content
- An editorial narrative block: headline and a short paragraph framing the approach.
- A case study preview with an image area, a short summary and a link through to the full story.
- Capability cards listing what the studio does, each with a concise label and description.
- Alternating rhythm so the case study and cards do not stack into one flat column.

Visual direction
Light, minimal and elegant: generous whitespace, refined type pairing, and image-led blocks that carry the visual weight. Cards stay flat so the case study stands out.

Interaction & motion
Interactive hover states on the case study preview and capability cards, with a short Framer Motion lift or fade on reveal. lucide-react supplies the small capability icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Feature Work Benjamen

- Slug: `jiro-feature-work-benjamen`
- Page: https://landingpageprompts.com/prompts/jiro-feature-work-benjamen
- Effect: A featured work section laid out as a two-by-two project grid with alternating card heights, rounded covers that tilt and zoom on hover, and uppercase titles rising letter by lette
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 29,727; total with repair and cross-check: 29,727
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Feature Work Benjamen". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Feature Work Benjamen".

Purpose
Showcase selected work as a curated gallery, letting the imagery carry the section while titles and years provide quiet context. Perfect for brand strategists, social media freelancers, and creative studios.

Layout & content
- A two-by-two project grid of four project cards.
- Alternating card heights so the grid does not read as a uniform block.
- Each card pairs a rounded cover image with an uppercase title and a muted year beside it.
- Use neutral placeholder project titles and years.

Visual direction
Light and photography-led: covers are the focus, titles set in uppercase, and years rendered in a muted tone so they recede behind the imagery.

Interaction & motion
On hover, the rounded covers tilt and zoom while the uppercase titles rise letter by letter. Keep the transitions smooth and the hover state clearly interactive.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 01 Halo

- Slug: `jiro-features-01-halo`
- Page: https://landingpageprompts.com/prompts/jiro-features-01-halo
- Effect: A health features section with wellness icon cards, benefit-driven descriptions, and trust-building layout. Designed for nutrition apps, fitness platforms, and wellness brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,577; total with repair and cross-check: 23,577
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 01 Halo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 01 Halo".

Purpose
This section lays out a health and wellness product's capabilities for people choosing a nutrition or fitness app. It should pair each feature with a benefit so the value is understood without the reader having to interpret the product.

Layout & content
- A section heading framing the wellness benefits.
- Icon cards, one per feature.
- Benefit-driven descriptions beneath each icon.
- A trust-building arrangement of the cards as a whole.

Visual direction
Light and minimal, with a calm, health-appropriate feel. Keep the icon treatment consistent across cards and let whitespace do the work instead of ornament.

Interaction & motion
Use framer-motion for staggered card entrances and a light hover response, and render the icons with lucide-react. If an accordion pattern is used for longer descriptions, animate its open and closed states.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 01 Kelo

- Slug: `jiro-features-01-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-features-01-kelo
- Effect: A flagship AI features section with large product preview, capability badges, and conversion CTAs. Designed for AI platforms, automation tools, and intelligent software launches.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 39,099; total with repair and cross-check: 39,099
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 01 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 01 Kelo".

Purpose
Carry the flagship feature story for an AI platform, pairing a large product preview with the capabilities that matter and a route to conversion. Designed for AI platforms, automation tools and intelligent software launches.

Layout & content
- A section header with an eyebrow, a headline naming the core capability, and one supporting line.
- A large product preview occupying the dominant layout position, shown as an interface rather than stock imagery.
- Capability badges highlighting individual strengths, each with a short label and one-line detail.
- A short paragraph explaining what the preview demonstrates.
- Conversion call to action buttons to start or request a demo.

Visual direction
Light, modern and minimal: a strict grid, confident type, and the product preview as focal point. Capability badges stay secondary to the preview and headline.

Interaction & motion
The preview and badges reveal on scroll with a light stagger, and badges respond on hover via Framer Motion. Icons come from lucide-react.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 01 Learn.AI

- Slug: `jiro-features-01-learnai`
- Page: https://landingpageprompts.com/prompts/jiro-features-01-learnai
- Effect: An AI call feedback features section with a wide app screenshot that glides up on scroll, a bordered row of ten meeting and chat logos including Zoom, Slack, Teams, and WhatsApp, a
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 36,718; total with repair and cross-check: 36,718
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 01 Learn.AI". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 01 Learn.AI".

Purpose
Show how an AI call-feedback product turns recorded conversations into useful coaching. The section should pair a real product view with the platforms the tool already sits alongside, so buyers can picture it inside their existing workflow.

Layout & content
- A wide app screenshot as the centrepiece, presenting call feedback inside the product.
- A bordered row of ten meeting and chat logos, including Zoom, Slack, Teams and WhatsApp.
- A pulsing status dot signalling that the product is live or connected.
- Benefit-oriented feature copy placed around the screenshot.

Visual direction
Light and colourful, with the screenshot carrying the detail and the logo row kept quiet inside a single bordered strip. The status dot is the one saturated accent.

Interaction & motion
Use Framer Motion so the screenshot glides upward as the section scrolls into view, and pulse the status dot continuously. lucide-react supplies the supporting icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion and lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts beyond those named in the description.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 01 Luma

- Slug: `jiro-features-01-luma`
- Page: https://landingpageprompts.com/prompts/jiro-features-01-luma
- Effect: A flagship AI features section with large product mockup, capability badges, and conversion CTAs. Built for AI media platforms, video tools, and generative SaaS launches.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 37,644; total with repair and cross-check: 37,644
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 01 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 01 Luma".

Purpose
Act as the flagship capability section for an AI media platform: show the product itself, name what it can do, and move the visitor toward signing up.

Layout & content
- A section heading with a short supporting line.
- A large product mockup as the visual anchor, presented with 3D perspective.
- A set of capability badges naming individual features.
- Conversion calls to action placed with the mockup.

Visual direction
Light, minimal and modern: plenty of breathing room, a single accent colour, and the mockup framed with a soft shadow so it reads as a real interface. Capability badges use small lucide-react icons.

Interaction & motion
Framer Motion for the entrance of the mockup and badges, a subtle 3D tilt or parallax on the mockup, and hover feedback on the CTAs and badges.

Stack
- React functional component + Tailwind CSS.
- framer-motion, lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 01 Moxo

- Slug: `jiro-features-01-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-features-01-moxo
- Effect: A flagship features section with large product preview, capability badges, and conversion-focused CTAs. Built for SaaS launches, product marketing, and B2B software platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 22,847; total with repair and cross-check: 22,847
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 01 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 01 Moxo".

Purpose
Act as the flagship capability section for a B2B software product. It has to show the product in use and make the value obvious fast, so a visitor evaluating a SaaS launch understands the core capabilities and the proof behind them.

Layout & content
- A large product preview as the centrepiece, using photography or a UI capture.
- Capability badges labelling the main feature areas.
- A stats strip supporting the claims with figures.
- Conversion-focused call-to-action buttons closing the section.

Visual direction
Light and elegant, with a generous product preview, restrained accent colour and a clear typographic hierarchy so the badges and stats read as supporting detail rather than competing headlines.

Interaction & motion
Animate the preview and the capability badges in on scroll, and let the stats count up when they enter the viewport.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the reveals and the counters.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 01 Orbit

- Slug: `jiro-features-01-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-features-01-orbit
- Effect: A flagship coaching features section with large preview, methodology badges, and conversion-focused CTAs. Designed for coaches, course creators, and personal brand sites.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,964; total with repair and cross-check: 27,964
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 01 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 01 Orbit".

Purpose
Carry the core selling argument for a coaching or course offer. It is the flagship features block for coaches, course creators and personal brand sites, so it should explain the method and then push toward a conversion action.

Layout & content
- A section heading with a short lead-in describing the offer.
- A large preview area, such as a programme or product visual, given the most space.
- Methodology badges that label the key pillars of the approach.
- Conversion-focused CTA buttons placed after the preview and repeated near the end.

Visual direction
Light, modern and minimal, with photography as the main visual asset. Large type and uncluttered surfaces keep the emphasis on the preview and the badges.

Interaction & motion
Animated reveals on scroll for the preview, badges and CTAs, plus a hover treatment on the buttons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for scroll reveals and hover motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 01 Velara

- Slug: `jiro-features-01-velara`
- Page: https://landingpageprompts.com/prompts/jiro-features-01-velara
- Effect: An AI features section with product screenshot, capability badges, and feature highlight cards. Designed for AI platforms, ML products, and intelligent software marketing pages.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 21,529; total with repair and cross-check: 21,529
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 01 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 01 Velara".

Purpose
Explain what an AI product does and why each capability matters, using a product screenshot as the anchor and badges to summarise the offer. Designed for AI platforms, ML products and intelligent software marketing pages.

Layout & content
- Section heading with a short positioning line.
- A product screenshot presented as the primary visual.
- Capability badges summarising key attributes at a glance.
- Feature highlight cards, each with an icon, title and short benefit line.

Visual direction
Dark and futuristic with minimal ornament: deep surfaces, one bright accent, crisp type, and glow used sparingly around the screenshot and badges.

Interaction & motion
Reveal the screenshot and highlight cards with staggered entrance animation, and add subtle hover response on each card.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance and hover animation.
- lucide-react for badge and card icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 01 Vendo

- Slug: `jiro-features-01-vendo`
- Page: https://landingpageprompts.com/prompts/jiro-features-01-vendo
- Effect: A hero-style features section with large product imagery, feature pill badges, and benefit-driven copy. Designed for product launches and flagship SaaS landing pages.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 54,383; total with repair and cross-check: 54,383
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 01 Vendo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 01 Vendo".

Purpose
Open the features story at hero scale: one large piece of product imagery paired with short, benefit-driven copy and pill badges that name the capabilities. Aimed at product launches and flagship SaaS landing pages.

Layout & content
- A large product or dashboard image as the visual anchor.
- Feature pill badges labelling individual capabilities.
- Benefit-driven copy: a heading plus a short paragraph per capability.
- A supporting CTA or link through to the full feature list.

Visual direction
Light, minimal and modern: the product imagery carries the detail while the surrounding layout stays airy, with a restrained type scale and quiet neutral surfaces.

Interaction & motion
Animated: imagery and badges reveal on scroll with short fades and lifts, and the badges respond subtly on hover.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the scroll reveals.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 02 Kelo

- Slug: `jiro-features-02-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-features-02-kelo
- Effect: An AI features section with detailed capability cards, workflow visuals, and benefit-driven copy. Built for AI automation, intelligent agents, and AI-powered SaaS products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,943; total with repair and cross-check: 26,943
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 02 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 02 Kelo".

Purpose
Explain what an AI product actually does, capability by capability, for buyers of AI automation, intelligent agents and AI-powered SaaS. Copy should be benefit-driven, pairing each capability with the outcome it produces.

Layout & content
- A section intro: headline and one supporting line.
- A grid of detailed capability cards, each with an icon, a title and a benefit-led description.
- Workflow visuals inside or beside the cards, showing steps rather than abstract art.
- A small stats element presenting supporting metric figures with placeholder values.

Visual direction
Light and minimal on a strict grid: even card sizes, thin borders, restrained type, and a clear gap between headline and body copy. Icons are the only accent; the grid carries the hierarchy.

Interaction & motion
Cards fade and rise into view on scroll with a short stagger, and any counters animate up to their placeholder value. Use Framer Motion for the reveals and lucide-react for the icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 02 Luma

- Slug: `jiro-features-02-luma`
- Page: https://landingpageprompts.com/prompts/jiro-features-02-luma
- Effect: An AI feature showcase with product preview, workflow visuals, and creator-driven copy. Designed for AI media tools, content platforms, and generative AI products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 34,571; total with repair and cross-check: 34,571
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 02 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 02 Luma".

Purpose
Introduce an AI media product's core capabilities by pairing a product preview and workflow visuals with copy written for creators. Designed for AI media tools, content platforms, and generative AI products.

Layout & content
- A feature showcase built around a product preview visual.
- Workflow visuals that illustrate how the product is used step by step.
- Supporting copy in a creator-focused voice.
- Neutral placeholder feature names and descriptions.

Visual direction
Dark, modern, and futuristic: deep surfaces with the preview glowing as the focal element, and workflow visuals treated as clean, legible panels.

Interaction & motion
Animate the section with Framer Motion: staged entrance for the preview and workflow visuals, plus hover or scroll-linked reveal on each feature block. lucide-react supplies supporting icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 02 NexVPN

- Slug: `jiro-features-02-nexvpn`
- Page: https://landingpageprompts.com/prompts/jiro-features-02-nexvpn
- Effect: A data protection features section that opens with an autoplaying video orb tucked behind an oversized heading, then two image-topped cards on fast connections and secure technolog
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,530; total with repair and cross-check: 23,530
- Verification: 18/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 02 NexVPN". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 02 NexVPN".

Purpose
This section explains a data protection product to people shopping for a VPN, encryption tool or cybersecurity service. It should open with an immersive brand moment, then prove the product's value through concrete capability cards.

Layout & content
- An oversized heading as the opening statement.
- An autoplaying video orb tucked behind that heading.
- Two image-topped cards, one on fast connections and one on secure technology.
- Supporting copy on each card describing the capability.

Visual direction
Dark and grid-based, with the video orb as the single source of ambient light. Keep card imagery consistent and reserve a soft orange halo for hover states so it reads as a reward, not a default.

Interaction & motion
Autoplay the video orb on loop, animate the opening heading and cards with framer-motion, and apply the soft halo glow on card hover.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 02 Orbit

- Slug: `jiro-features-02-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-features-02-orbit
- Effect: A program features section with split-image layout, capability highlights, and outcome-focused narrative. Built for online courses, coaching programs, and educator platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 33,590; total with repair and cross-check: 33,590
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 02 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 02 Orbit".

Purpose
Describe what a program actually delivers, pairing imagery with a clear account of capabilities and the outcomes they produce. Built for online courses, coaching programs and educator platforms.

Layout & content
- A section header with a headline and one line framing the program.
- A split-image layout: photography on one side, narrative content on the other.
- Capability highlights listed as short titled items with a line of explanation each.
- An outcome-focused narrative paragraph connecting the capabilities to what participants gain.
- A single call to action at the end of the narrative.
- Alternate or rebalance the split on narrower viewports so text stays readable.

Visual direction
Light and elegant with photography doing the emotional work. Type stays restrained, spacing generous, and the split is balanced rather than crowded.

Interaction & motion
The image and narrative enter from opposite sides with a soft fade and rise on scroll, driven by Framer Motion. Highlight items stagger in after the narrative.

Stack
- React functional component + Tailwind CSS.
- framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 02 Velara

- Slug: `jiro-features-02-velara`
- Page: https://landingpageprompts.com/prompts/jiro-features-02-velara
- Effect: A two-column AI features section with detailed capability descriptions and supporting visuals. Built for AI SaaS, ML tools, and developer-focused AI products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,462; total with repair and cross-check: 26,462
- Verification: 17/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 02 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 02 Velara".

Purpose
Explain an AI product's capabilities in enough depth for a technical buyer. The section should move past slogans and describe what each capability actually does, with supporting visuals that make the claims concrete.

Layout & content
- A two-column layout alternating between capability copy and its supporting visual.
- Detailed descriptions for each capability rather than one-line labels.
- Supporting visuals for the capabilities described.
- Neutral placeholder copy for headings, descriptions and labels.

Visual direction
Dark, minimal and modern. Keep the type clean and the surfaces flat, letting the supporting visuals provide contrast, and avoid clutter around the copy blocks.

Interaction & motion
Use Framer Motion for restrained scroll-triggered reveals and gentle hover feedback on the capability blocks. lucide-react can supply small capability icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion and lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 02 Vendo

- Slug: `jiro-features-02-vendo`
- Page: https://landingpageprompts.com/prompts/jiro-features-02-vendo
- Effect: A two-column features section with detailed feature descriptions, supporting imagery, and scroll-triggered reveals. Built for B2B SaaS, enterprise tools, and feature-heavy products
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,545; total with repair and cross-check: 31,545
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 02 Vendo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 02 Vendo".

Purpose
Walk a considered B2B buyer through the product capabilities in depth, pairing each explanation with imagery so feature-heavy products stay readable. Built for B2B SaaS, enterprise tools and feature-heavy products.

Layout & content
- A section heading and an introductory line.
- A two-column layout with feature copy on one side and supporting imagery on the other, alternating sides down the section.
- Detailed feature descriptions: a short title plus a paragraph each, written as neutral placeholder copy.
- A dashboard preview image among the supporting visuals.

Visual direction
Light and minimal with photography: clean type, restrained borders, and images treated consistently so the alternating rhythm feels deliberate.

Interaction & motion
Framer Motion scroll-triggered reveals for each row, fading and translating content in as it enters the viewport.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 03 Kelo

- Slug: `jiro-features-03-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-features-03-kelo
- Effect: An AI features section with capability cards, integration logos, and benefit-driven copy. Built for AI platforms, automation tools, and intelligent SaaS products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,984; total with repair and cross-check: 26,984
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 03 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 03 Kelo".

Purpose
Explain what an AI platform or automation tool actually does, in benefit-driven language, for buyers comparing intelligent SaaS products. The section should move from capability to outcome rather than listing technical detail.

Layout & content
- A grid of capability cards, each with an icon, a short title and a benefit-led description.
- A dashboard preview showing the product interface in context.
- An integration logos row indicating the tools the product connects with.
- A section heading and supporting line framing the benefits.

Visual direction
Dark, minimal and modern, with the dashboard preview as the brightest element on the page. Keep card styling restrained so the interface visual stays the focus.

Interaction & motion
Animate the cards in with a stagger on scroll, and give each card a subtle hover state that lifts it away from the dark background.

Stack
- React functional component + Tailwind CSS.
- framer-motion for stagger and hover motion, lucide-react for card icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 03 Luma

- Slug: `jiro-features-03-luma`
- Page: https://landingpageprompts.com/prompts/jiro-features-03-luma
- Effect: An AI features section with split-image layout, capability highlights, and detailed benefit narrative. Built for AI creative platforms, generative tools, and media SaaS products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 43,108; total with repair and cross-check: 43,108
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 03 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 03 Luma".

Purpose
Explain what an AI creative platform can do, for buyers of generative tools and media SaaS. The block pairs visual proof with a benefit narrative so capability claims land with evidence.

Layout & content
- A section heading with a short capability summary.
- A split-image layout: a product or output visual on one side, capability highlights on the other.
- A short list of highlighted capabilities, each with a label and a supporting line.
- A detailed benefit narrative beneath or beside the split, tying features to outcomes.

Visual direction
Dark, futuristic and gridded. Structured grid lines or alignment guides, high-contrast imagery and restrained accent glow.

Interaction & motion
Interactive states on the capability highlights and animated reveals as the split layout enters the viewport.

Stack
- React functional component + Tailwind CSS.
- framer-motion for reveals and interactive states.
- lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 03 Moxo

- Slug: `jiro-features-03-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-features-03-moxo
- Effect: A SaaS features section with detailed capability breakdown, supporting imagery, and benefit-focused layout. Built for B2B software, productivity platforms, and developer tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,568; total with repair and cross-check: 25,568
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 03 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 03 Moxo".

Purpose
Walk a B2B buyer through the product's capabilities in detail, pairing each with imagery and a stated benefit. Built for B2B software, productivity platforms and developer tools.

Layout & content
- Section heading framing the product's overall value.
- A detailed capability breakdown, organised into clearly separated items.
- Supporting imagery alongside the capability copy.
- Benefit-focused captions that translate each capability into an outcome.

Visual direction
Light, minimal and elegant: quiet neutral surfaces, comfortable reading measure, and photography that feels composed rather than stocky.

Interaction & motion
Add interactive hover states on capability items and reveal them progressively as the section enters the viewport.

Stack
- React functional component + Tailwind CSS.
- framer-motion for scroll reveal and hover interaction.
- lucide-react for capability icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 03 Orbit

- Slug: `jiro-features-03-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-features-03-orbit
- Effect: A coaching features grid with icon-led cards, methodology highlights, and benefit-driven descriptions. Suited for coaches, consultants, and personal development brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 21,367; total with repair and cross-check: 21,367
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 03 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 03 Orbit".

Purpose
Explain a coaching methodology through its component parts, so a prospective client understands what the programme covers and what each element is for. For coaches, consultants and personal development brands.

Layout & content
- A responsive grid of icon-led feature cards.
- Each card: a small icon, a short title and a benefit-driven description.
- Methodology highlights that group the cards around how the coaching works.
- A section heading that frames the grid.

Visual direction
Light and minimal: even card spacing, thin borders or soft surfaces, a single accent used only on the icons, and typography that stays readable at card width.

Interaction & motion
Animated: cards enter with a staggered fade and lift as the grid scrolls into view, with a slight hover response on each card.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the staggered reveals.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 03 Velara

- Slug: `jiro-features-03-velara`
- Page: https://landingpageprompts.com/prompts/jiro-features-03-velara
- Effect: An AI features section with screenshot preview, automation badges, and benefit-driven copy. Suited for AI assistants, automation platforms, and intelligent productivity tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,017; total with repair and cross-check: 28,017
- Verification: 19/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 03 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 03 Velara".

Purpose
Demonstrate an AI assistant or automation platform in use, for teams comparing AI assistants, automation platforms and intelligent productivity tools. Screenshot evidence and badges should make the capability concrete instead of theoretical.

Layout & content
- A section intro with headline and supporting line, written benefit-first.
- A screenshot preview of the product interface as the main visual anchor.
- Automation badges marking the capabilities the product performs, placed on or beside the preview.
- Supporting copy blocks that describe the benefit each capability delivers.

Visual direction
Dark and modern with video as a moving backdrop behind the preview. Screenshots sit in clean frames with soft elevation, badges read as compact labels, and type stays restrained against the dark surface.

Interaction & motion
The video backdrop plays quietly behind the section while the screenshot and badges animate in with Framer Motion. Interactive hover states should make the preview feel like a live product surface.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 04 Luma

- Slug: `jiro-features-04-luma`
- Page: https://landingpageprompts.com/prompts/jiro-features-04-luma
- Effect: An AI features grid with capability cards, generation badges, and creator-focused messaging. Suited for AI video editors, voice platforms, and generative media tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 34,859; total with repair and cross-check: 34,859
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 04 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 04 Luma".

Purpose
Lay out an AI product's capabilities as a scannable grid of cards, using badges to mark generation features. Suited for AI video editors, voice platforms, and generative media tools.

Layout & content
- A grid of capability cards, each covering one product feature.
- Generation badges attached to relevant cards.
- Creator-focused messaging in the card copy and section intro.
- An accordion treatment for expanding feature detail where space is tight.
- Neutral placeholder feature names and descriptions.

Visual direction
Dark, modern, and futuristic: deep base surfaces with cards separated by subtle borders, and badges styled as compact, high-contrast chips.

Interaction & motion
Use Framer Motion for staggered card entrances, hover lift on each card, and smooth accordion expansion where a card opens. lucide-react supplies the icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 04 Orbit

- Slug: `jiro-features-04-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-features-04-orbit
- Effect: A program features section with detailed curriculum cards, learning outcome highlights, and enrollment CTAs. Built for online courses, training programs, and learning platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,884; total with repair and cross-check: 26,884
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 04 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 04 Orbit".

Purpose
This section presents a training program's curriculum to prospective learners. It should make the shape of the program clear, show what a learner walks away with, and give a direct route to enrolling.

Layout & content
- A section heading introducing the program.
- Detailed curriculum cards covering the modules.
- Learning outcome highlights stating what participants gain.
- An enrollment call to action.

Visual direction
Dark and minimal, with generous spacing and confident type. Let the curriculum cards carry the structure and keep decorative elements out of the way of the outcome highlights.

Interaction & motion
Use framer-motion for card reveals and hover states, and support an accordion pattern so longer curriculum detail can expand without lengthening the section.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 04 Velara

- Slug: `jiro-features-04-velara`
- Page: https://landingpageprompts.com/prompts/jiro-features-04-velara
- Effect: An AI features grid with capability cards, animated icons, and developer-focused descriptions. Built for AI APIs, ML platforms, and AI-powered developer tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 37,019; total with repair and cross-check: 37,019
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 04 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 04 Velara".

Purpose
Explain an AI API and machine learning platform to developers, covering capabilities in enough technical detail to be credible while staying scannable. Built for AI APIs, ML platforms and AI-powered developer tools.

Layout & content
- A section header with a headline and a short line setting the developer context.
- A grid of capability cards, each with an animated icon, a capability name and a developer-focused description.
- Short technical details inside cards, such as the kind of input, output or workflow the capability serves, kept as neutral placeholders.
- A closing row linking to documentation or a getting-started action.
- Keep card copy parallel so the grid scans evenly.

Visual direction
Dark, futuristic and grid-driven: a structured card matrix, cool restrained accents, and crisp edges. Animated icons carry the visual interest rather than heavy imagery.

Interaction & motion
Cards stagger into view on scroll and their icons animate on hover and on entry with Framer Motion, suggesting activity without becoming distracting.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 05 Kelo

- Slug: `jiro-features-05-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-features-05-kelo
- Effect: An AI feature showcase with workflow preview, automation badges, and detailed capability breakdown. Designed for AI agents, workflow automation, and intelligent productivity platfo
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,750; total with repair and cross-check: 31,750
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 05 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 05 Kelo".

Purpose
Demonstrate how an AI agent product automates a workflow end to end. The section should show the workflow rather than only naming it, and break the capability down so a visitor understands what the automation handles.

Layout & content
- A workflow preview showing the automated sequence.
- Automation badges marking the automated stages or capabilities.
- A detailed capability breakdown beneath the preview.
- Neutral placeholder labels for each stage and badge.

Visual direction
Light, minimal and photography-led, with the workflow preview as the focal point and the badges used sparingly as small markers rather than decoration.

Interaction & motion
Use Framer Motion so the workflow preview and the capability breakdown reveal on scroll, with interactive hover states on the badges. Keep the workflow itself static once revealed.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 05 Luma

- Slug: `jiro-features-05-luma`
- Page: https://landingpageprompts.com/prompts/jiro-features-05-luma
- Effect: An AI feature showcase with product mockup, workflow visuals, and benefit-driven copy. Built for AI media tools, content generation platforms, and creative SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 40,689; total with repair and cross-check: 40,689
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 05 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 05 Luma".

Purpose
Show how an AI media tool works end to end: the product interface, the workflow around it, and the benefit each part delivers to a creative team.

Layout & content
- A section heading with a brief benefit-led supporting line.
- A product mockup as the central visual.
- Workflow visuals showing the steps a user moves through.
- Benefit-driven copy blocks sitting alongside the visuals.

Visual direction
Dark theme arranged on a grid: aligned columns and rows, generous negative space, and a restrained accent so the mockup and workflow imagery carry the section.

Interaction & motion
Framer Motion for entrance and scroll-linked reveals across the grid, with hover feedback on the copy blocks.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 05 Orbit

- Slug: `jiro-features-05-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-features-05-orbit
- Effect: A coaching features section with split-image layout, methodology breakdown, and benefit-focused copy. Designed for personal coaches, business mentors, and educator brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,988; total with repair and cross-check: 25,988
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 05 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 05 Orbit".

Purpose
Lay out a coaching methodology for prospective clients of personal coaches, business mentors and educator brands. The section should make the approach understandable and show what a client gets, using benefits rather than jargon.

Layout & content
- A split-image layout with photography on one side and feature copy on the other.
- A methodology breakdown walking through the stages of the coaching approach.
- Benefit-focused copy describing the outcome of each stage.
- A stats element supporting the methodology with concrete figures.
- A dashboard preview panel showing how progress is tracked.

Visual direction
Light and minimal, with photography balancing the text column and a calm, readable type scale. Keep the layout airy so the methodology steps are easy to follow.

Interaction & motion
Animate each methodology step into view as the visitor scrolls, and let the stats count up when the row becomes visible.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the scroll reveals, lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 05 Velara

- Slug: `jiro-features-05-velara`
- Page: https://landingpageprompts.com/prompts/jiro-features-05-velara
- Effect: An AI feature showcase with workflow preview, automation visuals, and benefit-driven copy. Built for AI automation platforms, intelligent agents, and AI-powered SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 39,884; total with repair and cross-check: 39,884
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 05 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 05 Velara".

Purpose
Show how an AI automation platform works for teams evaluating intelligent agents and AI-powered SaaS. The section turns abstract automation into a visible workflow and then states the benefit plainly.

Layout & content
- A heading and short lead-in framing the automation promise.
- A workflow preview visual showing stages of an automated process.
- Supporting automation visuals, such as panels or nodes that indicate handoffs.
- Benefit-driven copy that explains what the automation removes from the user's workload.

Visual direction
Dark, futuristic and minimal, with gradient treatments used sparingly for depth. Keep surfaces clean so the workflow preview reads clearly.

Interaction & motion
Animated reveals and light looping motion inside the workflow preview to suggest a process running.

Stack
- React functional component + Tailwind CSS.
- framer-motion for reveal and looping motion.
- lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 06 Luma

- Slug: `jiro-features-06-luma`
- Page: https://landingpageprompts.com/prompts/jiro-features-06-luma
- Effect: An AI features section with detailed capability breakdown, generation preview, and creator-focused benefit copy. Designed for AI creative platforms and generative media SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 18,403; total with repair and cross-check: 18,403
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 06 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 06 Luma".

Purpose
Show creators what an AI creative platform can produce, pairing a detailed capability breakdown with a preview of generated output. Designed for AI creative platforms and generative media SaaS.

Layout & content
- Section heading with creator-facing framing.
- A generation preview showing sample output as the visual anchor.
- A detailed capability breakdown arranged on a grid.
- Creator-focused benefit copy for each capability.

Visual direction
Dark and modern with a structured grid: deep background, clear cell boundaries, and the generation preview treated as the brightest element on the page.

Interaction & motion
Animate the generation preview on entrance and stagger the capability grid cells in as the section scrolls into view.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance and stagger animation.
- lucide-react for capability icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 06 Moxo

- Slug: `jiro-features-06-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-features-06-moxo
- Effect: A features section with split-image layout, capability highlights, and conversion-focused CTAs. Built for SaaS products, business tools, and software platform marketing.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,999; total with repair and cross-check: 30,999
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 06 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 06 Moxo".

Purpose
Pair real product imagery with capability highlights and a clear next step, so a visitor evaluating a software platform can see what it does and act on it. For SaaS products, business tools and software platform marketing.

Layout & content
- A split layout: image on one side, capability highlights on the other, alternating between rows.
- Each row pairs a photograph with a short capability title and description.
- Conversion-focused CTAs placed at the end of the section.
- An icon per capability to aid scanning.

Visual direction
Light and photography-led: real imagery carries the colour, the copy column stays quiet, and the grid alignment is strict so the alternating rows still read as one system.

Interaction & motion
Animated: rows fade and slide in on scroll, imagery may scale slightly, and the CTAs respond on hover.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the scroll animation and lucide-react for the capability icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 06 Orbit

- Slug: `jiro-features-06-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-features-06-orbit
- Effect: A program features grid with capability cards, outcome badges, and student-focused messaging. Built for coaches, course creators, and online education brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 20,097; total with repair and cross-check: 20,097
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 06 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 06 Orbit".

Purpose
Lay out what a program includes so prospective students can judge the fit. It is built for coaches, course creators and online education brands, so the messaging should address learners and the outcomes they are working toward.

Layout & content
- A section intro with a bold headline and a short line framing the program.
- A grid of capability cards describing each part of the program.
- Outcome badges attached to the cards or the grid, marking what a participant gains.
- Student-focused copy throughout, written in the second person.

Visual direction
Dark, bold and modern on a firm grid: strong headline scale, solid card surfaces, high contrast between title and body text. Badges are the single accent and stay compact.

Interaction & motion
Static section; no animation required.

Stack
- React functional component + Tailwind CSS.
- npm install lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 06 Velara

- Slug: `jiro-features-06-velara`
- Page: https://landingpageprompts.com/prompts/jiro-features-06-velara
- Effect: A features grid for AI products with icon-led cards, capability descriptions, and developer-focused messaging. Suited for AI APIs, ML platforms, and developer tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,841; total with repair and cross-check: 23,841
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 06 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 06 Velara".

Purpose
Explain what an AI product offers through a tidy grid of icon-led cards with plain capability descriptions. Suited for AI APIs, ML platforms, and developer tools.

Layout & content
- A grid of feature cards, each led by an icon.
- A capability description in each card, written for a developer audience.
- Section copy that frames the features as platform capabilities rather than marketing claims.
- Neutral placeholder feature names and descriptions.

Visual direction
Dark, minimal, and grid-driven: a restrained dark surface, consistent card sizing, and icons as the only accent so the grid reads calmly.

Interaction & motion
Animate cards in with Framer Motion as they enter the viewport, using a staggered fade and rise, and a subtle hover response per card.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 07 Luma

- Slug: `jiro-features-07-luma`
- Page: https://landingpageprompts.com/prompts/jiro-features-07-luma
- Effect: An AI media features grid with workflow icons, output preview cards, and creator-driven copy. Built for AI video, voice, and content generation tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,056; total with repair and cross-check: 25,056
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 07 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 07 Luma".

Purpose
This section shows an AI media tool's workflow to creators working in video, voice and content generation. It should connect each step of the workflow to a visible output, so the tool's creative range is immediately apparent.

Layout & content
- A grid of feature entries covering the workflow.
- Workflow icons labelling each capability.
- Output preview cards showing what the tool produces.
- Creator-driven copy written for people who make media.

Visual direction
Dark and minimal with large type. Let the output previews provide the visual interest and keep the grid orderly so a large number of entries stays scannable; any metric treatment should be typographic and restrained.

Interaction & motion
Animate grid entries and preview cards with framer-motion, with brief hover responses on each card.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 07 Orbit

- Slug: `jiro-features-07-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-features-07-orbit
- Effect: A coaching features grid with icon-led cards, program highlights, and outcome-focused descriptions. Designed for coaches, educators, and personal brand websites.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 29,298; total with repair and cross-check: 29,298
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 07 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 07 Orbit".

Purpose
Summarise what a coaching offer includes, in a friendly grid that lets a visitor understand the shape of the program in one pass. Designed for coaches, educators and personal brand websites.

Layout & content
- A section header with a short headline and one framing line.
- A grid of icon-led cards, each with a line icon, a program highlight title and an outcome-focused description.
- Consistent card structure so the grid reads as a set rather than a list of unrelated items.
- A short closing line with a single call to action to learn more.
- Neutral placeholder copy for every card; real program detail is supplied later.

Visual direction
Light, minimal and playful: rounded but restrained card shapes, generous whitespace, and small illustrative icons as the main visual accent. Colour stays close to neutral.

Interaction & motion
Static section; no animation required. Icons are rendered from lucide-react.

Stack
- React functional component + Tailwind CSS.
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 07 Velara

- Slug: `jiro-features-07-velara`
- Page: https://landingpageprompts.com/prompts/jiro-features-07-velara
- Effect: An AI features section with capability cards, model preview imagery, and AI-focused benefit copy. Built for AI platforms, ML tools, and intelligent software products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,845; total with repair and cross-check: 24,845
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 07 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 07 Velara".

Purpose
Present an AI platform's capabilities as a scannable set. The section should let a visitor take in the range of features at a glance, then dig into the benefit behind any single card.

Layout & content
- A grid of capability cards, each with a title, short benefit copy and a small icon.
- Model preview imagery accompanying the grid.
- AI-focused benefit copy framing each capability in terms of what it enables.
- Neutral placeholder card titles and descriptions.

Visual direction
Dark, minimal and futuristic. Keep the card surfaces flat and quiet, with one restrained accent and enough contrast between heading and body that the grid scans quickly.

Interaction & motion
Use Framer Motion for staggered card reveals on scroll and a subtle hover lift or highlight per card.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 08 Luma

- Slug: `jiro-features-08-luma`
- Page: https://landingpageprompts.com/prompts/jiro-features-08-luma
- Effect: An AI features section with capability cards, generation preview, and creative tool-focused messaging. Built for AI creative platforms, generative tools, and media AI products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 36,918; total with repair and cross-check: 36,918
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 08 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 08 Luma".

Purpose
Present an AI creative tool capabilities as a set of scannable cards and show what its output looks like, with messaging aimed at people who make media.

Layout & content
- A section heading and a short supporting line.
- A grid of capability cards, each with an icon, a title and a one-line description.
- A generation preview panel showing example output from the tool.
- Creative tool-focused copy tying the cards back to real workflows.

Visual direction
Light, minimal and modern: evenly sized cards on a clean grid, soft borders and shadows, small lucide-react icons, and one accent colour used sparingly.

Interaction & motion
Framer Motion for staggered card entrances and a hover lift on each card, plus a gentle reveal for the generation preview.

Stack
- React functional component + Tailwind CSS.
- framer-motion, lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 08 Orbit

- Slug: `jiro-features-08-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-features-08-orbit
- Effect: A program features section with curriculum cards, instructor highlights, and enrollment CTAs. Built for online courses, coaching programs, and education platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 16,082; total with repair and cross-check: 16,082
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 08 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 08 Orbit".

Purpose
Present an online course or coaching programme in enough detail that a prospective student understands the curriculum and who teaches it. The section should answer what is covered, who leads it and how to enrol.

Layout & content
- Curriculum cards, each covering a module or topic area with a short description.
- Instructor highlights introducing the people teaching the programme.
- Enrollment call-to-action buttons placed after the curriculum.
- A section heading and supporting line framing the programme.

Visual direction
Dark and modern, with gradient accents used sparingly to separate modules and mark the enrollment action. Keep the card layout orderly so a long curriculum stays scannable.

Interaction & motion
Animate the curriculum and instructor cards into view with a staggered reveal on scroll, and give the enrollment buttons a clear hover response.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the staggered reveals, lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 09 Luma

- Slug: `jiro-features-09-luma`
- Page: https://landingpageprompts.com/prompts/jiro-features-09-luma
- Effect: An AI feature showcase with product mockup, workflow visuals, and creator-focused benefit copy. Suited for AI video, audio, and content generation platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 36,381; total with repair and cross-check: 36,381
- Verification: 15/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 09 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 09 Luma".

Purpose
Present an AI content platform to creators by showing the product surface and the workflow around it. It targets AI video, audio and content generation products whose users care about output quality and speed.

Layout & content
- A section heading with a creator-focused benefit line.
- A product mockup panel as the primary visual.
- Workflow visuals that suggest steps from input to finished output.
- Benefit copy written for creators, placed alongside or beneath the mockup.

Visual direction
Dark, modern and gridded, with interactive surfaces and clear hierarchy. Keep the mockup the brightest element and the surrounding grid subtle.

Interaction & motion
Interactive hover or focus states on the mockup and workflow pieces, plus animated entrance for the copy.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance and interactive motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 09 Moxo

- Slug: `jiro-features-09-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-features-09-moxo
- Effect: A SaaS features showcase with product mockup, capability badges, and benefit-driven copy. Designed for B2B software, productivity tools, and enterprise SaaS platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,201; total with repair and cross-check: 30,201
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 09 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 09 Moxo".

Purpose
This section presents a SaaS product's capabilities to a B2B software buyer. It should showcase the product itself while pairing each capability with a benefit-led explanation, so a visitor evaluating productivity or enterprise tooling understands both what the product does and why it matters.

Layout & content
- A section intro with a short benefit-driven heading and a supporting line.
- A product mockup panel that anchors the whole showcase.
- Capability badges that label the individual features.
- Supporting copy blocks pairing each capability with its benefit.

Visual direction
Keep it light and minimal, and let product photography carry the visual weight. Use restrained spacing and typography so the mockup and badges stay legible, and keep any numeric treatment in a small supporting role rather than as decoration.

Interaction & motion
Animate the entrance of the mockup, badges and copy with framer-motion, keeping transitions subtle and consistent across the section.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 09 Orbit

- Slug: `jiro-features-09-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-features-09-orbit
- Effect: A coaching features section with methodology preview, outcome metrics, and trust-building layout. Suited for executive coaches, business mentors, and consulting brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 21,898; total with repair and cross-check: 21,898
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 09 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 09 Orbit".

Purpose
Establish credibility for a coaching practice by previewing the methodology and the outcomes it produces. Suited to executive coaches, business mentors and consulting brands.

Layout & content
- Section heading naming the methodology.
- A methodology preview explaining how the engagement works.
- Outcome metrics presented as a small stats row.
- Photographic support that humanises the practice.
- Trust-building detail such as credentials or approach notes.

Visual direction
Light, minimal and photographic: restrained palette, editorial spacing, and imagery that carries the warmth of the practice.

Interaction & motion
Animate the outcome metrics as counters and reveal the methodology items with subtle staggered entrances.

Stack
- React functional component + Tailwind CSS.
- framer-motion for counters and entrance animation.
- lucide-react for section icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 10 Luma

- Slug: `jiro-features-10-luma`
- Page: https://landingpageprompts.com/prompts/jiro-features-10-luma
- Effect: An AI features grid with capability cards, output preview imagery, and creator-driven copy. Designed for AI content tools, creative SaaS, and generative AI platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 37,696; total with repair and cross-check: 37,696
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 10 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 10 Luma".

Purpose
Show what an AI content tool can produce: the capabilities it offers and the quality of its output, told in the language of creators. For AI content tools, creative SaaS and generative AI platforms.

Layout & content
- A grid of capability cards, each with a title and a short creator-facing description.
- Output preview imagery inside or beside the cards to show generated results.
- A section heading written for creative users rather than technical buyers.
- A closing CTA to try the tool.

Visual direction
Dark and minimal: the generated output imagery supplies the colour, cards sit on a near-black surface with soft edges, and the type hierarchy keeps scanning easy.

Interaction & motion
Animated: cards reveal in a stagger on scroll and lift slightly on hover; output previews may cross-fade between states.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the reveal and hover motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 10 Moxo

- Slug: `jiro-features-10-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-features-10-moxo
- Effect: A features grid with icon-led cards, capability highlights, and concise benefit descriptions. Designed for SaaS products, business tools, and software platform marketing.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,649; total with repair and cross-check: 19,649
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 10 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 10 Moxo".

Purpose
Summarise a software product's capabilities in one scannable grid, for SaaS products, business tools and software platform marketing. Each card should state a capability and the benefit it delivers in as few words as possible.

Layout & content
- A short section intro: headline and one supporting line.
- A grid of icon-led cards, each with an icon, a short title and a concise benefit description.
- Capability highlights surfaced inside the cards rather than in a separate list.
- Even card sizing so the grid reads as one system.

Visual direction
Dark and minimal: quiet surfaces, thin borders, restrained type, and icons as the only accent. Hierarchy comes from spacing and title weight, not from colour or ornament.

Interaction & motion
Cards animate in on scroll and respond to hover with a short lift or border shift, driven by Framer Motion. lucide-react provides the card icons. Keep every transition brief.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 10 Orbit

- Slug: `jiro-features-10-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-features-10-orbit
- Effect: A coaching features section with split-image layout, methodology breakdown, and benefit-driven narrative. Built for life coaches, business mentors, and consultancy services.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 39,108; total with repair and cross-check: 39,108
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 10 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 10 Orbit".

Purpose
Present a coaching methodology as a clear breakdown of what the service includes and why it helps. Built for life coaches, business mentors, and consultancy services.

Layout & content
- A split layout pairing an image on one side with feature content on the other.
- A methodology breakdown that walks through the approach in ordered parts.
- Benefit-driven narrative copy supporting each part.
- Neutral placeholder methodology names and descriptions.

Visual direction
Light, minimal, and modern, with photography carrying the visual side of the split. Keep typography clean and the benefit copy easy to scan.

Interaction & motion
Animate the image and the methodology items with Framer Motion on scroll entry, staggering each item so the breakdown builds in sequence. lucide-react supplies supporting icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 11 Luma

- Slug: `jiro-features-11-luma`
- Page: https://landingpageprompts.com/prompts/jiro-features-11-luma
- Effect: An AI media features section with workflow preview, output gallery, and creator-focused messaging. Built for AI video tools, audio platforms, and generative media products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,946; total with repair and cross-check: 31,946
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 11 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 11 Luma".

Purpose
This section introduces an AI media platform's capabilities to creators using video tools, audio platforms or generative media products. It should show the workflow and the resulting output in a way that makes the product's creative range tangible.

Layout & content
- A workflow preview as the section's centrepiece.
- An output gallery of generated results.
- Creator-focused messaging alongside the previews.
- Tabbed groupings so different capabilities can be compared in place.

Visual direction
Dark and minimal, with the preview and gallery imagery doing the work. Keep the surrounding interface quiet so the tabbed content stays the focus.

Interaction & motion
Make the tabs interactive and animated with framer-motion, animating panel changes and preview reveals.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 11 Orbit

- Slug: `jiro-features-11-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-features-11-orbit
- Effect: A course features grid with curriculum preview, learning outcome badges, and enrollment-focused copy. Suited for online courses, training programs, and education platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 39,077; total with repair and cross-check: 39,077
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 11 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 11 Orbit".

Purpose
Preview a course curriculum and its learning outcomes so prospective students can judge the fit before enrolling. Suited to online courses, training programs and education platforms.

Layout & content
- A section header with a headline naming the course and one line of context.
- A grid of feature cards representing curriculum modules, each with an icon, a module title and a short description of what it covers.
- Learning outcome badges shown as compact labels that mark the skills gained.
- Enrollment-focused copy in the closing area with a single call to action.
- Neutral placeholder module titles and outcomes; real curriculum content is supplied later.

Visual direction
Dark and minimal on a strict grid: even card sizing, restrained borders, muted body text, and badges as the only bright accents. The grid should feel ordered and academic.

Interaction & motion
Cards fade and rise in a staggered sequence on scroll via Framer Motion, with a subtle hover lift. Icons come from lucide-react.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Features 12 Orbit

- Slug: `jiro-features-12-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-features-12-orbit
- Effect: A coaching features section with program highlights, methodology cards, and outcome-focused messaging. Built for coaches, course creators, and personal development brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,421; total with repair and cross-check: 30,421
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Features 12 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Features 12 Orbit".

Purpose
Describe a coaching programme so a prospective client understands both what is taught and what it is meant to change for them. The section should balance programme structure with outcome-oriented messaging.

Layout & content
- A programme highlights block summarising what the programme covers.
- Methodology cards explaining how the coaching works.
- Outcome-focused copy tying each element to a result for the client.
- Neutral placeholder wording for all headings and descriptions.

Visual direction
Light, minimal and modern. Use clean typography, calm spacing and restrained accents so the section feels considered rather than salesy.

Interaction & motion
Use Framer Motion for scroll-triggered entrance animation across the highlights and methodology cards. lucide-react can supply a small icon for each card.

Stack
- React functional component + Tailwind CSS.
- framer-motion and lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Finance Management Landing Page - Finsyc

- Slug: `jiro-finance-management-landing-page-finsyc`
- Page: https://landingpageprompts.com/prompts/jiro-finance-management-landing-page-finsyc
- Effect: A complete landing page for AI-powered finance management and accounting platforms. Includes a dashboard hero, AI insights features, integration logos, pricing tiers, testimonials,
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 42,657; total with repair and cross-check: 42,657
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Fintech" block called "Finance Management Landing Page - Finsyc". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Fintech landing page for a modern website: "Finance Management Landing Page - Finsyc".

Purpose
Launch an AI-powered finance management and accounting product. The page carries a founder whole story: product, intelligence, integrations, price, proof and a closing ask. Built for fintech founders launching expense trackers, AI bookkeeping or financial intelligence products.

Layout & content
- A dashboard hero with a video background and a preview of the product dashboard.
- An AI insights features block explaining what the platform surfaces.
- An integration logos strip.
- Pricing tiers with a monthly/yearly toggle.
- A testimonials block and closing calls to action.

Visual direction
Light, modern and minimal: dashboard imagery leads, type stays quiet, and a single accent colour marks interactive elements.

Interaction & motion
Animate with CSS transitions or keyframes since no motion dependency is declared. The monthly/yearly toggle must swap prices and period labels instantly.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Fluid Gradient Engine

- Slug: `jiro-fluid-gradient-engine`
- Page: https://landingpageprompts.com/prompts/jiro-fluid-gradient-engine
- Effect: A fluid WebGL-style motion background with deep blue and cyan domain-warped gradients, ridged shiny edges, and a cinematic film-grain texture. Drop it behind any hero, page, card, 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,961; total with repair and cross-check: 26,961
- Verification: 17/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Background" block called "Fluid Gradient Engine". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Background section for a modern website: "Fluid Gradient Engine".

Purpose
Provide a reusable motion background that gives a flat section a premium, fluid feel. It is meant to sit behind a hero, page, card or modal, with white or light text content layered on top of it.

Layout & content
- A full-bleed background layer that fills its container and can be dropped behind any section.
- Deep blue and cyan domain-warped gradients that shift slowly across the surface.
- Ridged, shiny edges where the gradient fields meet.
- A cinematic film-grain texture overlaid on the gradients.
- A wrapper that keeps foreground content legible above the animated layer.

Visual direction
Dark, gradient-led and cinematic, with deep blues and cyans and enough contrast at the top that white or light text stays readable.

Interaction & motion
Continuous ambient motion of the gradient field, running without user input and holding a low, steady tempo.

Stack
- React functional component + Tailwind CSS.
- three for the WebGL-style rendering.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 01 Kelo

- Slug: `jiro-footer-01-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-footer-01-kelo
- Effect: An AI footer with clean multi-column navigation, brand logo, social icons, and minimal copyright row. Suited for AI platforms, automation tools, and intelligent SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 42,107; total with repair and cross-check: 42,107
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 01 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 01 Kelo".

Purpose
Close an AI platform marketing page with navigable structure and a quiet brand sign-off. It gives visitors a final route to product, company and social destinations.

Layout & content
- A brand logo or wordmark area.
- Clean multi-column navigation grouping the main site links.
- Social icon links.
- A minimal copyright row at the very bottom.

Visual direction
Light theme with bold, large type for the wordmark and a restrained, minimal layout. Thin dividers and generous vertical spacing keep the footer calm and legible.

Interaction & motion
Animated reveal as the footer scrolls into view, with subtle hover states on the navigation and social links.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the scroll reveal and hover transitions.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 01 Luma

- Slug: `jiro-footer-01-luma`
- Page: https://landingpageprompts.com/prompts/jiro-footer-01-luma
- Effect: A flagship AI media footer with clean multi-column navigation, brand wordmark, social icons, and minimal layout. Built for AI video tools, content platforms, and creative SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,365; total with repair and cross-check: 24,365
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 01 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 01 Luma".

Purpose
Close an AI media product's page with clear navigation and brand presence, without competing with the content above. Built for AI video tools, content platforms and creative SaaS.

Layout & content
- Brand wordmark anchoring the footer.
- Multi-column navigation grouping the site's main links.
- Social icon row linking out to the brand's channels.
- A minimal bottom bar for legal or copyright text.

Visual direction
Dark, minimal and modern: a single deep surface, quiet link colour, and the wordmark as the largest element in the block.

Interaction & motion
Static section; no animation required.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the dependency already used across the page.
- lucide-react for social icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 01 Pixa

- Slug: `jiro-footer-01-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-footer-01-pixa
- Effect: A clean footer section with multi-column link grid, brand logo, social icons, and minimal copyright row. Built for SaaS products and software platform marketing.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,359; total with repair and cross-check: 30,359
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 01 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 01 Pixa".

Purpose
Close a SaaS marketing page with everything a visitor needs to navigate on: grouped links, brand identity, social presence and legal basics, without pulling attention from the page above.

Layout & content
- A multi-column link grid grouped by destination.
- A brand logo or wordmark in the footer's leading position.
- A row of social icons linking out.
- A minimal copyright row at the base.

Visual direction
Light, minimal and modern: small type, generous column gaps, a quiet divider above the base row, and no heavy fills so the footer recedes.

Interaction & motion
Animated lightly: columns fade in on scroll, and links and social icons shift colour or underline on hover.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the entrance animation and lucide-react for the social icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 01 Solra

- Slug: `jiro-footer-01-solra`
- Page: https://landingpageprompts.com/prompts/jiro-footer-01-solra
- Effect: An agency footer with editorial multi-column link layout, refined typography, brand wordmark, and minimal social icons. Built for design studios, creative agencies, and brand consu
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 22,075; total with repair and cross-check: 22,075
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 01 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 01 Solra".

Purpose
Close an agency site with an editorial, gallery-like footer that keeps the studio's craft visible to the last pixel. It is written for design studios, creative agencies and brand consultancies whose visitors judge polish.

Layout & content
- A brand wordmark treated typographically, with room around it rather than a boxed logo.
- A multi-column link layout organised editorially: navigation grouped by purpose, each group with a short heading.
- A minimal row of social icons, kept small and quiet.
- A photographic element integrated into the footer so it does not read as a plain link block.

Visual direction
Dark and elegant: deep surfaces, refined type, and photography that carries the texture. Links stay understated with fine separation; the wordmark is the strongest element.

Interaction & motion
Links and columns reveal with a subtle staggered fade on scroll, and social icons respond on hover. Use Framer Motion for the reveals and lucide-react for the icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 01 Velara

- Slug: `jiro-footer-01-velara`
- Page: https://landingpageprompts.com/prompts/jiro-footer-01-velara
- Effect: An AI footer section with multi-column link grid, brand logo, social link icons, and clean copyright row. Built for AI platforms, ML APIs, and intelligent products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,036; total with repair and cross-check: 31,036
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 01 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 01 Velara".

Purpose
Close an AI product page with complete navigation and brand presence, giving visitors a final route to every important page. Built for AI platforms, ML APIs, and intelligent products.

Layout & content
- A multi-column grid of navigation links.
- The brand logo placed as the anchor of the footer.
- A row of social link icons.
- A clean copyright row at the bottom.
- Neutral placeholder link labels and brand wordmark.

Visual direction
Dark, minimal, and modern: a deep base with restrained link typography, clear column separation, and icons kept small and quiet.

Interaction & motion
Use Framer Motion for an animated text entrance on the footer headings and links, plus hover states on each link and social icon. Keep motion light so the footer stays calm.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 02 Kelo

- Slug: `jiro-footer-02-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-footer-02-kelo
- Effect: An AI footer section with two-column link grid, newsletter signup, social link icons, and brand logo. Built for AI agents, automation SaaS, and intelligent platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,920; total with repair and cross-check: 30,920
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 02 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 02 Kelo".

Purpose
This footer closes the page for an AI agents, automation or intelligent platform product. It should give visitors a last chance to navigate the site, subscribe for updates, and find the brand's social presence.

Layout & content
- A two-column link grid for site navigation.
- A newsletter signup field with a submit action.
- Social link icons.
- The brand logo.

Visual direction
Dark and minimal, with restrained type and generous breathing room. Keep the link columns orderly and the logo present but not dominant; imagery should stay subtle so the footer reads as a quiet close.

Interaction & motion
Use framer-motion for a gentle reveal as the footer enters the viewport and for light hover states on links and icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 02 Luma

- Slug: `jiro-footer-02-luma`
- Page: https://landingpageprompts.com/prompts/jiro-footer-02-luma
- Effect: An AI media footer section with two-column link layout, newsletter form, social icons, and brand logo. Suited for AI video, audio, and creative AI platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 21,385; total with repair and cross-check: 21,385
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 02 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 02 Luma".

Purpose
Close an AI media product page with navigation, a way to stay in touch, and the brand mark, so visitors can find their way and subscribe. Suited to AI video, audio and creative AI platforms.

Layout & content
- A brand block with the logo and a one-line description of the product.
- A two-column link layout grouping navigation into labelled sets.
- A newsletter form with an email input and a submit button, plus a short line about what subscribers receive.
- A row of social icons linking to external profiles.
- A bottom bar with copyright and any legal links.

Visual direction
Dark, modern and minimal: quiet dividers, muted link text that brightens on hover, and the brand mark as the anchor of the left column. No heavy decoration.

Interaction & motion
The newsletter input and links use short hover transitions, and the columns fade in gently on scroll with Framer Motion. Icons come from lucide-react.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 02 Pixa

- Slug: `jiro-footer-02-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-footer-02-pixa
- Effect: A modern footer with multi-column navigation, large brand wordmark, newsletter form, and social link icons. Suited for SaaS products, AI tools, and B2B platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 48,333; total with repair and cross-check: 48,333
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 02 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 02 Pixa".

Purpose
Close the page with a complete navigation surface and one last conversion opportunity. The footer should make it easy to reach any part of the site and to subscribe, while reinforcing the brand at the bottom of the page.

Layout & content
- Multi-column navigation grouping links by area.
- A large brand wordmark as the visual anchor.
- A newsletter form with an email field and a submit action.
- A row of social link icons.

Visual direction
Light, minimal and modern. Let the oversized wordmark dominate the lower area, with columns of small links above it and plenty of breathing room between groups.

Interaction & motion
Keep motion CSS-only: a light entrance reveal on scroll plus hover feedback on links, social icons and the newsletter submit action. No animation library is required.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies are required beyond React and Tailwind CSS.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 02 Solra

- Slug: `jiro-footer-02-solra`
- Page: https://landingpageprompts.com/prompts/jiro-footer-02-solra
- Effect: A studio footer with editorial multi-column link grid, refined typography, social icons, and brand wordmark. Built for design agencies, creative studios, and brand firms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,003; total with repair and cross-check: 23,003
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 02 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 02 Solra".

Purpose
Close a studio site with an editorial footer that keeps navigation available and ends on the brand. Built for design agencies, creative studios and brand firms.

Layout & content
- An editorial multi-column link grid grouping site sections and secondary pages.
- A brand wordmark as the closing element.
- A row of social icons.
- A baseline row with legal or copyright placeholder copy.

Visual direction
Light, elegant and minimal: refined typography with a clear label-versus-link hierarchy, generous spacing between columns, and no decorative graphics.

Interaction & motion
Static section; no animation required. Keep hover states on links and social icons restrained.

Stack
- React functional component + Tailwind CSS.
- motion, lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 02 Velara

- Slug: `jiro-footer-02-velara`
- Page: https://landingpageprompts.com/prompts/jiro-footer-02-velara
- Effect: An AI footer with two-column link layout, large brand wordmark, social icons, and copyright row. Designed for AI platforms, automation tools, and AI-powered SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 41,491; total with repair and cross-check: 41,491
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 02 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 02 Velara".

Purpose
Close the page for an AI platform or automation product with navigation and brand reinforcement. It should give visitors a clear way to move around the site while leaving the brand name as the last thing they see.

Layout & content
- A two-column link layout grouping navigation destinations by theme.
- A large brand wordmark anchoring the footer visually.
- A row of social icons linking to the brand's profiles.
- A copyright row at the very bottom.

Visual direction
Dark, minimal and futuristic, with a subtle gradient behind the wordmark and restrained link styling. Let the large wordmark carry the visual weight rather than decoration.

Interaction & motion
Animate the footer columns and wordmark in gently when the footer enters the viewport, and give the links and social icons a soft hover state.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the entrance and hover motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 03 Kelo

- Slug: `jiro-footer-03-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-footer-03-kelo
- Effect: An AI footer with multi-column link layout, large brand wordmark, social icons, and minimal copyright. Designed for AI platforms, automation tools, and intelligent products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 20,489; total with repair and cross-check: 20,489
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 03 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 03 Kelo".

Purpose
Give an AI platform or automation product a structured, confident closing block. It should route visitors to the right pages and reinforce the brand with a large wordmark.

Layout & content
- A large brand wordmark as the visual anchor of the footer.
- A multi-column link layout grouping navigation destinations.
- Social icon links in a single row.
- A minimal copyright line beneath the link columns.

Visual direction
Dark, minimal and modern, with oversized type for the wordmark and muted link text. Use spacing and type weight rather than decoration to create hierarchy.

Interaction & motion
Animated entrance for the wordmark and link columns, with hover states on links and social icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance and hover motion.
- lucide-react for social icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 03 Luma

- Slug: `jiro-footer-03-luma`
- Page: https://landingpageprompts.com/prompts/jiro-footer-03-luma
- Effect: An AI footer with multi-column navigation, large brand wordmark, social icons, and minimal copyright row. Built for AI media platforms, video tools, and generative SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 36,004; total with repair and cross-check: 36,004
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 03 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 03 Luma".

Purpose
Give an AI media platform a footer that feels designed rather than appended, with a large brand statement and complete navigation. Built for AI media platforms, video tools and generative SaaS.

Layout & content
- A large brand wordmark as the footer's centrepiece.
- Multi-column navigation covering product and company links.
- Social icon row for external channels.
- A minimal copyright row at the very bottom.

Visual direction
Dark and minimal with a gradient treatment: a deep base, soft gradient light behind the wordmark, and restrained link styling.

Interaction & motion
Animate the wordmark and link columns in on scroll, and add subtle hover states on links and social icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance and hover animation.
- lucide-react for social icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 03 Orbit

- Slug: `jiro-footer-03-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-footer-03-orbit
- Effect: A coaching footer with multi-column navigation, large brand wordmark, social icons, and minimal copyright. Built for coaches, course creators, and personal brand sites.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 22,388; total with repair and cross-check: 22,388
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 03 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 03 Orbit".

Purpose
Give a coaching or personal brand site a closing block that routes visitors to programmes, resources and contact while reinforcing the brand. For coaches, course creators and personal brand sites.

Layout & content
- Multi-column navigation grouped by destination.
- A large brand wordmark that anchors the footer visually.
- Social icon links.
- A minimal copyright line.

Visual direction
Light, minimal and modern: the oversized wordmark is the one bold gesture, and everything else is small, quiet type on a neutral surface with plenty of space.

Interaction & motion
Static section; no animation required. Hover states on links and icons are enough.

Stack
- React functional component + Tailwind CSS.
- lucide-react for the social icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 03 Solra

- Slug: `jiro-footer-03-solra`
- Page: https://landingpageprompts.com/prompts/jiro-footer-03-solra
- Effect: An agency footer with multi-column navigation, editorial typography, social icons, and copyright row. Built for design studios, branding agencies, and creative consultancies.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 36,489; total with repair and cross-check: 36,489
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 03 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 03 Solra".

Purpose
Give an agency site a composed, typographic close that makes navigation and legal links easy to find. It serves design studios, branding agencies and creative consultancies, so the footer should feel as considered as the work above it.

Layout & content
- Multi-column navigation grouping the site's links by section, each with a short heading.
- Editorial typography for headings and links, with clear weight contrast between them.
- A row of social icons, kept minimal.
- A copyright row at the bottom, separated by a fine rule.

Visual direction
Dark and elegant with a minimal surface: deep background, refined type, and fine dividers doing the structural work. No heavy panels, no colour accents competing with the typography.

Interaction & motion
Columns and links fade and rise in with a short stagger on scroll, and link and icon hover states are clearly visible. Framer Motion drives the reveal; lucide-react supplies the social icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 03 Velara

- Slug: `jiro-footer-03-velara`
- Page: https://landingpageprompts.com/prompts/jiro-footer-03-velara
- Effect: An AI product footer with multi-column navigation, newsletter signup form, social icons, and brand wordmark. Built for AI platforms, ML tools, and intelligent SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 29,921; total with repair and cross-check: 29,921
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 03 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 03 Velara".

Purpose
Give an AI product page a footer that both navigates and captures interest, combining link columns with a newsletter signup. Built for AI platforms, ML tools, and intelligent SaaS.

Layout & content
- A multi-column navigation area covering the site's main sections.
- A newsletter signup form with an email field and submit action.
- A row of social icons.
- The brand wordmark placed prominently.
- Neutral placeholder link labels and brand wordmark.

Visual direction
Dark and minimal: a deep base with the wordmark as the strongest element, columns aligned on a consistent grid, and the newsletter form styled as a compact, legible unit.

Interaction & motion
Use Framer Motion for animated text on the footer headings and a gentle entrance for the newsletter form, with hover and focus states on links, icons, and the submit control.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 04 Kelo

- Slug: `jiro-footer-04-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-footer-04-kelo
- Effect: An AI footer section with two-column link grid, brand logo, social link icons, and copyright row. Built for AI platforms, automation tools, and intelligent SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 38,872; total with repair and cross-check: 38,872
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 04 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 04 Kelo".

Purpose
This footer closes the page for an AI platform, automation tool or intelligent SaaS product. It should let a visitor keep navigating, recognise the brand, and reach the company's social channels.

Layout & content
- A two-column link grid.
- The brand logo.
- Social link icons.
- A copyright row at the bottom.

Visual direction
Dark and minimal, with a restrained palette and quiet imagery. Separate the copyright row clearly from the navigation above it so the hierarchy stays readable.

Interaction & motion
Use framer-motion for a subtle entrance and light hover feedback on links and social icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 04 Moxo

- Slug: `jiro-footer-04-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-footer-04-moxo
- Effect: A SaaS footer with multi-column navigation, newsletter form, social icons, and clean copyright row. Built for B2B software, productivity tools, and enterprise SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,411; total with repair and cross-check: 19,411
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 04 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 04 Moxo".

Purpose
Give a SaaS site a clean, dependable closing block: full navigation, a newsletter signup and contact routes. Built for B2B software, productivity tools and enterprise SaaS.

Layout & content
- A multi-column navigation area with labelled link groups and consistent column widths.
- A newsletter form with an email field, a submit button and a one-line explanation.
- A row of social icons for external profiles.
- A clean copyright row at the very bottom, separated by a thin rule.
- A brand mark or wordmark placed to anchor the navigation block.

Visual direction
Dark and minimal: low-contrast dividers, restrained type, and muted link colour that lifts on hover. Nothing competes with the page content above it.

Interaction & motion
Static section; no animation required beyond standard link hover states. Icons come from lucide-react.

Stack
- React functional component + Tailwind CSS.
- npm install lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 04 Orbit

- Slug: `jiro-footer-04-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-footer-04-orbit
- Effect: A coaching footer section with two-column link grid, brand logo, social link icons, and copyright row. Designed for coaches, mentors, and online education platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 37,771; total with repair and cross-check: 37,771
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 04 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 04 Orbit".

Purpose
Give a coaching or education brand a tidy closing block that keeps visitors oriented and offers a low-commitment way to stay in touch.

Layout & content
- A brand logo mark.
- A two-column grid of navigation links.
- A newsletter signup.
- Social link icons.
- A copyright row at the very bottom.

Visual direction
Dark, minimal and modern. Keep the link grid compact and the surfaces flat, using spacing rather than dividers to separate the rows.

Interaction & motion
Use lucide-react for the social and navigation icons, and add light hover feedback on links and the newsletter submit action. Keep any motion minimal.

Stack
- React functional component + Tailwind CSS.
- lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 04 Solra

- Slug: `jiro-footer-04-solra`
- Page: https://landingpageprompts.com/prompts/jiro-footer-04-solra
- Effect: A studio footer with two-column link grid, large brand wordmark, social icons, and refined neutral palette. Designed for design agencies, creative studios, and brand firms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,624; total with repair and cross-check: 23,624
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 04 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 04 Solra".

Purpose
End a studio site with a confident footer: a large brand wordmark that doubles as the visual anchor, supported by simple navigation. Designed for design agencies, creative studios and brand firms.

Layout & content
- A two-column link grid covering the main site areas.
- A large brand wordmark set as display type.
- A row of social icons.
- A small baseline line carrying legal placeholder copy.

Visual direction
Light and minimal on a refined neutral palette: the large type supplies the contrast and colour stays out of the way. Keep the columns aligned to a strict grid.

Interaction & motion
Framer Motion for a restrained entrance on the wordmark and link columns as the footer scrolls into view, with simple hover transitions on links.

Stack
- React functional component + Tailwind CSS.
- framer-motion, lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 05 Kelo

- Slug: `jiro-footer-05-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-footer-05-kelo
- Effect: An AI footer with multi-column link layout, newsletter signup, social icons, and brand wordmark. Suited for AI agents, automation SaaS, and intelligent platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 34,824; total with repair and cross-check: 34,824
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 05 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 05 Kelo".

Purpose
Serve as the closing block for an AI agents or automation SaaS site, combining navigation with a newsletter capture so the last interaction on the page can still convert a visitor.

Layout & content
- A multi-column link layout organising the site's destinations.
- A newsletter signup with an email field and a submit button.
- A brand wordmark identifying the product.
- Social icons and a small legal or copyright line.

Visual direction
Dark, minimal and modern, with a quiet type scale, clear column separation and an uncluttered signup row that reads as the primary action in the footer.

Interaction & motion
Animate the columns in on scroll, and give the signup field and button a clear focus and hover state so the capture form feels responsive.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the entrance motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 05 Moxo

- Slug: `jiro-footer-05-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-footer-05-moxo
- Effect: A SaaS footer section with two-column link grid, brand logo, social link icons, and copyright row. Designed for productivity tools, business software, and B2B platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,925; total with repair and cross-check: 26,925
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 05 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 05 Moxo".

Purpose
Close a B2B SaaS page with navigation, a newsletter capture and brand sign-off. It serves productivity tools, business software and B2B platforms that keep a light subscription touchpoint in the footer.

Layout & content
- A two-column link grid covering the main navigation destinations.
- A brand logo area alongside the link columns.
- A newsletter signup with an email field and submit action.
- Social link icons and a copyright row at the bottom.

Visual direction
Dark, bold and minimal. Strong type for the brand and headings, muted link text, and simple field styling that stays consistent with the rest of the page.

Interaction & motion
Static footer layout with light hover and focus states on links, social icons and the newsletter field. No elaborate animation is required.

Stack
- React functional component + Tailwind CSS.
- lucide-react for the social and form icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 05 Orbit

- Slug: `jiro-footer-05-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-footer-05-orbit
- Effect: A coaching footer with multi-column link layout, newsletter signup, social icons, and brand wordmark. Built for coaches, course creators, and personal development brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 36,013; total with repair and cross-check: 36,013
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 05 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 05 Orbit".

Purpose
Let a coaching brand capture newsletter subscribers while still offering complete site navigation. Built for coaches, course creators and personal development brands.

Layout & content
- Brand wordmark for the practice.
- Multi-column link layout grouping the site's main pages.
- A newsletter signup with an email field and submit action.
- Social icon row for external channels.

Visual direction
Dark, minimal and modern: a single deep surface, quiet dividers between columns, and the signup field as the only high-contrast control.

Interaction & motion
Static section; no animation required beyond basic focus and hover states on the signup control and links.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer 06 Moxo

- Slug: `jiro-footer-06-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-footer-06-moxo
- Effect: A SaaS footer with multi-column link layout, newsletter signup, social icons, and large brand wordmark. Built for B2B software, productivity tools, and enterprise SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,263; total with repair and cross-check: 24,263
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer 06 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer 06 Moxo".

Purpose
Close a B2B software page with navigation, an email capture for product updates, and brand reinforcement. For B2B software, productivity tools and enterprise SaaS.

Layout & content
- A multi-column link layout grouped by destination.
- A newsletter signup with an email field and a submit control.
- Social icon links.
- A large brand wordmark as the footer's anchor.

Visual direction
Dark, minimal and bold: high-contrast type on a dark surface, the wordmark set large, and the newsletter field as the one interactive focus.

Interaction & motion
Static section; no animation required beyond hover and focus states on the links, icons and signup control.

Stack
- React functional component + Tailwind CSS.
- lucide-react for icons (npm install lucide-react).

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer Basic

- Slug: `jiro-footer-basic`
- Page: https://landingpageprompts.com/prompts/jiro-footer-basic
- Effect: A dark-themed footer with brand column, multi-column navigation links, and bottom bar. Features logo with description, social media icons with hover animations, Products/Legal/Supp
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 46,720; total with repair and cross-check: 46,720
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer Basic". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer Basic".

Purpose
Provide a complete, structured site footer that handles navigation, contact and legal information in one dark block. It suits any modern site that needs a dependable close rather than a decorative one.

Layout & content
- A brand column with a logo and a short description of the site.
- Three link sections, labelled Products, Legal and Support, each listing its own links.
- A contact block with icons beside the contact details.
- A row of social media icons.
- A copyright bar with additional links beneath a divider.

Visual direction
Dark and minimal, with the Geist font and restrained type. Columns align on a firm grid and dividers stay thin, so the structure is legible without heavy panels or accent colour.

Interaction & motion
Social icons animate on hover, and link items slide right on hover. Columns reveal with a blur-up staggered entrance using a premium cubic-bezier ease, all driven by Framer Motion with lucide-react icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer - Glimpse

- Slug: `jiro-footer-glimpse`
- Page: https://landingpageprompts.com/prompts/jiro-footer-glimpse
- Effect: Explore AI-powered smart glass solutions with advanced analytics, seamless integrations, flexible pricing, expert resources and newsletter updates for smarter modern spaces.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,810; total with repair and cross-check: 23,810
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer - Glimpse". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer - Glimpse".

Purpose
Close a smart glass product page by gathering the site's main destinations and offering newsletter updates for visitors who want to stay informed. The subject is AI-powered smart glass for modern spaces.

Layout & content
- Navigation grouping the site's core topics: advanced analytics, seamless integrations, flexible pricing, and expert resources.
- A newsletter signup form for updates.
- A brand area anchoring the footer.
- Neutral placeholder link labels.

Visual direction
Dark and minimal: a deep base, tight typographic rhythm, and clearly separated link groups so the topic list stays scannable.

Interaction & motion
Animate the footer content with Framer Motion, using a soft entrance for link groups and the newsletter form plus hover and focus states on links and the submit control. lucide-react supplies supporting icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer o1 Moxo

- Slug: `jiro-footer-o1-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-footer-o1-moxo
- Effect: A flagship SaaS footer with multi-column navigation, large brand wordmark, social icons, and minimal copyright row. Built for B2B software, productivity tools, and platform marketi
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,786; total with repair and cross-check: 28,786
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer o1 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer o1 Moxo".

Purpose
This is a flagship footer for a B2B software or platform marketing site. It should feel like a deliberate closing statement rather than an afterthought, while still being a practical navigation aid.

Layout & content
- Multi-column navigation covering the site's sections.
- A large brand wordmark as the section's visual anchor.
- Social icons.
- A minimal copyright row.

Visual direction
Dark and elegant, with the oversized wordmark set in large type as the dominant element. Keep imagery muted and let the wordmark and navigation columns carry the composition.

Interaction & motion
Static section; no animation required beyond standard link hover states. Use lucide-react for the social icons.

Stack
- React functional component + Tailwind CSS.
- lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Footer With Newsletter

- Slug: `jiro-footer-with-newsletter`
- Page: https://landingpageprompts.com/prompts/jiro-footer-with-newsletter
- Effect: A vibrant blue-themed footer with newsletter subscription section. Features logo with brand description, 4-column navigation grid (Product, Company, Resources, Social with icons), 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,924; total with repair and cross-check: 24,924
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Footer" block called "Footer With Newsletter". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Footer section for a modern website: "Footer With Newsletter".

Purpose
Close the page with a vivid, brand-forward footer that keeps navigation discoverable and makes subscribing to the newsletter the most inviting action on screen.

Layout & content
- A brand block with the logo and a short brand description.
- A four-column navigation grid labelled Product, Company, Resources and Social, with icons in the Social column.
- A prominent newsletter subscription bar containing a glassmorphic email input and a golden call to action button.
- A bottom copyright bar.
- Body and heading type set in Inter Tight.

Visual direction
Colourful and bold on a vibrant blue theme, with a golden accent reserved for the newsletter button and hover states. The glassmorphic input sits lightly over the blue field.

Interaction & motion
Blur-up staggered reveal animations with premium cubic-bezier easing bring the columns and newsletter bar in on scroll, powered by Framer Motion. Golden hover transitions on interactive elements.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Freelance Coach Hero Orbit

- Slug: `jiro-freelance-coach-hero-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-freelance-coach-hero-orbit
- Effect: A freelance coaching hero with personal branding visuals, course preview cards, and conversion-focused CTAs. Designed for freelance mentors, business coaches, and solopreneur educa
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 42,391; total with repair and cross-check: 42,391
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Freelance Coach Hero Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Freelance Coach Hero Orbit".

Purpose
Introduce an individual coach as the product. The hero should put a face and a point of view on the page, then move the visitor toward enrolling in a course or booking time.

Layout & content
- Personal branding visuals featuring the coach.
- Course preview cards showing what is on offer.
- A bold headline stating who the coach helps and how.
- Conversion-focused calls to action.

Visual direction
Dark, bold and modern, with strong headline type and the course cards treated as solid objects against the background. Photography should feel personal rather than corporate.

Interaction & motion
Use Framer Motion for an entrance sequence that brings the headline, personal visuals and course cards in with staggered timing, plus interactive hover states on the course cards. lucide-react supplies supporting icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion and lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Glow Button

- Slug: `jiro-glow-button`
- Page: https://landingpageprompts.com/prompts/jiro-glow-button
- Effect: A premium glassmorphic pill button with magnetic hover effects and pink aura glow. Features 3D tilt transforms, mouse-tracking border highlights, spring physics animations, and an 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,585; total with repair and cross-check: 27,585
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Glow Button". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button component for a modern website: "Glow Button".

Purpose
Deliver a premium, tactile primary action: a glassmorphic pill button that reacts to the cursor and feels physically connected to it.

Layout & content
- A single pill-shaped button with a short label.
- A dark section wrapper with a subtle grid background and a vignette overlay so the button can be judged in context.
- No supporting copy is supplied, so leave the surrounding area empty apart from the backdrop.

Visual direction
Dark theme, glassmorphism and 3D depth: a frosted translucent pill with a fine light border, a pink aura glow, and an external bloom that trails the cursor. Keep the grid lines and vignette very low contrast.

Interaction & motion
Framer Motion with spring physics: magnetic hover that pulls the button toward the cursor, 3D tilt transforms, mouse-tracking border highlights, and an external bloom aura following pointer movement.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Glow Color

- Slug: `jiro-glow-color`
- Page: https://landingpageprompts.com/prompts/jiro-glow-color
- Effect: A customizable glow button with configurable glow color prop. Features radial gradient glow effect, animated border glow, box shadow expansion on hover, and smooth Framer Motion tr
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,968; total with repair and cross-check: 30,968
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Glow Color". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button section for a modern website: "Glow Color".

Purpose
Provide a reusable call-to-action button whose glow can be themed per instance. It is a small UI component meant to be dropped into dark sections wherever a primary action needs extra emphasis.

Layout & content
- A single button element with a configurable glow colour prop.
- A radial gradient glow rendered behind the button surface.
- An animated border glow tracing the button edge.
- A label slot for the button text, with sensible default padding and radius.

Visual direction
Dark and gradient-driven, with the glow as the only strong colour so the button reads as luminous against a dark section. The glow colour should accept any hex value passed by the caller.

Interaction & motion
On hover, expand the box shadow and animate the border glow with smooth Framer Motion transitions, then return to the resting state on mouse leave.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the hover and glow transitions.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Header 02 Pixa

- Slug: `jiro-header-02-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-header-02-pixa
- Effect: A modern AI agent SaaS header with sticky sidebar icon navigation (4 tabs with tooltips), animated image swap on tab change, large headline, review ratings row (Google, Trustpilot,
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 32,594; total with repair and cross-check: 32,594
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Header 02 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header hero section for a modern website: "Header 02 Pixa".

Purpose
Open an AI agent SaaS landing page with a tabbed product tour. The hero shows the product through switchable previews while collecting email signups and reinforcing trust.

Layout & content
- A sticky sidebar icon navigation with four tabs, each showing a tooltip on hover.
- A large headline beside an image panel that swaps when the active tab changes.
- A review ratings row referencing Google, Trustpilot and G2 as given.
- An email input form with a mail icon, plus dual CTA buttons: a primary dark button and a secondary button with a play icon.
- An avatar stack with a rating, and a trusted brand logo bar divided by vertical rules.

Visual direction
Light, minimal and modern, set in Inter Tight. Keep the sidebar icons quiet and the preview panel brightest.

Interaction & motion
Blur-up entrance animations, AnimatePresence image transitions on tab change, and hover tooltips on the sidebar tabs.

Stack
- React functional component + Tailwind CSS.
- framer-motion for blur-up reveals and AnimatePresence transitions.
- lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Header 02 Solra

- Slug: `jiro-header-02-solra`
- Page: https://landingpageprompts.com/prompts/jiro-header-02-solra
- Effect: A modern agency hero section with editorial typography, project case study preview, and refined neutral palette. Built for design agencies, creative studios, and portfolio-driven b
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 44,645; total with repair and cross-check: 44,645
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Header 02 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Header 02 Solra".

Purpose
Open a design agency site with an editorial hero that leads straight into proof of work. Built for design agencies, creative studios and portfolio-driven brand sites.

Layout & content
- Editorial hero headline in large type with a short supporting line.
- A project case study preview presented as the hero's visual anchor.
- A brand logo row for client or partner marks.
- A marquee band carrying logos or short phrases.
- A video element within the hero.
- A small row of animated numbers for headline figures.

Visual direction
Light and elegant: a refined neutral palette, strong editorial typography, and imagery treated with restraint so the type stays dominant.

Interaction & motion
Animate the numbers as counters, scroll the logo marquee continuously, and reveal the hero elements with staggered entrance animation.

Stack
- React functional component + Tailwind CSS.
- motion for entrance, counter and marquee animation.
- lucide-react for iconography.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Header 03 Pixa

- Slug: `jiro-header-03-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-header-03-pixa
- Effect: A sticky icon rail with hover tooltips runs down the left of this AI agent builder hero section, beside a tall dashboard card and a copy column that blur-fades in Google, Trustpilo
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 33,243; total with repair and cross-check: 33,243
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Header 03 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Header 03 Pixa".

Purpose
Open an AI agent builder page with a hero that shows the product surface, proves it is trusted, and offers an immediate way in, either by email or by watching a demo. For AI agent platforms and automation tools.

Layout & content
- A sticky icon rail down the left edge with hover tooltips for each icon.
- A tall dashboard card as the hero's main product visual.
- A copy column with a headline and supporting text, plus a trust row of rating logos that blur-fades in.
- An email capture field and a secondary demo action.

Visual direction
Light and minimal: the dashboard card is the visual centre of gravity, the icon rail stays slim and unobtrusive, and the trust row is understated rather than boastful.

Interaction & motion
Animated: the rating logos blur-fade in, the icon rail reveals tooltips on hover, and a video preview supports the hero.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the reveals and lucide-react for the rail and UI icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Header 04 Pixa

- Slug: `jiro-header-04-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-header-04-pixa
- Effect: Four clickable feature tabs slide a green underline beneath this centered AI creative suite header, swapping the shot inside a dark browser-style preview window with traffic-light 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 46,300; total with repair and cross-check: 46,300
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Header 04 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Header 04 Pixa".

Purpose
Introduce an AI creative suite by letting visitors flip through its four core capabilities from the hero itself, targeting AI image and video tools, design platforms and creative SaaS, where showing output matters more than describing it.

Layout & content
- A centered header block: headline, one supporting line and a call to action.
- Four clickable feature tabs sitting beneath the header copy.
- A green underline that slides beneath whichever tab is active.
- A dark browser-style preview window with traffic-light dots and a monospace title bar whose shot swaps with the selected tab.
- Small badges marking the active capability.

Visual direction
Light page with a minimal, typographic header against the dark browser window so the preview reads as a real product surface. The sliding underline is the single accent.

Interaction & motion
Clicking a tab slides the underline and crossfades the preview shot. lucide-react provides the small icons; active and hover tab states must be obvious.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Header 04 Solra

- Slug: `jiro-header-04-solra`
- Page: https://landingpageprompts.com/prompts/jiro-header-04-solra
- Effect: A premium agency hero with split-screen layout, project showcase imagery, and refined typography pairing. Suited for design studios, branding agencies, and case-study driven portfo
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,394; total with repair and cross-check: 23,394
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Header 04 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Header 04 Solra".

Purpose
Open a studio site with a hero that immediately demonstrates the quality of the work, pairing strong typography with project imagery. Suited for design studios, branding agencies, and case-study driven portfolio sites.

Layout & content
- A split-screen hero: one side carries the headline and supporting copy, the other shows project showcase imagery.
- Refined typography pairing used for the headline and supporting text.
- A clear entry point into the showcased work.
- Neutral placeholder project and studio copy.

Visual direction
Light, elegant, and photography-led: showcase imagery does the visual work while the type pairing stays refined and restrained. Generous space around the headline.

Interaction & motion
Use Framer Motion for the hero entrance, staggering the headline, supporting copy, and imagery, with a subtle parallax or scale on the showcase image. lucide-react supplies any small icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Hero 02 Moxo

- Slug: `jiro-hero-02-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-hero-02-moxo
- Effect: A clean SaaS hero with centered headline, product preview imagery, and conversion-focused CTAs. Designed for SaaS landing pages, product launches, and B2B software brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 34,876; total with repair and cross-check: 34,876
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Hero 02 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Hero 02 Moxo".

Purpose
This hero is the first thing a visitor sees on a SaaS landing page, product launch or B2B software site. It should state the product's promise immediately and give a clear next step without crowding the viewer.

Layout & content
- A centered headline as the primary statement.
- A short supporting line beneath it.
- Product preview imagery.
- Conversion-focused calls to action.

Visual direction
Light and elegant, with product photography as the hero visual. Keep the centred composition calm and symmetrical so the headline stays the focal point and the preview imagery feels like evidence rather than decoration.

Interaction & motion
Animate the headline, supporting copy, CTAs and preview imagery into view with framer-motion, and add light hover feedback on the buttons. Use lucide-react for any icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Hero 03 Moxo

- Slug: `jiro-hero-03-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-hero-03-moxo
- Effect: A product-led SaaS hero with feature screenshot, animated badge, and value-driven headline. Built for collaboration tools, project management apps, and team productivity platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 37,296; total with repair and cross-check: 37,296
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Hero 03 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Hero 03 Moxo".

Purpose
Lead with the product itself: show what the software looks like and state the value it delivers, for collaboration tools, project management apps and team productivity platforms.

Layout & content
- An animated badge above the headline carrying a short, neutral status or category label.
- A value-driven headline plus a supporting paragraph explaining the benefit.
- A feature screenshot presented as the hero visual, framed as a real product interface.
- Primary and secondary call to action buttons beneath the copy.
- Keep the copy block and screenshot in a balanced arrangement that collapses to a single column on small screens.

Visual direction
Light and elegant with photography-adjacent polish: a clean neutral field, confident headline weight, and the screenshot as the brightest, sharpest element on the page.

Interaction & motion
The badge, headline, paragraph and screenshot fade up in sequence on load, and the badge animates subtly to draw the eye. Motion is handled with Framer Motion; icons come from lucide-react.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Hero 05 Moxo

- Slug: `jiro-hero-05-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-hero-05-moxo
- Effect: A modern SaaS hero with product mockup preview, feature highlight badges, and dual CTA layout. Built for B2B software, productivity tools, and developer platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,909; total with repair and cross-check: 26,909
- Verification: 15/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Hero 05 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Hero 05 Moxo".

Purpose
Open a B2B software page with proof and product in the same view. The hero should show what the tool looks like, signal who already uses it, and offer two routes into the product.

Layout & content
- A product mockup preview as the centrepiece.
- Feature highlight badges calling out key capabilities.
- A marquee of brand logos.
- An avatar row suggesting existing users.
- Dual call-to-action buttons.

Visual direction
Light, modern and clean. The mockup carries the detail, the badges stay small and secondary, and the logo marquee runs as a quiet strip rather than a banner.

Interaction & motion
Use Framer Motion for the entrance reveal, and animate the brand logo marquee continuously with a pause on hover. Avatars can stagger in with the rest of the hero.

Stack
- React functional component + Tailwind CSS.
- framer-motion and lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it Works 01 Halo

- Slug: `jiro-how-it-works-01-halo`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-01-halo
- Effect: A nutrition process section with step cards, healthy imagery, and outcome-focused copy. Built for nutrition apps, meal planning tools, and wellness coaching platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 36,824; total with repair and cross-check: 36,824
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it Works 01 Halo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it Works 01 Halo".

Purpose
Explain a nutrition programme as a short, ordered process so a prospective member understands what happens at each stage and what they get out of it. Built for nutrition apps, meal planning tools and wellness coaching platforms.

Layout & content
- A section heading and a brief introductory line.
- Step cards, one per stage, each with a step number, a title and a short description.
- Healthy lifestyle imagery supporting the steps.
- Outcome-focused copy stating the result of each step rather than the feature.

Visual direction
Light, minimal and modern: airy spacing, soft rounded cards, consistent image treatment, and restrained typography that keeps the sequence easy to follow.

Interaction & motion
Framer Motion for staggered step-card entrances as the section scrolls into view, with a light hover state on each card.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it works 01 Kelo

- Slug: `jiro-how-it-works-01-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-01-kelo
- Effect: An AI process section with step cards, workflow diagram, and automation-focused narrative. Built for AI platforms, intelligent agents, and AI-powered SaaS products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,653; total with repair and cross-check: 25,653
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it works 01 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it works 01 Kelo".

Purpose
Explain the process an AI platform or intelligent agent follows, so visitors understand how the product works before they evaluate it. The narrative should stay automation-focused and describe the flow from input to outcome.

Layout & content
- Step cards, each covering one stage of the process with a title and short description.
- A workflow diagram connecting the steps visually.
- A section heading and supporting line framing the automation narrative.
- A grid layout keeping the steps aligned and scannable, collapsing to a single column on small screens.

Visual direction
Light, minimal and orderly, with numbered or icon-led step markers and restrained accents so the workflow diagram reads clearly against the page.

Interaction & motion
Animate each step card into view in sequence as the section scrolls, and let the connecting workflow line draw or fade in behind them.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the sequenced reveals, lucide-react for step icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it Works 01 Luma

- Slug: `jiro-how-it-works-01-luma`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-01-luma
- Effect: An AI process section with step-by-step generation flow, output visuals, and creator-focused copy. Built for AI media tools, video platforms, and generative AI products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 42,084; total with repair and cross-check: 42,084
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it Works 01 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it Works 01 Luma".

Purpose
Explain the generation flow of an AI media tool so creators understand what happens between input and output. It targets AI media tools, video platforms and generative AI products.

Layout & content
- A section heading framing the process.
- A numbered step-by-step sequence covering the generation flow from prompt or upload to result.
- Output visuals beside or beneath the steps, showing what each stage produces.
- Creator-focused copy that keeps the language practical rather than technical.

Visual direction
Dark, futuristic and colourful, using gradients to distinguish stages. Keep step markers crisp and the output visuals the most saturated elements.

Interaction & motion
Animated reveals per step, with progress or highlight motion that walks the viewer along the flow.

Stack
- React functional component + Tailwind CSS.
- framer-motion for step reveals and progress motion.
- lucide-react for step icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it Works 01 Orbit

- Slug: `jiro-how-it-works-01-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-01-orbit
- Effect: A coaching process section with step cards, methodology breakdown, and outcome-focused narrative. Designed for coaches, course creators, and personal development brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 14,908; total with repair and cross-check: 14,908
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it Works 01 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it Works 01 Orbit".

Purpose
Explain a coaching process step by step so a prospective client can picture the engagement before enquiring. Designed for coaches, course creators and personal development brands.

Layout & content
- Section heading naming the process.
- Step cards, one per stage of the engagement.
- A methodology breakdown that explains what happens at each step.
- Outcome-focused narrative copy tying the steps to the result.

Visual direction
Light and minimal with a clear grid: even card sizing, quiet borders, and typographic hierarchy that makes the step order obvious.

Interaction & motion
Reveal the step cards in sequence with staggered entrance animation as the section enters the viewport.

Stack
- React functional component + Tailwind CSS.
- framer-motion for staggered entrance animation.
- lucide-react for step icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How It Works 01 Pixa

- Slug: `jiro-how-it-works-01-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-01-pixa
- Effect: A clean, light-themed "How It Works" section featuring a 2-column layout with clickable step cards on the left (3 steps with numbered indicators showing pending/active/completed st
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 40,407; total with repair and cross-check: 40,407
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How It Works 01 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How It Works 01 Pixa".

Purpose
Walk a visitor through a three-step process in a way they can drive themselves, clicking each step to see what happens, so the product feels concrete before signup.

Layout & content
- A two-column layout: clickable step cards on the left, a preview image panel on the right.
- Three steps, each with a numbered indicator reflecting pending, active and completed states.
- An animated conic gradient spinner marking the active step.
- A tip callout with a green left border beneath the steps.

Visual direction
Light and minimal, set in Inter Tight: neutral surfaces, restrained type, and a green accent used for the active step, the spinner and the tip border.

Interaction & motion
Animated and interactive: clicking a step card advances the state and swaps the preview panel with an AnimatePresence transition, and scroll-triggered reveals use useInView.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the transitions, spinner and scroll animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it Works 02 Halo

- Slug: `jiro-how-it-works-02-halo`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-02-halo
- Effect: A health journey section with numbered steps, lifestyle imagery, and benefit-focused narrative. Designed for wellness apps, fitness platforms, and health-focused services.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,386; total with repair and cross-check: 23,386
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it Works 02 Halo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it Works 02 Halo".

Purpose
Walk someone through the steps of a health journey so the process feels simple and achievable. It is designed for wellness apps, fitness platforms and health-focused services whose visitors want to know what happens after they sign up.

Layout & content
- A section intro: headline and one supporting line framing the journey.
- Numbered steps, each with a step number, a short title and a benefit-focused description.
- Lifestyle imagery paired with the steps to show the journey in context.
- A benefit-focused narrative running alongside the steps rather than a bare list.

Visual direction
Light and minimal with a modern, calm feel: airy spacing, restrained type, and photography that stays natural rather than glossy. Numbers carry the sequence; everything else stays quiet.

Interaction & motion
Steps reveal in order on scroll with a short fade and rise, and imagery follows with a gentle parallax or fade. Framer Motion handles the entrances; keep them subtle.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it Works 02 Kelo

- Slug: `jiro-how-it-works-02-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-02-kelo
- Effect: An AI workflow section with three-step process, prompt-to-output visuals, and creator-focused copy. Suited for AI generation tools, content AI, and creative platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,982; total with repair and cross-check: 30,982
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it Works 02 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it Works 02 Kelo".

Purpose
Show how an AI generation tool turns input into output, making the process feel simple and repeatable. Suited for AI generation tools, content AI, and creative platforms.

Layout & content
- A three-step process presented as a grid of steps.
- Prompt-to-output visuals illustrating what happens at each step.
- Creator-focused copy explaining each step.
- Neutral placeholder step titles and descriptions.

Visual direction
Light, minimal, and modern: a clean surface with each step given equal weight, and the prompt-to-output visuals kept simple and legible.

Interaction & motion
Animate the steps with Framer Motion as they enter the viewport, staggering each one in sequence, and add interactive hover states on each step card. lucide-react supplies the step icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it Works 02 Luma

- Slug: `jiro-how-it-works-02-luma`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-02-luma
- Effect: An AI media workflow section with step cards, generation preview, and creator-driven narrative. Suited for AI video tools, content generation, and creative AI platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,634; total with repair and cross-check: 27,634
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it Works 02 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it Works 02 Luma".

Purpose
This section explains how an AI media workflow operates, for creators using AI video tools, content generation services or creative AI platforms. It should turn the process into a short, legible sequence that ends in a visible result.

Layout & content
- A grid of step cards walking through the workflow.
- A generation preview showing the output.
- Creator-driven narrative copy tying the steps together.

Visual direction
Dark and minimal, with the generation preview as the single hero visual. Keep the step cards uniform and the type quiet so the sequence reads in order at a glance.

Interaction & motion
Animate the step cards and preview in sequence with framer-motion, so the motion reinforces the order of the workflow.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How It Works 02 Pixa

- Slug: `jiro-how-it-works-02-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-02-pixa
- Effect: A clean, light-themed 2-column "How It Works" section featuring a sticky left column with headline, description, green "Get started" CTA link with ArrowUpRight icon, avatar stack s
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,370; total with repair and cross-check: 25,370
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How It Works 02 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How It Works 02 Pixa".

Purpose
Walk a visitor through the process step by step, pairing a sticky persuasive column with an ordered stepper so getting started feels simple.

Layout & content
- A two-column layout: a sticky left column and a scrolling right column.
- Left column: headline, supporting description, a green "Get started" link with an ArrowUpRight icon, and an avatar stack as social proof.
- Right column: a vertical stepper whose circles mark the active step with a green border and ring shadow.
- Animated green line connectors linking the steps in sequence.
- Copy set in Inter Tight, with a green accent.

Visual direction
Clean and light with minimal decoration: generous whitespace, one green accent, and clear active versus inactive step states. Avatars shift from grayscale to colour on hover.

Interaction & motion
Text slides in horizontally as each step enters view, the connecting line animates between steps, and step states update with scroll using Framer Motion.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it Works 03 Velara

- Slug: `jiro-how-it-works-03-velara`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-03-velara
- Effect: An AI process showcase with numbered steps, workflow preview, and capability-focused narrative. Suited for AI platforms, automation SaaS, and intelligent software products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,267; total with repair and cross-check: 28,267
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it Works 03 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it Works 03 Velara".

Purpose
Make an AI product's process legible in a few steps. The section should turn an abstract pipeline into an ordered sequence a visitor can follow, supported by a preview of the workflow itself.

Layout & content
- Numbered steps presented in order.
- A workflow preview showing the process inside the product.
- Capability-focused narrative copy explaining what happens at each stage.
- A dashboard preview showing the result of the process.

Visual direction
Dark, minimal and modern. Use the numbered markers as the only strong accent, keeping surfaces flat and typography quiet so the sequence reads clearly.

Interaction & motion
Use Framer Motion to reveal the steps in sequence as the section scrolls, and to bring the workflow and dashboard previews in with a slight rise. lucide-react can mark each step.

Stack
- React functional component + Tailwind CSS.
- framer-motion and lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it Works 04 Kelo

- Slug: `jiro-how-it-works-04-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-04-kelo
- Effect: An AI workflow section with numbered steps, automation preview, and benefit-driven copy. Designed for AI platforms, intelligent agents, and workflow automation tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 32,057; total with repair and cross-check: 32,057
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it Works 04 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it Works 04 Kelo".

Purpose
Show how an AI automation platform works in practice: the numbered stages a user moves through, with a preview of the automation doing the work. Designed for AI platforms, intelligent agents and workflow automation tools.

Layout & content
- A section heading and a short supporting line.
- Numbered steps presented in sequence, each with a title and a benefit-driven description.
- An automation preview panel or clip demonstrating the workflow.
- Copy written around the benefit of each step rather than the mechanics.

Visual direction
Light and minimal: a clear numeric marker for each step, generous spacing, and a single accent for the active step. The preview sits in a clean framed panel.

Interaction & motion
Framer Motion for step-by-step reveals tied to scroll position, plus interactive hover states on each step and on the preview.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it works 04 Velara

- Slug: `jiro-how-it-works-04-velara`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-04-velara
- Effect: An AI process section with workflow node visuals, automation steps, and benefit-driven narrative. Built for AI agents, automation platforms, and intelligent workflow tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,506; total with repair and cross-check: 19,506
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it works 04 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it works 04 Velara".

Purpose
Show how an AI agent or automation platform operates, in a dark, interactive format that keeps visitors engaged through the explanation. The copy should tie each step back to a benefit rather than describing mechanics for their own sake.

Layout & content
- Workflow node visuals representing each stage of the automation.
- Step-by-step automation descriptions paired with the nodes.
- An accordion so visitors can open one step at a time and read the detail.
- A benefit-driven narrative line tying the process to the outcome.

Visual direction
Dark and minimal, with the node visuals providing the only strong contrast and subtle connectors implying flow between the steps.

Interaction & motion
Make the accordion steps interactive, animating panels open and closed, and highlight the active node so the current step is always clear.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the accordion and node transitions, lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it Works 05 Halo

- Slug: `jiro-how-it-works-05-halo`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-05-halo
- Effect: A wellness process section with step-by-step health journey visuals, soft imagery, and motivational copy. Built for nutrition apps, fitness platforms, and wellness brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 60,692; total with repair and cross-check: 60,692
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it Works 05 Halo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it Works 05 Halo".

Purpose
Walk a wellness audience through a step-by-step health journey, for nutrition apps, fitness platforms and wellness brands. The tone should feel supportive and motivating rather than clinical.

Layout & content
- A heading that introduces the journey.
- A numbered sequence of steps describing the path a user follows.
- Soft imagery supporting each stage of the journey.
- Short motivational copy accompanying the steps.

Visual direction
Dark, minimal and modern, with soft imagery that contrasts gently against the dark background. Use restrained type and calm spacing so the sequence reads in order.

Interaction & motion
Animated reveals as each step enters the viewport, with subtle transitions on the supporting imagery.

Stack
- React functional component + Tailwind CSS.
- framer-motion for step and image reveals.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it Works 05 Velara

- Slug: `jiro-how-it-works-05-velara`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-05-velara
- Effect: An AI workflow section with step-by-step automation visuals, prompt-to-output flow, and developer-focused copy. Suited for AI platforms, automation tools, and intelligent SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 33,147; total with repair and cross-check: 33,147
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it Works 05 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it Works 05 Velara".

Purpose
Show developers how an AI workflow turns an input into an output, step by step, so the automation feels concrete. Suited for AI platforms, automation tools and intelligent SaaS.

Layout & content
- Section heading framing the workflow.
- Step-by-step automation visuals, one per stage.
- A prompt-to-output flow that makes the transformation explicit.
- Developer-focused copy describing what each step does.
- A supporting video or motion visual for the flow.

Visual direction
Dark, minimal and modern: deep surfaces, one bright accent to trace the flow, and monospaced-feeling detail where code or prompts are implied.

Interaction & motion
Animate each stage in sequence so the flow reads left to right, and add hover detail on individual steps.

Stack
- React functional component + Tailwind CSS.
- framer-motion for step sequencing and entrance animation.
- lucide-react for step icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it works Creation.AI

- Slug: `jiro-how-it-works-creationai`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-works-creationai
- Effect: A light, rail-framed AI thumbnail how it works section with three alternating steps and clickable mock demos: a draft type switcher with an upload bar, a laser scan with pulsing he
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 32,404; total with repair and cross-check: 32,404
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it works Creation.AI". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it works Creation.AI".

Purpose
Show how an AI thumbnail tool works through three alternating steps, each with a clickable mock demo of the workflow. For AI design tools, CTR analytics apps and video editors.

Layout & content
- A light section framed by a rail along the edges of the content column.
- Three alternating steps, with text and demo swapping sides down the page.
- Step one: a draft type switcher with an upload bar.
- Step two: a laser scan over imagery with pulsing heatmaps.
- Step three: a desktop or mobile feed preview of the finished result.

Visual direction
Light, minimal and product-led: the mock demos carry the detail, the surrounding frame stays plain, and status details read as small quiet labels.

Interaction & motion
Interactive: each mock demo responds to clicks, the switcher and upload bar animate, the scan sweeps across with pulsing heatmaps, and the feed preview toggles between desktop and mobile.

Stack
- React functional component + Tailwind CSS.
- lucide-react for icons inside the mock demos.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## How it Wroks 01 Velara

- Slug: `jiro-how-it-wroks-01-velara`
- Page: https://landingpageprompts.com/prompts/jiro-how-it-wroks-01-velara
- Effect: An AI process section with step cards, prompt-to-result visuals, and creator-focused narrative. Designed for AI generation tools, content platforms, and creative AI products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,994; total with repair and cross-check: 19,994
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "How it Works" block called "How it Wroks 01 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a How it Works section for a modern website: "How it Wroks 01 Velara".

Purpose
Explain how an AI generation tool turns an input into a finished result, for creators using content platforms and creative AI products. The section should make the process feel fast and repeatable.

Layout & content
- A section intro with a headline and one supporting line written for creators.
- Step cards, each holding a step number, a title and a short explanation of that stage.
- Prompt-to-result visuals inside the cards, pairing an input with the output it produces.
- A creator-focused narrative line that ties the steps into one flow.

Visual direction
Dark and minimal with a modern feel: quiet card surfaces, restrained type, and visuals that show the actual input and output rather than abstract shapes. Sequence comes from numbering and spacing.

Interaction & motion
Step cards animate in on scroll with a short stagger, and the prompt-to-result visuals transition as each card enters view. Framer Motion drives the motion; lucide-react supplies the step icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Human Synthesis Header - The World

- Slug: `jiro-human-synthesis-header-the-world`
- Page: https://landingpageprompts.com/prompts/jiro-human-synthesis-header-the-world
- Effect: A particle cyber mask gives way to a brain, a bone, and a skull across a long scroll in this black human anatomy hero section, where points recolor cyan to red to violet and scatte
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 71,435; total with repair and cross-check: 71,435
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Human Synthesis Header - The World". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Human Synthesis Header - The World".

Purpose
Carry visitors through a black human anatomy hero where a particle cyber mask transforms into a brain, a bone, and a skull across a long scroll, each stage introducing its own headline. Suiting biotech, medical AI, and experimental tech sites.

Layout & content
- A full-height dark hero built around a particle-rendered anatomy form.
- A long scroll sequence with distinct stages: mask, then brain, bone, and skull.
- A headline for each stage, changing as the sequence advances.
- Particle points that recolor across cyan, red, and violet, and scatter away from the cursor.

Visual direction
Dark, three-dimensional, and futuristic: a black field where the particle form is the only light source, with colour shifts doing the storytelling.

Interaction & motion
Scroll drives the stage progression and morphing between anatomy forms; cursor proximity scatters nearby points. Keep the animation smooth and the headlines synchronized to each stage.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Integration 01 Kelo

- Slug: `jiro-integration-01-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-integration-01-kelo
- Effect: An AI integrations section with partner logo cards, connection diagram, and automation-driven messaging. Designed for AI agents, workflow automation, and intelligent SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,134; total with repair and cross-check: 28,134
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Integration" block called "Integration 01 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an Integration section for a modern website: "Integration 01 Kelo".

Purpose
This section shows which tools an AI agent or workflow automation platform connects to. It should reassure a technical buyer that the product fits into the stack they already use.

Layout & content
- A grid of partner logo cards.
- A connection diagram showing how things link together.
- Automation-driven messaging explaining what the connections enable.

Visual direction
Light and minimal, with brand logos treated as the primary graphic material. Keep the logo grid evenly weighted and the diagram clean and uncluttered so the relationships read instantly.

Interaction & motion
Use framer-motion to stagger the logo grid into view and to animate the connection diagram's lines or nodes; keep logo hover states understated.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Integration 01 Luma

- Slug: `jiro-integration-01-luma`
- Page: https://landingpageprompts.com/prompts/jiro-integration-01-luma
- Effect: An AI media integrations section with logo grid, connection diagram, and creator-driven messaging. Suited for AI video, audio, and content generation platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 40,123; total with repair and cross-check: 40,123
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Integration" block called "Integration 01 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an Integration section for a modern website: "Integration 01 Luma".

Purpose
Show that an AI media product fits the tools creators already use, and explain how those connections work. Suited to AI video, audio and content generation platforms.

Layout & content
- A section header with a headline and creator-driven messaging in one supporting line.
- A grid of integration logo cards, each holding a placeholder brand mark and the integration name.
- A connection diagram illustrating how the product links to surrounding tools, drawn from simple nodes and connectors.
- A short explanatory paragraph describing what becomes possible once connected.
- A closing call to action to browse all integrations.

Visual direction
Dark and modern on a structured grid: evenly sized logo cards, restrained borders, and the connection diagram as the visual centrepiece. Logo marks stay neutral placeholders.

Interaction & motion
Logo cards fade and rise in a stagger on scroll, and diagram connectors animate to suggest data flow, using Framer Motion.

Stack
- React functional component + Tailwind CSS.
- framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Integration 01 Velara

- Slug: `jiro-integration-01-velara`
- Page: https://landingpageprompts.com/prompts/jiro-integration-01-velara
- Effect: An AI integrations section with API partner logos, connection visuals, and developer-focused copy. Built for AI platforms, ML APIs, and intelligent software products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,106; total with repair and cross-check: 26,106
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Integration" block called "Integration 01 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an Integration section for a modern website: "Integration 01 Velara".

Purpose
Show a developer audience how easily an AI product connects to the tools they already use. The section should make the breadth of integrations obvious at a glance and give enough detail for an engineer to judge the fit.

Layout & content
- A grid of API partner logos.
- Connection visuals suggesting how the product links to each service.
- Developer-focused copy covering what an integration enables.
- Neutral placeholder labels where no real text is supplied.

Visual direction
Dark, minimal and modern. Keep the logo grid on a quiet surface with even spacing, and let the connection visuals supply the only ornamentation.

Interaction & motion
Use Framer Motion for staggered logo reveals on scroll and a subtle hover response per tile that hints at a live connection.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Integration 02 Kelo

- Slug: `jiro-integration-02-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-integration-02-kelo
- Effect: An AI integrations section with logo grid, automation workflow visuals, and developer-focused copy. Built for AI platforms, automation tools, and intelligent integrations.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 65,663; total with repair and cross-check: 65,663
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Integration" block called "Integration 02 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an Integration section for a modern website: "Integration 02 Kelo".

Purpose
Reassure technical buyers that the AI platform connects to the tools they already run, and show how those connections feed an automated workflow. Built for AI platforms, automation tools and intelligent integrations.

Layout & content
- A section heading and developer-focused supporting copy.
- A logo grid of integration partners, rendered as neutral placeholder marks rather than real brand names.
- Automation workflow visuals showing data moving between connected tools.
- A short line inviting developers to connect or build further.

Visual direction
Light and minimal: an even logo grid with consistent mark sizing, quiet borders, and enough whitespace that the grid reads as a system rather than a list.

Interaction & motion
Framer Motion drives a marquee that scrolls the logo row continuously, slowing or pausing on hover, plus a reveal for the workflow visuals.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Integration 02 Luma

- Slug: `jiro-integration-02-luma`
- Page: https://landingpageprompts.com/prompts/jiro-integration-02-luma
- Effect: An AI media integrations section with partner logos, workflow visuals, and creator-focused copy. Built for AI video tools, content platforms, and creative AI integrations.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,203; total with repair and cross-check: 28,203
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Integration" block called "Integration 02 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build an Integration section for a modern website: "Integration 02 Luma".

Purpose
Show creators which tools an AI media or video platform connects with, and how those connections fit into a production workflow. The copy should speak to creative users rather than to engineers.

Layout & content
- A grid of partner logos representing the available integrations.
- Workflow visuals showing where integrations sit in the creative process.
- Creator-focused copy explaining what each connection enables.
- A section heading and supporting line framing the integrations.

Visual direction
Dark, minimal and grid-driven, with logos kept monochrome or low-contrast so the grid stays even and no single partner dominates the layout.

Interaction & motion
Animate the logo grid in on scroll, and give each tile a subtle hover response that brings the partner mark forward.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Jelly Explore Button

- Slug: `jiro-jelly-explore-button`
- Page: https://landingpageprompts.com/prompts/jiro-jelly-explore-button
- Effect: An indigo pill button labeled Explore, where an SVG gooey filter lets a spring-driven blob trail the cursor and pull out of the button body on hover, above a soft blurred shadow, w
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,136; total with repair and cross-check: 31,136
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Jelly Explore Button". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button component for a modern website: "Jelly Explore Button".

Purpose
Provide a playful primary action for hero CTAs, product pages and creative portfolios. The button is labelled Explore and its character comes from a gooey, spring-driven blob that reacts to the pointer.

Layout & content
- A single indigo pill button with the label Explore.
- An SVG gooey filter applied so the blob merges visually with the button body.
- A soft blurred shadow beneath the pill to ground it.
- No supporting text, icons or secondary actions.

Visual direction
Light, playful and tactile. Solid indigo pill, soft shadow, and a blob shape that reads as part of the button rather than a separate decoration.

Interaction & motion
On hover, a spring-driven blob trails the cursor and pulls out of the button body through the gooey filter. On click, the pill squashes and springs back.

Stack
- React functional component + Tailwind CSS.
- react (no additional animation or icon library required).

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Juice Ecommerce Header - Strip

- Slug: `jiro-juice-ecommerce-header-strip`
- Page: https://landingpageprompts.com/prompts/jiro-juice-ecommerce-header-strip
- Effect: Three frosted ingredient cards line up opposite a five-line condensed headline in this black juice hero section, over a full-bleed drink video and a soft peach glow, with a navbar 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,987; total with repair and cross-check: 28,987
- Verification: 19/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Juice Ecommerce Header - Strip". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Juice Ecommerce Header - Strip".

Purpose
Introduce a beverage brand with a bold, high-contrast hero that puts the product and its ingredients front and centre. Ideal for beverage brands, energy drink startups and wellness shops.

Layout & content
- Full-bleed background drink video filling the hero.
- A five-line condensed headline as the dominant type element.
- Three frosted ingredient cards lined up opposite the headline.
- A navbar that shrinks into a blurred bar once the visitor scrolls.
- A soft peach glow behind the composition for depth.

Visual direction
Dark, colourful and bold: black base, condensed heavy type, frosted glass cards, and a warm peach glow that lifts the product out of the background.

Interaction & motion
Animate the ingredient cards in on load, keep the background video looping, and transition the navbar into its compact blurred state on scroll.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance and scroll-driven navbar animation.
- lucide-react for navigation icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Left to Right Scan

- Slug: `jiro-left-to-right-scan`
- Page: https://landingpageprompts.com/prompts/jiro-left-to-right-scan
- Effect: A glassmorphism button with animated scanner bar effect. Features a glowing cyan vertical line that sweeps left to right, revealing neon text through clipPath animation. Includes c
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 48,300; total with repair and cross-check: 48,300
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Left to Right Scan". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button component for a modern website: "Left to Right Scan".

Purpose
Deliver a single high-impact CTA for a futuristic interface: a glass button whose scanner bar sweeps across and reveals neon text. Suited to dark, sci-fi or cyber-styled products.

Layout & content
- A glassmorphism button with a text label.
- A glowing cyan vertical scanner line that sweeps from left to right.
- Text revealed through a clipPath animation as the scan passes.
- A cyber grid background pattern behind the button, plus hover and active states.

Visual direction
Dark, neon and futuristic: a deep background, backdrop blur on the glass surface, a glowing cyan scan line, and grid texture faint enough not to compete with the label.

Interaction & motion
Animated and interactive: the scan runs on a loop or on hover, clipPath reveals the neon label, and the hover and press states change the glow intensity.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the scan and clipPath animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Light Beam Button

- Slug: `jiro-light-beam-button`
- Page: https://landingpageprompts.com/prompts/jiro-light-beam-button
- Effect: A futuristic pill button with animated rotating conic gradient border creating a light beam effect. Features CSS @property animations, dot matrix pattern overlay, inner shimmer rot
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 32,300; total with repair and cross-check: 32,300
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Light Beam Button". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button component for a modern website: "Light Beam Button".

Purpose
Deliver a single high-impact call to action that looks like futuristic hardware. It suits dark interfaces where one button should draw the eye without surrounding content.

Layout & content
- A single pill-shaped button with a short label and an optional trailing icon.
- A rotating conic gradient border around the pill that reads as a travelling light beam.
- A dot matrix pattern overlaid on the button surface.
- An inner shimmer that rotates continuously inside the pill.
- A soft blue glow sitting ambient behind the button.

Visual direction
Dark, neon and futuristic: the surface stays near-black so the beam, shimmer and glow carry all the light. The pill shape, crisp border and dot matrix give it a machined, technical feel.

Interaction & motion
The border spins continuously using CSS @property animations, the inner shimmer rotates on its own loop, and pressing the button produces a smooth active press state. Hover should intensify the glow rather than change the layout.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Liquid Glass

- Slug: `jiro-liquid-glass`
- Page: https://landingpageprompts.com/prompts/jiro-liquid-glass
- Effect: Mouse or touch drags this glassmorphism pill button across a full-bleed photo, where an SVG displacement map bends the image behind it under a white top edge and a hint line offers
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 45,894; total with repair and cross-check: 45,894
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Liquid Glass". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button section for a modern website: "Liquid Glass".

Purpose
Deliver a draggable glassmorphism control that demonstrates refraction over a photograph, for interfaces where the image itself is the product. Built for media players, photo galleries, and image-led hero sections.

Layout & content
- A full-bleed photo as the surface.
- A glassmorphism pill button that sits on top of the photo.
- An SVG displacement map that bends the image behind the pill.
- A white top edge on the glass and a hint line explaining the double-click reset.
- Four presets controlling the button's appearance.

Visual direction
Light, minimal, and modern, with the glass effect as the single focal detail. The photo stays full-bleed and untouched outside the refraction area.

Interaction & motion
Mouse or touch drags the pill across the photo, with the displacement bending the image live as it moves. Double-clicking resets the button to its starting position.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required beyond React.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Metal Button

- Slug: `jiro-metal-button`
- Page: https://landingpageprompts.com/prompts/jiro-metal-button
- Effect: A premium skeuomorphic pill button with animated prismatic rainbow border gradient. Features metallic white-to-gray gradient background, smooth hover lift and active press states, 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,008; total with repair and cross-check: 26,008
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Metal Button". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button component for a modern website: "Metal Button".

Purpose
This is a premium, skeuomorphic pill button intended for hero calls to action and premium landing pages. It should feel like a physical object the visitor can press, not a flat web control.

Layout & content
- A single pill-shaped button with a short label.
- A metallic white-to-gray gradient surface across the button face.
- A layered shadow arrangement beneath the surface to give it depth.
- A prismatic rainbow border wrapping the button edge.

Visual direction
Light, dimensional and gradient-led. The metal face should read as a solid material with a believable edge highlight, and the rainbow border should sit on the rim as a continuous band rather than a glow.

Interaction & motion
Keep the rainbow border animating continuously. On hover, lift the button slightly; on press, push it back down with a matching shadow change.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Mindfulness Landing Page Design - Solra

- Slug: `jiro-mindfulness-landing-page-design-solra`
- Page: https://landingpageprompts.com/prompts/jiro-mindfulness-landing-page-design-solra
- Effect: A complete landing page for health and wellness brands with a soft, mindful aesthetic. Includes a serene hero, benefits sections, program highlights, testimonials, pricing tiers, a
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,365; total with repair and cross-check: 26,365
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Health & Wellness" block called "Mindfulness Landing Page Design - Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Health & Wellness landing page for a modern website: "Mindfulness Landing Page Design - Solra".

Purpose
Present a complete wellness offer: the product's feel, what it provides, what participants say, what it costs and how to enrol. Built for wellness founders launching mindfulness apps, therapy platforms or holistic health products.

Layout & content
- A serene hero with a calm headline, supporting line and primary call to action.
- Benefits sections describing what the practice improves, as short titled points.
- Program highlights covering what the offering includes.
- A testimonials area with placeholder quotes and attribution.
- Pricing tiers side by side with their included features.
- Enrollment calls to action after the highlights and after pricing.
- An accordion for common questions, and a hero video background.

Visual direction
Light, minimal and elegant with a soft mindful aesthetic: airy spacing, gentle type, muted natural tones.

Interaction & motion
Sections fade and rise on scroll, accordion rows animate open, and the hero video loops muted. Motion stays slow and calm.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Neon Typing Button

- Slug: `jiro-neon-typing-button`
- Page: https://landingpageprompts.com/prompts/jiro-neon-typing-button
- Effect: A retro CRT-inspired button with typewriter text animation effect. Features scanline overlay, vignette effect, purple neon glow on hover, blinking block cursor, and smooth text tra
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,288; total with repair and cross-check: 24,288
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Neon Typing Button". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button component for a modern website: "Neon Typing Button".

Purpose
Deliver a small interactive control with a strong retro character. The button should make the label itself part of the experience by typing it out, then reacting clearly when the visitor hovers or activates it.

Layout & content
- A single button with a short text label.
- Idle and active label states, with a smooth transition between them.
- A blinking block cursor sitting at the end of the typed text.
- A dark backdrop with a horizontal stripe pattern behind the button.

Visual direction
Retro CRT: a scanline overlay and vignette across the surface, with a purple neon glow that intensifies on hover. Keep the label monospaced in feel so the typewriter effect reads correctly.

Interaction & motion
Use Framer Motion for the typewriter text animation, the blinking cursor and the smooth idle-to-active label transition. Hover triggers the neon glow, and the button must stay keyboard focusable with a visible focus state.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Nutrition-Health Hero 03 Halo

- Slug: `jiro-nutrition-health-hero-03-halo`
- Page: https://landingpageprompts.com/prompts/jiro-nutrition-health-hero-03-halo
- Effect: A wellness-focused hero with hydration tracking visuals, soft pastel palette, and lifestyle imagery. Designed for nutrition apps, wellness coaches, and holistic health programs.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 34,710; total with repair and cross-check: 34,710
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Nutrition-Health Hero 03 Halo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Nutrition-Health Hero 03 Halo".

Purpose
Open a wellness product page with a calm, aspirational hero that shows hydration tracking in context and speaks to people building healthier habits. Designed for nutrition apps, wellness coaches and holistic health programmes.

Layout & content
- A hero headline and short subtext about wellness and hydration.
- Hydration tracking visuals: a progress or intake display rendered as a product mockup.
- Lifestyle imagery supporting the wellness message.
- Primary and secondary calls to action.

Visual direction
Light with a soft pastel palette: gentle tints, rounded surfaces, low-contrast borders, and imagery that keeps the mood calm rather than clinical. Small lucide-react icons carry supporting detail.

Interaction & motion
Framer Motion for a soft hero entrance and a gentle animated state on the hydration tracking visuals, plus hover feedback on the buttons.

Stack
- React functional component + Tailwind CSS.
- framer-motion, lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Nutrition-Health Hero 04 Halo

- Slug: `jiro-nutrition-health-hero-04-halo`
- Page: https://landingpageprompts.com/prompts/jiro-nutrition-health-hero-04-halo
- Effect: A health platform hero with biometric data preview, supplement product imagery, and conversion-focused layout. Suited for wellness brands, vitamin retailers, and health coaching se
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,687; total with repair and cross-check: 27,687
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Nutrition-Health Hero 04 Halo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Nutrition-Health Hero 04 Halo".

Purpose
Open the page for a wellness brand, vitamin retailer or health coaching service. The hero must make the product offer clear while showing health data and product imagery, so visitors see both the promise and the product itself.

Layout & content
- A headline and supporting paragraph describing the health platform.
- Conversion-focused call-to-action buttons.
- A biometric data preview panel showing health readings.
- Supplement product imagery alongside the copy.
- A stats element supporting the product claims.

Visual direction
Light, minimal and modern, with clean product photography, soft surfaces and a calm palette that reads as health rather than clinical.

Interaction & motion
Animate the hero copy, product imagery and biometric preview in on load, and let the stats count up as they become visible.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the entrance and counter animation, lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Online AI Learning Platform Hero Orbit

- Slug: `jiro-online-ai-learning-platform-hero-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-online-ai-learning-platform-hero-orbit
- Effect: An online AI learning hero with course preview cards, instructor highlights, and enrollment CTAs. Built for e-learning platforms, AI bootcamps, and online education SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 78,624; total with repair and cross-check: 78,624
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Online AI Learning Platform Hero Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header hero section for a modern website: "Online AI Learning Platform Hero Orbit".

Purpose
Open an online AI learning platform with the course offering front and centre. It speaks to prospective students comparing e-learning platforms, AI bootcamps and online education SaaS.

Layout & content
- A headline and supporting line about learning AI with the platform.
- Course preview cards showing programme or lesson content.
- Instructor highlights that build credibility for the teaching.
- Enrollment call to action buttons placed with the headline and repeated near the preview.

Visual direction
Light, modern and minimal. Clean cards with clear hierarchy, generous white space and restrained accents so the course previews stay legible.

Interaction & motion
Animated entrance for the headline, cards and instructor highlights, plus hover states on the cards and the enrollment buttons.

Stack
- React functional component + Tailwind CSS.
- lucide-react for icons.
- No additional animation library is listed; Tailwind transitions or a small local animation are fine.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Online Store Manager AI Website Header

- Slug: `jiro-online-store-manager-ai-website-header`
- Page: https://landingpageprompts.com/prompts/jiro-online-store-manager-ai-website-header
- Effect: Dark cinematic hero header with looping background video (HLS + MP4 support), blur-up staggered entrance animations, dual CTA buttons with spring hover effects, live status badge w
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,874; total with repair and cross-check: 30,874
- Verification: 19/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Online Store Manager AI Website Header". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Online Store Manager AI Website Header".

Purpose
Open a SaaS or e-commerce product page with a cinematic hero that states the offer, shows momentum, and gives visitors two clear paths forward.

Layout & content
- Full-width hero with a looping background video, supporting both HLS and MP4 sources.
- Headline and supporting copy for the product.
- Dual CTA buttons, primary and secondary.
- A live status badge with a ping indicator.
- A social proof strip with avatars and five-star ratings.

Visual direction
Dark and cinematic with gradient light: deep background, soft glow behind the headline, and glassy surfaces for the badge and social proof strip.

Interaction & motion
Use blur-up staggered entrance animation for the hero elements, spring hover effects on the CTA buttons, and a pulsing ping on the live badge.

Stack
- React functional component + Tailwind CSS.
- framer-motion for staggered entrance and spring hover.
- lucide-react for icons.
- hls.js for HLS video playback with an MP4 fallback.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Online Yoga Programs Landing Page - Solra

- Slug: `jiro-online-yoga-programs-landing-page-solra`
- Page: https://landingpageprompts.com/prompts/jiro-online-yoga-programs-landing-page-solra
- Effect: A complete landing page for online yoga and fitness program platforms. Includes a class preview hero, program tiers, instructor showcase, testimonials, pricing plans, and signup CT
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 40,205; total with repair and cross-check: 40,205
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Health & Wellness" block called "Online Yoga Programs Landing Page - Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Health & Wellness landing page for a modern website: "Online Yoga Programs Landing Page - Solra".

Purpose
Present an online yoga and fitness programme end to end, so a visitor can understand the classes, the instructors, the plans and the signup path in one page. For fitness founders launching yoga studios, virtual training or wellness subscription products.

Layout & content
- A class preview hero introducing the programme, with a primary signup CTA.
- A program tiers block describing the levels or tracks on offer.
- An instructor showcase presenting the teachers.
- A testimonials section for social proof.
- A pricing plans block with signup CTAs.

Visual direction
Light, elegant and minimal: calm spacing, refined typography, soft imagery, and an accent used sparingly so the page feels serene rather than commercial.

Interaction & motion
Animated, with a marquee: the instructor or testimonial strip can scroll continuously, and sections fade in on scroll.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Personal Business Coach Hero Orbit

- Slug: `jiro-personal-business-coach-hero-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-personal-business-coach-hero-orbit
- Effect: A business coaching hero with coach profile visuals, testimonial preview, and consultation booking CTAs. Suited for executive coaches, business mentors, and personal development br
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,253; total with repair and cross-check: 26,253
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Personal Business Coach Hero Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Personal Business Coach Hero Orbit".

Purpose
Open a coaching site by putting the coach and their credibility in front of the visitor immediately. It is suited to executive coaches, business mentors and personal development brands, where booking a consultation is the goal.

Layout & content
- A hero headline and supporting line with consultation booking calls to action.
- Coach profile visuals: a portrait or profile block that identifies who is speaking.
- A testimonial preview giving a short taste of client experience.
- A marquee strip carrying supporting names or short phrases in continuous motion.

Visual direction
Light and elegant: airy composition, refined typography, and restrained surfaces so the coach's profile imagery leads. The marquee sits as a quiet band rather than a loud banner.

Interaction & motion
The marquee scrolls continuously, while hero content, profile visuals and the testimonial preview fade in on load. Use CSS or lightweight motion for the marquee and lucide-react for the small icons.

Stack
- React functional component + Tailwind CSS.
- npm install lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Personal Fitness Coach Hero Orbit

- Slug: `jiro-personal-fitness-coach-hero-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-personal-fitness-coach-hero-orbit
- Effect: A fitness coaching hero with trainer profile, transformation preview, and program enrollment CTAs. Designed for personal trainers, fitness coaches, and online workout programs.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,847; total with repair and cross-check: 25,847
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Personal Fitness Coach Hero Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Personal Fitness Coach Hero Orbit".

Purpose
Open a coaching site with a hero that establishes the trainer and shows real results, then routes visitors toward enrollment. Designed for personal trainers, fitness coaches, and online workout programs.

Layout & content
- A hero with a trainer profile element introducing the coach.
- A transformation preview showing before-and-after style results.
- Program enrollment CTAs as the primary action.
- Photography carrying the profile and transformation visuals.
- Neutral placeholder coach and program copy.

Visual direction
Bold, dark, and photography-led: high-contrast imagery, heavy headline weight, and a modern finish that feels energetic rather than clinical.

Interaction & motion
Animate the hero with Framer Motion: staggered entrance for headline, profile, transformation preview, and CTAs, with a subtle scale or parallax on the imagery. lucide-react supplies supporting icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 01 Kelo

- Slug: `jiro-pricing-01-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-01-kelo
- Effect: An AI pricing section with three-tier card layout, feature comparison rows, and conversion-focused CTAs. Designed for AI platforms, automation tools, and intelligent SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 39,635; total with repair and cross-check: 39,635
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 01 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 01 Kelo".

Purpose
This section helps a buyer choose a plan for an AI platform, automation tool or intelligent SaaS product. It should make the tiers comparable at a glance and move the visitor toward the plan that fits.

Layout & content
- A three-tier card layout.
- Feature comparison rows across the tiers.
- A monthly/yearly billing toggle.
- Conversion-focused calls to action on the cards.

Visual direction
Light and modern, with supporting imagery kept in a secondary role. Give the tier cards equal visual weight so the comparison stays honest, and let the selected billing period be obvious.

Interaction & motion
Animate card entrances and the toggle with a smooth transition when the billing period changes.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 01 Luma

- Slug: `jiro-pricing-01-luma`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-01-luma
- Effect: A flagship AI media pricing section with prominent tier cards, feature comparison, and conversion-focused CTAs. Built for AI video tools, content generation, and creative SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 29,382; total with repair and cross-check: 29,382
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 01 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 01 Luma".

Purpose
Turn interest in an AI media product into a plan selection by making tiers, differences and next steps unmistakable. Built for AI video tools, content generation and creative SaaS.

Layout & content
- A section header with a headline and one line framing how plans differ.
- Prominent tier cards, each with a plan name, placeholder price, a short description and a list of included features.
- One tier visually marked as the recommended choice.
- A feature comparison area showing what each plan includes side by side.
- Conversion-focused call to action buttons on every tier.
- Neutral placeholder plan names, prices and feature lines.

Visual direction
Dark, modern and futuristic with gradient accents: cards separated by light borders and subtle glow, with the recommended tier raised above the others. Gradient stays restrained so text remains legible.

Interaction & motion
Cards stagger into view on scroll, lift on hover, and CTA buttons animate on interaction using Framer Motion. Icons come from lucide-react.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 01 Orbit

- Slug: `jiro-pricing-01-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-01-orbit
- Effect: A flagship coaching pricing section with prominent tier cards, program comparison, and enrollment CTAs. Designed for coaches, course creators, and online education.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,994; total with repair and cross-check: 28,994
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 01 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 01 Orbit".

Purpose
Help a prospective client choose between coaching programmes. The section should make the tiers easy to compare, surface what each one includes, and route the visitor to enrolment.

Layout & content
- Prominent tier cards as the centrepiece.
- A monthly and yearly toggle that switches the displayed terms.
- A programme comparison showing how the tiers differ.
- Enrolment calls to action on the cards.
- Placeholder tier names and figures, since the description supplies none.

Visual direction
Dark, bold and modern. Give the cards strong presence with clear hierarchy inside each one, and keep the comparison area quiet so the tiers stay the focus.

Interaction & motion
Use Framer Motion to animate the toggle switch and the resulting content change, plus hover states on the cards. lucide-react supplies checkmarks and toggle icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion and lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy and placeholder figures where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 01 Solra

- Slug: `jiro-pricing-01-solra`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-01-solra
- Effect: A flagship agency pricing section with prominent tier cards, scope comparison, and editorial typography. Built for design studios, creative agencies, and brand consultancies.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,144; total with repair and cross-check: 28,144
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 01 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 01 Solra".

Purpose
Let a prospective client compare engagement levels at a glance and pick the right one. Written for design studios, creative agencies and brand consultancies that sell scoped work rather than seats.

Layout & content
- A section heading with editorial supporting copy.
- Prominent tier cards, each with a name, a short summary and its included scope.
- A scope comparison area so the tiers can be read against each other.
- One call to action per card.

Visual direction
Light, elegant and minimal: editorial typography sets the tone, cards sit on a clean grid, and one tier is visually emphasised. No decorative gradients.

Interaction & motion
Framer Motion for staggered card entrances and hover lift, with a smooth transition when a card is focused or selected.

Stack
- React functional component + Tailwind CSS.
- framer-motion, lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 02 Kelo

- Slug: `jiro-pricing-02-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-02-kelo
- Effect: An AI pricing section with three-tier layout, feature checklist, and prominent recommended plan card. Designed for AI agents, automation SaaS, and intelligent tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,623; total with repair and cross-check: 25,623
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 02 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 02 Kelo".

Purpose
Let buyers of an AI agent or automation tool compare plans at a glance and choose confidently. The section should make the differences between tiers obvious and steer attention toward the recommended option.

Layout & content
- A three-tier layout with one card per plan.
- A feature checklist inside each card listing what the plan includes.
- A prominent recommended plan card, visually elevated above the others.
- A call-to-action button on every card.
- A section heading and supporting line framing the plans.

Visual direction
Light, minimal and modern, with the recommended tier distinguished by scale, border or shadow rather than by loud colour.

Interaction & motion
Animate the cards in on scroll with a slight stagger, and give each card a gentle hover lift.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the reveal and hover motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 02 Orbit

- Slug: `jiro-pricing-02-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-02-orbit
- Effect: A coaching pricing section with tier comparison, program feature checklist, and student-focused CTAs. Built for coaches, mentors, and personal development brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 21,315; total with repair and cross-check: 21,315
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 02 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 02 Orbit".

Purpose
Help prospective students compare coaching programmes and pick the right tier. It is built for coaches, mentors and personal development brands where the offer is a programme rather than software.

Layout & content
- A section heading and short lead-in about choosing a programme.
- A tier comparison presenting the available options side by side, with one marked as recommended.
- A programme feature checklist within each tier, using included and excluded states.
- Student-focused CTA buttons on every tier.

Visual direction
Dark, minimal and modern. Calm surfaces, clear type hierarchy and a single accent to mark the highlighted tier. Use placeholder price labels rather than real figures.

Interaction & motion
Animated entrance for the tier cards and hover lift on each card, with smooth transitions on the CTA buttons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for entrance and hover motion.
- lucide-react for checklist and CTA icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 02 Velara

- Slug: `jiro-pricing-02-velara`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-02-velara
- Effect: An AI pricing section with tier cards, monthly/annual billing toggle, and feature lists. Suited for AI APIs, ML platforms, and intelligent software products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 40,792; total with repair and cross-check: 40,792
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 02 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 02 Velara".

Purpose
Let buyers compare AI product tiers and understand what each unlocks before they commit. Suited for AI APIs, ML platforms and intelligent software products.

Layout & content
- Section heading with a short orienting line.
- Tier cards, each with a plan name, price slot and short summary.
- A monthly and annual billing toggle above the cards.
- A feature list inside each tier card.
- One tier visually marked as the recommended option.

Visual direction
Dark, minimal and modern: deep card surfaces, one bright accent for the recommended tier and the toggle, and clear typographic separation between price and features.

Interaction & motion
Animate the billing toggle state change so prices and periods swap smoothly, and reveal the tier cards with a staggered entrance.

Stack
- React functional component + Tailwind CSS.
- framer-motion for toggle and entrance animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 03 Kelo

- Slug: `jiro-pricing-03-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-03-kelo
- Effect: An AI pricing section with side-by-side tier cards, feature comparison rows, and billing toggle. Built for AI products, automation platforms, and intelligent SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 29,784; total with repair and cross-check: 29,784
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 03 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 03 Kelo".

Purpose
Let a buyer compare AI product tiers side by side and pick one, with a billing toggle that makes the monthly versus annual choice obvious. For AI products, automation platforms and intelligent SaaS.

Layout & content
- Side-by-side tier cards, each with a name, a price slot, a short description and a CTA.
- A billing toggle above the cards that switches the displayed period.
- Feature comparison rows that align across the tiers.
- A highlight treatment for one recommended tier.

Visual direction
Light, minimal and modern: even card heights, clear alignment across the comparison rows, one accent for the highlighted tier, and no visual noise around the prices.

Interaction & motion
Animated: the billing toggle updates prices and labels with a transition, cards lift slightly on hover, and the section reveals on scroll.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the toggle and reveal motion, lucide-react for tier icons and check marks.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 03 Luma

- Slug: `jiro-pricing-03-luma`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-03-luma
- Effect: An AI pricing section with tier comparison, feature checklist, and billing toggle. Built for AI media platforms, video tools, and content generation SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,759; total with repair and cross-check: 30,759
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 03 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 03 Luma".

Purpose
Let visitors compare plans for an AI media platform quickly and switch billing period without leaving the page. It is built for AI media platforms, video tools and content generation SaaS.

Layout & content
- A section intro with a headline and one supporting line.
- A billing toggle switching between monthly and yearly pricing.
- Tier cards side by side, each with a plan name, a price slot and a short summary.
- A feature checklist inside each card, marking what the tier includes.
- One tier visually marked as the recommended option.

Visual direction
Dark and minimal: deep surfaces, thin card borders, restrained type, and clear separation between price and feature list. The highlighted tier is distinguished by emphasis rather than extra colour.

Interaction & motion
Toggling the billing period updates the displayed price with a short animated transition, and cards reveal on scroll. Use Framer Motion for both; lucide-react supplies the checklist and toggle icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 03 Orbit

- Slug: `jiro-pricing-03-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-03-orbit
- Effect: A coaching pricing section with three-tier card layout, program comparison, and enrollment-focused CTAs. Suited for online courses, coaching programs, and education platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,853; total with repair and cross-check: 27,853
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 03 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 03 Orbit".

Purpose
Let prospective students compare coaching programs and choose one, with a structure that makes enrollment the obvious next step. Suited for online courses, coaching programs, and education platforms.

Layout & content
- A three-tier card layout, one card per program.
- A program comparison element showing how the tiers differ.
- A monthly/yearly toggle that switches the displayed pricing mode.
- Enrollment-focused CTAs on the cards.
- Neutral placeholder tier names and figures.

Visual direction
Dark, minimal, and modern: a deep base with the cards as the focus, clear tier hierarchy, and restrained accents so comparison stays easy.

Interaction & motion
Animate cards with Framer Motion on entrance, and make the monthly/yearly toggle switch values with a smooth transition and interactive hover states on the CTAs. lucide-react supplies the icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 03 Pixa

- Slug: `jiro-pricing-03-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-03-pixa
- Effect: A modern pricing section with three-tier card layout, animated billing toggle, and feature comparison rows. Built for SaaS products, AI tools, and B2B software.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,869; total with repair and cross-check: 28,869
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 03 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 03 Pixa".

Purpose
This section presents plan options for a SaaS product, AI tool or B2B software offering. It should let a visitor compare what each tier includes and switch billing periods without losing their place.

Layout & content
- A three-tier card layout.
- An animated billing toggle for monthly and yearly periods.
- Feature comparison rows detailing what each tier contains.
- A clear action on each tier card.

Visual direction
Light and minimal, with tidy alignment across the cards so the comparison rows line up. Use type weight and spacing, not heavy colour, to signal the recommended option.

Interaction & motion
Animate the billing toggle with framer-motion so prices and labels transition cleanly, and add restrained hover feedback on the tier cards. Use lucide-react for any check or feature icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 03 Solra

- Slug: `jiro-pricing-03-solra`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-03-solra
- Effect: A studio pricing section with three-tier layout, scope feature lists, and refined neutral palette. Suited for design agencies, creative consultancies, and brand studios.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,210; total with repair and cross-check: 24,210
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 03 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 03 Solra".

Purpose
Set out studio engagement options clearly so prospective clients can compare scope and choose a level. Suited to design agencies, creative consultancies and brand studios.

Layout & content
- A section header with a headline and one line describing how engagements differ.
- A three-tier layout with a plan name, placeholder price and short positioning line each.
- Scope feature lists inside each tier, describing deliverables rather than software features.
- One tier marked as the recommended engagement.
- A call to action per tier, plus a line inviting a conversation for anything custom.
- Neutral placeholder plan names, prices and scope items.

Visual direction
Light and elegant with a refined neutral palette: quiet borders, generous padding, and typographic hierarchy doing the work instead of colour.

Interaction & motion
Tiers fade in with a light stagger on scroll and lift subtly on hover. An interactive selected state lets a visitor focus one tier. Motion via Framer Motion.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 04 Kelo

- Slug: `jiro-pricing-04-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-04-kelo
- Effect: An AI pricing section with tier comparison, feature checklist, and highlighted recommended plan. Suited for AI platforms, automation tools, and AI-powered SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,462; total with repair and cross-check: 23,462
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 04 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 04 Kelo".

Purpose
Present AI product tiers so a buyer can compare them at a glance and see which one is recommended. The section should reduce the comparison to a checklist rather than paragraphs.

Layout & content
- Tier cards side by side.
- A feature checklist inside each tier.
- One plan visually highlighted as the recommended option.
- Placeholder plan names and figures, since the description supplies none.

Visual direction
Light, minimal and elegant. Keep the cards flat with generous internal padding, and mark the recommended plan with one clear accent rather than heavy ornament.

Interaction & motion
Use Framer Motion for a hover lift on the cards and a subtle entrance reveal, and animate any plan toggle or selection state.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy and placeholder figures where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 04 Luma

- Slug: `jiro-pricing-04-luma`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-04-luma
- Effect: An AI media pricing section with three-tier card layout, generation credits display, and creator-focused CTAs. Suited for AI video, audio, and content generation tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,555; total with repair and cross-check: 24,555
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 04 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 04 Luma".

Purpose
Convert creators by making the plan choice obvious: what each tier costs, how many generation credits it carries, and what it unlocks. Suited to AI video, audio and content generation tools.

Layout & content
- A section heading and a short supporting line.
- A three-tier card layout with one tier marked as recommended.
- A generation credits display on each tier, using placeholder figures.
- A monthly/yearly toggle that switches the pricing period.
- Creator-focused calls to action on every card.

Visual direction
Dark and minimal: cards distinguished by border and elevation rather than heavy fills, a single accent for the recommended tier, and quiet supporting type.

Interaction & motion
Framer Motion for card entrances and hover states, plus an animated transition when the monthly/yearly toggle changes the displayed pricing.

Stack
- React functional component + Tailwind CSS.
- framer-motion, lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 04 Orbit

- Slug: `jiro-pricing-04-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-04-orbit
- Effect: A coaching pricing section with program tier cards, session count display, and outcome-focused feature lists. Built for coaches, course creators, and personal development brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,706; total with repair and cross-check: 31,706
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 04 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 04 Orbit".

Purpose
Present coaching programmes and their outcomes so prospective clients can choose the right level of commitment. The section speaks to people considering coaching, courses or personal development work.

Layout & content
- Program tier cards, one per coaching package.
- A session count display on each card showing how many sessions are included.
- Outcome-focused feature lists describing what the client gets from each programme.
- A call-to-action button on each tier.

Visual direction
Light and minimal with a soft gradient accent, keeping the tier cards clean and evenly weighted so the differences read as content rather than decoration.

Interaction & motion
Animate the tier cards into view on scroll with a gentle stagger, and give the buttons a clear hover state.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the reveal motion, lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 04 Velara

- Slug: `jiro-pricing-04-velara`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-04-velara
- Effect: An AI pricing section with three-tier card layout, feature lists, and billing toggle. Suited for AI platforms, automation tools, and intelligent SaaS products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,688; total with repair and cross-check: 28,688
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 04 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 04 Velara".

Purpose
Let buyers of an AI platform compare plans and switch billing period without leaving the page. It suits AI platforms, automation tools and intelligent SaaS products with subscription tiers.

Layout & content
- A section heading with a short lead-in about plans.
- A monthly versus yearly billing toggle that updates the displayed terms.
- A three-tier card layout, each card listing its features.
- Feature lists per tier with clear included states, and a CTA on each card.

Visual direction
Dark and minimal, with generous card padding and restrained type. Keep the toggle and the highlighted tier as the only emphasised elements.

Interaction & motion
Animated toggle transition when switching billing period, animated card entrance, and hover states on the cards and their CTAs.

Stack
- React functional component + Tailwind CSS.
- framer-motion for toggle, entrance and hover animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 05 Kelo

- Slug: `jiro-pricing-05-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-05-kelo
- Effect: An AI pricing section with tier cards, feature lists, and billing toggle between monthly and annual. Built for AI agents, automation SaaS, and intelligent products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,152; total with repair and cross-check: 25,152
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 05 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 05 Kelo".

Purpose
Present AI agent and automation plans clearly so a buyer can pick a tier without leaving the page. Built for AI agents, automation SaaS and intelligent products.

Layout & content
- Section heading introducing the plans.
- Tier cards with plan name, price slot and short description.
- A billing toggle switching between monthly and annual.
- A feature list in each card, with included and excluded items distinguishable.

Visual direction
Light, minimal and modern: quiet neutral card surfaces, restrained borders, and a single accent used for the highlighted plan and the toggle.

Interaction & motion
Animate the billing toggle and the price swap between periods, and reveal the cards with a subtle staggered entrance.

Stack
- React functional component + Tailwind CSS.
- framer-motion for toggle and entrance animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 05 Luma

- Slug: `jiro-pricing-05-luma`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-05-luma
- Effect: An AI media pricing section with tier cards, usage-based credits display, and feature comparison. Built for AI video tools, content platforms, and creative AI SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 29,609; total with repair and cross-check: 29,609
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 05 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 05 Luma".

Purpose
Price an AI media product around usage: tiers that include a credit allowance, plus a comparison of what each tier unlocks. For AI video tools, content platforms and creative AI SaaS.

Layout & content
- Tier cards, each with a name, a price slot, an included credit allowance and a CTA.
- A usage-based credits display showing the allowance per tier.
- A feature comparison across the tiers.
- A monthly and yearly toggle.

Visual direction
Dark and minimal: near-black surfaces, subtle card borders, the credit figure as a small but legible data point, and a single accent for the recommended tier.

Interaction & motion
Animated: the monthly and yearly toggle transitions prices and labels, cards animate in on scroll, and hover raises the CTA.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the transitions and lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 05 Solra

- Slug: `jiro-pricing-05-solra`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-05-solra
- Effect: An agency pricing section with tier cards, deliverable comparison, and editorial typography pairing. Built for design studios, brand agencies, and creative service firms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,814; total with repair and cross-check: 26,814
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 05 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 05 Solra".

Purpose
Present an agency's packages as a considered editorial comparison, for design studios, brand agencies and creative service firms. The section should make the difference between tiers clear without turning into a feature spreadsheet.

Layout & content
- A section intro with a headline and one supporting line.
- Tier cards, each with a package name, a price slot and a short positioning statement.
- A deliverable comparison listing what each tier includes, aligned across tiers.
- Editorial typography pairing for headings and body, with a clear scale contrast.

Visual direction
Light, minimal and elegant: generous whitespace, refined type, and flat cards separated by fine rules. The comparison reads as a well-set table rather than a grid of boxes.

Interaction & motion
Cards respond to hover with a subtle lift or border emphasis, and tiers reveal on scroll. Framer Motion drives the reveals; lucide-react supplies the small comparison icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 05 Velara

- Slug: `jiro-pricing-05-velara`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-05-velara
- Effect: An AI pricing section with tier cards, usage-based pricing display, and feature comparison rows. Built for AI APIs, ML platforms, and AI-powered SaaS products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 35,638; total with repair and cross-check: 35,638
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 05 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 05 Velara".

Purpose
Help developers and teams understand what an AI platform costs and what each tier includes, with usage-based pricing made legible. Built for AI APIs, ML platforms, and AI-powered SaaS products.

Layout & content
- Tier cards, one per plan level.
- A usage-based pricing display showing how consumption maps to cost.
- Feature comparison rows listing what each tier includes.
- Neutral placeholder tier names and figures.

Visual direction
Dark and minimal: a deep surface, evenly weighted cards, and comparison rows kept clean and scannable rather than dense.

Interaction & motion
Use Framer Motion for card entrances and interactive states: hover feedback on each tier card and animated transitions when pricing or comparison content changes. lucide-react supplies the icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 06 Kelo

- Slug: `jiro-pricing-06-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-06-kelo
- Effect: An AI pricing section with tier cards, usage-based pricing display, and automation-focused feature comparison. Built for AI agents, automation SaaS, and intelligent platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 29,821; total with repair and cross-check: 29,821
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 06 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 06 Kelo".

Purpose
This section prices an AI agent or automation platform for buyers who expect consumption to vary. It should present tiers while making usage-based pricing legible rather than confusing.

Layout & content
- Tier cards for the available plans.
- A usage-based pricing display showing how consumption is metered.
- An automation-focused feature comparison.
- A clear action on each card.

Visual direction
Light, minimal and modern, with calm spacing and disciplined alignment. The usage display should be visually distinct from the fixed tier pricing so the two models never blur together.

Interaction & motion
Animate card entrances and any pricing state changes with framer-motion, and use lucide-react for feature icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Pricing 3 Card Long

- Slug: `jiro-pricing-3-card-long`
- Page: https://landingpageprompts.com/prompts/jiro-pricing-3-card-long
- Effect: A premium dark-themed pricing section featuring 3 tall cards with grid background pattern, character-by-character animated headline (SplitText), monthly/yearly toggle with animated
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 30,260; total with repair and cross-check: 30,260
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 3 Card Long". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 3 Card Long".

Purpose
Present a premium dark pricing block where a visitor can compare three plans and switch billing period without losing their place. For teams choosing a paid tier.

Layout & content
- A headline animated character by character, plus a supporting line.
- A monthly/yearly toggle with an animated pill indicator sliding between options.
- Three tall plan cards on a grid background pattern, each with a plan name, price, features and call to action.
- Animated price transitions when the billing period changes.
- A "MOST POPULAR" badge on one card with a red glow effect.
- Headings in Bricolage Grotesque and body text in Inter.

Visual direction
Premium and dark: a subtle grid pattern behind the cards, precise borders, and red reserved for the popularity badge. Card height stays tall and even.

Interaction & motion
Cards enter with staggered animations, prices cross-fade on toggle, and CTA buttons use a sweep-to-top hover, all built with Framer Motion. Icons come from lucide-react.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Spot Fill Button

- Slug: `jiro-spot-fill-button`
- Page: https://landingpageprompts.com/prompts/jiro-spot-fill-button
- Effect: A bold, brutalist-style button with hard shadow offset, acid-green text on ink-black background, and a satisfying press animation that collapses the shadow on hover.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,268; total with repair and cross-check: 26,268
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Spot Fill Button". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button component for a modern website: "Spot Fill Button".

Purpose
Provide a single, unmissable action control. The button should feel physical and deliberate, so pressing it reads as a decision rather than a nudge.

Layout & content
- One button with a short, direct label.
- A hard shadow offset beneath the button that gives it a raised, printed feel.
- A collapsed-shadow state for hover.
- No icon dependency; the type does the work.

Visual direction
Brutalist and bold. Acid-green text on an ink-black surface, with a solid offset shadow and no gradients or soft edges. Keep the type heavy and tightly set.

Interaction & motion
A press animation that collapses the hard shadow on hover so the button appears to push into the page, with the shadow returning on release. Keyboard focus must be equally visible.

Stack
- React functional component + Tailwind CSS.
- No extra dependencies required.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stacked Card

- Slug: `jiro-stackedcard`
- Page: https://landingpageprompts.com/prompts/jiro-stackedcard
- Effect: A visually striking stacked card gallery with 5 image cards arranged in a cascading fan layout. Features staggered entrance animations from off-screen, individual rotation angles, 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,474; total with repair and cross-check: 31,474
- Verification: 15/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Cards" block called "Stacked Card". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Cards component for a modern website: "Stacked Card".

Purpose
Showcase a set of images as a playful, physical stack, five cards fanned across the frame, that invites the visitor to poke at it.

Layout & content
- Five image cards arranged in a cascading fan, each at its own rotation angle.
- Photographic content inside every card, cropped consistently.
- Room for a short caption or label per card; the description supplies no real copy, so use neutral placeholders.

Visual direction
Light and playful: image-led, with soft shadows that sell the physical stacking and a clean background so the fan reads clearly.

Interaction & motion
Framer Motion with expo-style easing: staggered entrance animations from off-screen, individual rotation angles, and hover interactions that nudge cards and pan their images vertically.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stats and Metrics 01 Luma

- Slug: `jiro-stats-and-metrics-01-luma`
- Page: https://landingpageprompts.com/prompts/jiro-stats-and-metrics-01-luma
- Effect: An AI metrics section with prominent animated counters, creator-focused stats, and trust-building layout. Suited for AI media tools, video platforms, and generative AI.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 20,174; total with repair and cross-check: 20,174
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Stats & Metrics" block called "Stats and Metrics 01 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Stats & Metrics section for a modern website: "Stats and Metrics 01 Luma".

Purpose
Build trust in an AI media tool by putting its numbers front and centre. The section gives creators and buyers a quick, credible read on scale and output without burying the figures in prose.

Layout & content
- Prominent animated counters as the focal point of the section.
- Creator-focused stat labels describing what each figure measures.
- A trust-building layout keeping the numbers large and evenly spaced.
- A short heading or supporting line introducing the metrics.

Visual direction
Dark and minimal, with high-contrast numerals and restrained supporting text so the counters carry the section on their own.

Interaction & motion
Animate each counter from zero up to its value when the section enters the viewport, and reveal the surrounding labels in the same pass.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the counter and reveal animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stats & Metrics 01 Halo

- Slug: `jiro-stats-metrics-01-halo`
- Page: https://landingpageprompts.com/prompts/jiro-stats-metrics-01-halo
- Effect: A health metrics section with prominent animated counters, supporting icons, and trust-building layout. Suited for wellness apps, nutrition platforms, and fitness brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,117; total with repair and cross-check: 23,117
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Stats & Metrics" block called "Stats & Metrics 01 Halo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Stats & Metrics section for a modern website: "Stats & Metrics 01 Halo".

Purpose
Build trust for a wellness brand by presenting health outcomes in a calm, legible way. It is aimed at wellness apps, nutrition platforms and fitness brands that need proof without a hard sell.

Layout & content
- Prominent metric figures with short labels describing what each one measures.
- Supporting icons paired with each metric to aid recognition.
- A trust-building layout that groups the figures into one coherent band.
- Optional short supporting line beneath the metrics.

Visual direction
Light, elegant and minimal. Generous white space, refined type and quiet iconography so the numbers carry the section.

Interaction & motion
Animated counters that count up when the metrics scroll into view, with a gentle fade for the labels and icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the counter and reveal animations.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stats & Metrics 01 kelo

- Slug: `jiro-stats-metrics-01-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-stats-metrics-01-kelo
- Effect: An AI metrics section with prominent animated counters, automation KPI display, and benefit-driven layout. Designed for AI platforms, automation tools, and intelligent products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 29,685; total with repair and cross-check: 29,685
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Stats & Metrics" block called "Stats & Metrics 01 kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Stats & Metrics section for a modern website: "Stats & Metrics 01 kelo".

Purpose
Quantify the value of an AI or automation product at a glance, using large numbers to make the benefit concrete. Designed for AI platforms, automation tools and intelligent products.

Layout & content
- Section heading framing the metrics.
- Prominent animated counters as the section's focal point.
- An automation KPI display showing what the product moves.
- Short benefit-driven captions under each metric.

Visual direction
Dark, minimal and modern: a deep base, oversized numerals, and a single accent colour used only on the numbers.

Interaction & motion
Count each figure up when the section scrolls into view, with a short stagger between metrics so the row resolves in sequence.

Stack
- React functional component + Tailwind CSS.
- framer-motion for scroll-triggered counters and entrance animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stats Metrics 01 Pixa

- Slug: `jiro-stats-metrics-01-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-stats-metrics-01-pixa
- Effect: A two-column stats section with animated counters, scroll-triggered horizontal reveal, social proof avatars, and Trustpilot-style rating badge. Built for SaaS and B2B landing pages
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,054; total with repair and cross-check: 26,054
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Stats & Metrics" block called "Stats Metrics 01 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Stats & Metrics section for a modern website: "Stats Metrics 01 Pixa".

Purpose
Give a B2B landing page its credibility moment: a compact set of proof points a visitor can absorb at a glance, backed by a rating badge and recognisable faces.

Layout & content
- A two-column layout: a stat or copy column beside a supporting column.
- Animated counters, with the figures supplied as editable stand-ins.
- Social proof avatars grouped to suggest a user base.
- A rating badge in the style of a review platform.

Visual direction
Light and minimal: large numerals as the focal point, quiet supporting labels, circular avatars, and one restrained accent. Avoid decorative chrome around the numbers.

Interaction & motion
Animated: the counters count up when the section enters the viewport, the layout reveals horizontally on scroll, and the avatars stagger in.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the counters and reveals, lucide-react for the badge and supporting icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stats & Metrics 02 Halo

- Slug: `jiro-stats-metrics-02-halo`
- Page: https://landingpageprompts.com/prompts/jiro-stats-metrics-02-halo
- Effect: A wellness metrics grid with animated counter stats, lifestyle imagery, and benefit-driven labels. Built for nutrition brands, fitness platforms, and wellness SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 22,109; total with repair and cross-check: 22,109
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Stats & Metrics" block called "Stats & Metrics 02 Halo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Stats & Metrics section for a modern website: "Stats & Metrics 02 Halo".

Purpose
Show the measurable side of a wellness offering so visitors can judge results at a glance. It is built for nutrition brands, fitness platforms and wellness SaaS, where numbers reassure but imagery keeps the tone human.

Layout & content
- A section intro: headline and one supporting line naming what the metrics describe.
- A grid of metric cards, each pairing a large counter figure with a short benefit-driven label.
- Lifestyle imagery placed alongside the grid to keep the section warm.
- Neutral placeholder figures and labels; real values are substituted later.

Visual direction
Light and minimal with a modern, calm feel: airy spacing, restrained type, and strong contrast between the oversized figures and their small labels. Photography stays natural.

Interaction & motion
Each counter animates up to its placeholder value when the section scrolls into view, and cards fade in with a short stagger. Framer Motion drives the counters and reveals; lucide-react provides supporting icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stats & Metrics 02 Kelo

- Slug: `jiro-stats-metrics-02-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-stats-metrics-02-kelo
- Effect: An AI metrics section with animated counter stats, AI capability KPIs, and automation-focused labels. Built for AI agents, automation platforms, and intelligent SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 22,333; total with repair and cross-check: 22,333
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Stats & Metrics" block called "Stats & Metrics 02 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Stats & Metrics section for a modern website: "Stats & Metrics 02 Kelo".

Purpose
Quantify what an AI platform delivers, using animated figures and capability labels to make performance tangible. Built for AI agents, automation platforms, and intelligent SaaS.

Layout & content
- A row or grid of metric figures, each with a supporting label.
- Animated counters that count up to the displayed value.
- KPI entries framed around AI capability.
- Labels written in an automation-focused voice.
- Neutral placeholder values and labels, since no real figures are supplied.

Visual direction
Light, minimal, and modern, with photography available as a supporting visual. Numbers should be the dominant typographic element and the layout should stay uncluttered.

Interaction & motion
Use Framer Motion to trigger the counter animation when the section scrolls into view, with a staggered entrance for each metric so the row builds in sequence.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stats & Metrics 02 Moxo

- Slug: `jiro-stats-metrics-02-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-stats-metrics-02-moxo
- Effect: A SaaS metrics section with animated counter cards, KPI highlights, and clean grid layout. Suited for productivity platforms, business tools, and B2B software brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 38,159; total with repair and cross-check: 38,159
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Stats & Metrics" block called "Stats & Metrics 02 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Stats & Metrics section for a modern website: "Stats & Metrics 02 Moxo".

Purpose
This section gives a B2B software or productivity platform a place to state its key performance indicators. It should make the numbers the message, with no supporting clutter around them.

Layout & content
- A clean grid of metric cards.
- A primary figure and label on each card.
- KPI highlights drawn from the grid.
- A short framing heading for the section.

Visual direction
Light and minimal, with large confident numerals and quiet labels. Give each card equal weight and enough whitespace that the figures register before anything else.

Interaction & motion
Count the numbers up when the section scrolls into view using framer-motion, and keep any other motion to a brief card entrance.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation (install via npm install framer-motion).

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stats Metrics 02 Pixa

- Slug: `jiro-stats-metrics-02-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-stats-metrics-02-pixa
- Effect: A centered stats section with spring-animated counters, three-column metric rows, vertical dividers, and scroll-triggered reveal animations. Built for SaaS, AI tools, and B2B platf
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,982; total with repair and cross-check: 24,982
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Stats & Metrics" block called "Stats Metrics 02 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Stats & Metrics section for a modern website: "Stats Metrics 02 Pixa".

Purpose
Provide quick trust signals for a SaaS, AI or B2B product by presenting a small set of headline metrics in a calm, centered block that is easy to absorb while scrolling.

Layout & content
- A centered section header with a short headline and one supporting line.
- A three-column row of metric entries, each with a large figure and a short label beneath it.
- Vertical dividers separating the columns without boxing them in.
- Optional short qualifier lines under each metric clarifying what is measured.
- Neutral placeholder figures and labels; real values are substituted later.

Visual direction
Light and minimal: a narrow measure, quiet dividers, and strong contrast between the oversized figures and their small muted labels. No cards, shadows or ornament.

Interaction & motion
The block reveals on scroll and each counter springs up to its value when it enters the viewport, using Framer Motion. Counters run once and settle.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stats & Metrics 04 Moxo

- Slug: `jiro-stats-metrics-04-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-stats-metrics-04-moxo
- Effect: A SaaS metrics grid with animated counter stats, benefit-focused labels, and clean typography. Designed for productivity tools, business software, and B2B platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 15,694; total with repair and cross-check: 15,694
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Stats & Metrics" block called "Stats & Metrics 04 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Stats & Metrics section for a modern website: "Stats & Metrics 04 Moxo".

Purpose
Give a B2B software page a compact proof block. The section should state the numbers that matter to a buyer and label each one with the benefit it represents, not just the metric name.

Layout & content
- A grid of metric items.
- Each item pairs an animated counter figure with a benefit-focused label.
- Clean typography throughout, with placeholder figures since the description supplies no real values.
- No icons or imagery required beyond the figures themselves.

Visual direction
Light, minimal and typographic. Let the numbers dominate their cells with a clear size jump from label to figure, and keep the surrounding layout quiet.

Interaction & motion
Use Framer Motion to count each figure up when the section enters the viewport, triggering once and settling on the final value.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy and placeholder figures where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stats & Metrics 05 Moxo

- Slug: `jiro-stats-metrics-05-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-stats-metrics-05-moxo
- Effect: A SaaS metrics section with animated counter cards, KPI display, and supporting product visuals. Built for B2B software, productivity tools, and enterprise SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,899; total with repair and cross-check: 23,899
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Stats & Metrics" block called "Stats & Metrics 05 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Stats & Metrics section for a modern website: "Stats & Metrics 05 Moxo".

Purpose
Present the key numbers behind a SaaS product, with the product visuals that back them up, so B2B software and enterprise buyers can read traction at a glance. It should feel like evidence, not decoration.

Layout & content
- A short section intro: eyebrow, headline, and one supporting line naming what the metrics measure.
- A grid of metric cards, each pairing a large counter figure with a short label and a one-line qualifier.
- Supporting product visuals beside or beneath the grid, shown as UI screenshots rather than stock imagery.
- Neutral placeholder figures and labels; real values are substituted later.

Visual direction
Dark surface on a strict modern grid: crisp card edges, restrained borders, strong contrast between oversized figures and muted labels. Colour stays minimal; the grid carries hierarchy.

Interaction & motion
Cards reveal on scroll and each counter springs up to its value, driven by Framer Motion. Keep entrances brief.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stats & Metrics o1 Moxo

- Slug: `jiro-stats-metrics-o1-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-stats-metrics-o1-moxo
- Effect: A flagship SaaS metrics section with large animated counters, KPI display, and conversion-focused layout. Built for B2B software, productivity tools, and platform marketing.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 18,658; total with repair and cross-check: 18,658
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Stats & Metrics" block called "Stats & Metrics o1 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Stats & Metrics section for a modern website: "Stats & Metrics o1 Moxo".

Purpose
Give a B2B software product a flagship proof section: the numbers that matter, presented large and confident enough to carry a page on their own. Built for B2B software, productivity tools and platform marketing.

Layout & content
- A section heading and a short framing line.
- A KPI display with the primary metrics set as the largest elements on screen.
- Large animated counters for each metric, each with a label and a short supporting note.
- A conversion-focused call to action closing the section.

Visual direction
Dark, minimal and elegant: high type contrast, thin separators between metrics, and no imagery. The numbers are the design, so keep everything else quiet.

Interaction & motion
Framer Motion for the counters, which animate upward when the section enters the viewport, plus a staggered reveal across the metric blocks.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Stats & Metrics Vendo

- Slug: `jiro-stats-metrics-vendo`
- Page: https://landingpageprompts.com/prompts/jiro-stats-metrics-vendo
- Effect: A modern stats section with animated counters, supporting icons, and clean grid layout. Suited for SaaS products, AI tools, and B2B platform landing pages.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 17,489; total with repair and cross-check: 17,489
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Stats & Metrics" block called "Stats & Metrics Vendo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Stats & Metrics section for a modern website: "Stats & Metrics Vendo".

Purpose
Give a SaaS, AI tool or B2B landing page a compact credibility block. The section should present key figures quickly and cleanly, supporting the surrounding claims without interrupting the page's flow.

Layout & content
- A clean grid of stat cells, evenly sized and aligned.
- Animated counters inside each cell.
- A supporting icon above or beside each figure.
- Short labels describing what each metric represents.

Visual direction
Light and minimal, with strong numeral weight, muted labels and simple line icons that keep the grid quiet and easy to scan.

Interaction & motion
Animate the counters up to their values when the grid scrolls into view, and stagger the cells slightly so the reveal feels deliberate.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the counter and stagger animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Swap Button

- Slug: `jiro-swap-button`
- Page: https://landingpageprompts.com/prompts/jiro-swap-button
- Effect: An interactive button with swapping pill and icon animation. On hover, the text pill moves left with a slight tilt while the icon circle swaps to the right. Features smooth Framer 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,202; total with repair and cross-check: 24,202
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Button" block called "Swap Button". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Button component for a modern website: "Swap Button".

Purpose
Deliver an interactive action button whose hover state makes the primary action feel responsive and deliberate. It fits CTAs and link buttons on product and portfolio pages.

Layout & content
- A text pill carrying the button label.
- A circular icon container holding an ArrowUpRight icon.
- The two elements sit together as one button, with no extra text or secondary action.

Visual direction
Light and playful, with an orange accent used for the icon treatment and the pill. Rounded shapes, crisp edges and a clear resting versus hover distinction.

Interaction & motion
On hover, the text pill moves left with a slight tilt while the icon circle swaps to the right. Transitions are smooth and spring-like, and reverse cleanly when the pointer leaves.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the swap transitions.
- lucide-react for the ArrowUpRight icon.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Swiss-style Card

- Slug: `jiro-swiss-style-card`
- Page: https://landingpageprompts.com/prompts/jiro-swiss-style-card
- Effect: A bold Swiss-style metrics section with two-column layout featuring massive typography, hover-reveal image popups with spring animations, scale effects on hover, and scroll-trigger
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,724; total with repair and cross-check: 23,724
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Cards" block called "Swiss-style Card". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Cards section for a modern website: "Swiss-style Card".

Purpose
Present key metrics or features with typographic impact, letting big numbers carry the message and imagery arrive only on demand. Perfect for showcasing stats, features or key metrics.

Layout & content
- A two-column layout pairing metric entries with supporting space.
- Massive typographic treatment for each metric or feature label.
- Short supporting copy under each entry.
- Hover-reveal image popups that surface associated photography.

Visual direction
Light, black and white, and typographically driven: stark contrast, large type at display scale, and photography that appears only as an accent.

Interaction & motion
Reveal image popups on hover with spring animation, scale the hovered entry slightly, and trigger entrance animation as the section scrolls into view.

Stack
- React functional component + Tailwind CSS.
- framer-motion for spring hover popups and scroll-triggered entrance.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Team 02 Pixa

- Slug: `jiro-team-02-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-team-02-pixa
- Effect: A light-themed interactive team carousel with size-based depth hierarchy and arrow navigation. Features 14 team members (7 base duplicated for infinite loop) displayed in a horizon
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 47,640; total with repair and cross-check: 47,640
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Team" block called "Team 02 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Team section for a modern website: "Team 02 Pixa".

Purpose
Introduce the people behind the product through a browsable carousel, so a visitor can move through the team and read each person's role without leaving the section.

Layout & content
- A horizontal carousel of team portraits with size-based depth: the active member largest at the centre, neighbours stepping down in size toward the edges.
- Arrow navigation buttons, plus clicking a portrait to make it active.
- Active member details below the row, name, role and social icons, with fade transitions.
- Circular index wrapping so the carousel loops endlessly.

Visual direction
Light and photography-led, set in Inter Tight: portrait photography does the work, the layout stays minimal, and a green hover accent matches the social icons.

Interaction & motion
Interactive and animated: portraits scale with spring physics, the arrows appear on container hover, details fade as the active member changes, and the row enters with a staggered scroll-triggered animation.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the spring carousel and lucide-react for the arrows and social icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Team 02 Solra

- Slug: `jiro-team-02-solra`
- Page: https://landingpageprompts.com/prompts/jiro-team-02-solra
- Effect: A studio team section with split-image member layout, role display, and editorial typography. Designed for design agencies, creative consultancies, and brand studios.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,827; total with repair and cross-check: 24,827
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Team" block called "Team 02 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Team section for a modern website: "Team 02 Solra".

Purpose
Introduce the people behind a studio so prospective clients know who they would work with. It is designed for design agencies, creative consultancies and brand studios, where personality is part of the pitch.

Layout & content
- A section intro with a headline and one supporting line.
- A split-image layout pairing a member portrait with their details.
- Role display for each member, kept short and typographic.
- A carousel so the visitor can move between members without leaving the section.

Visual direction
Light and elegant with an editorial feel: photography does the heavy lifting, typography stays refined, and surfaces remain flat and minimal so portraits stay the focus.

Interaction & motion
The carousel advances between members with an animated slide and fade, and each member's details animate in as they become active. Use Framer Motion for the transitions and lucide-react for the carousel controls.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Team 03 Pixa

- Slug: `jiro-team-03-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-team-03-pixa
- Effect: A modern team section with member portrait cards, social link icons, and clean grid layout. Suited for SaaS companies, startups, and product-led brand sites.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,964; total with repair and cross-check: 25,964
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Team" block called "Team 03 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Team section for a modern website: "Team 03 Pixa".

Purpose
Introduce the people behind a product in a clean, credible way, giving each member a portrait and a route to their profile. Suited for SaaS companies, startups, and product-led brand sites.

Layout & content
- A grid of member cards, one per person.
- A portrait image on each card.
- A row of social link icons per member.
- Name and role as the card's text content.
- Neutral placeholder names and roles.

Visual direction
Light, minimal, and photography-led: consistent portrait treatment across the grid, restrained typography, and icons kept small so faces stay the focus.

Interaction & motion
Static section; no animation required beyond subtle hover feedback on cards and social icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Team 03 Solra

- Slug: `jiro-team-03-solra`
- Page: https://landingpageprompts.com/prompts/jiro-team-03-solra
- Effect: A team showcase with editorial card layout, refined neutral palette, and minimal member metadata. Built for design studios, creative agencies, and brand-focused firms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,410; total with repair and cross-check: 19,410
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Team" block called "Team 03 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Team section for a modern website: "Team 03 Solra".

Purpose
This section introduces the people behind a design studio, creative agency or brand-focused firm. It should read like an editorial feature rather than a corporate directory, letting the work and the people speak with restraint.

Layout & content
- An editorial card layout for team members.
- Portrait photography as the primary element of each card.
- Minimal member metadata such as name and role.
- A refined neutral palette holding the composition together.

Visual direction
Light, minimal and editorial, with a neutral palette and disciplined type. Let the portraits set the tone and keep metadata small and secondary.

Interaction & motion
Use framer-motion for a marquee movement across the team cards and for hover reveals of member metadata.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Team Showcase

- Slug: `jiro-team-showcase`
- Page: https://landingpageprompts.com/prompts/jiro-team-showcase
- Effect: A light-themed team section with horizontal scroll cards. Features uppercase badge with line accent, large headline with Instrument Serif italic accent, 4-column horizontally scrol
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 33,897; total with repair and cross-check: 33,897
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Team" block called "Team Showcase". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Team section for a modern website: "Team Showcase".

Purpose
Put faces and roles to a company so visitors know who they would be working with, presented as a horizontally browsable showcase rather than a static wall of portraits.

Layout & content
- An uppercase badge with a line accent above the headline.
- A large headline with an italic accent phrase.
- Horizontally scrollable team cards in a four-column layout with snap scrolling.
- Each card holds a member photo, name, email and designation.
- Font Awesome social icons per member.
- Body and heading type set in Inter Tight with an Instrument Serif italic accent.

Visual direction
Light and elegant with photography-led warmth, a navy blue accent for details, and generous card padding. Portrait crops stay consistent so the row scans evenly.

Interaction & motion
Member photos zoom gently on hover, and cards enter with blur-up staggered reveals using premium cubic-bezier easing driven by Framer Motion. Horizontal scrolling snaps between cards.

Stack
- React functional component + Tailwind CSS.
- framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Team Talent

- Slug: `jiro-team-talent`
- Page: https://landingpageprompts.com/prompts/jiro-team-talent
- Effect: A light-themed team section with 5 colorful pastel card backgrounds in a horizontal grid. Features centered headline with blue accent text, description paragraph, 5-column team car
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,693; total with repair and cross-check: 23,693
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Team" block called "Team Talent". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Team section for a modern website: "Team Talent".

Purpose
Introduce the people behind the brand in a way that feels warm rather than corporate. The section should let visitors attach names and roles to faces and give them a route to get in touch.

Layout & content
- A centred headline with an accent phrase, plus a short description paragraph.
- Five team cards in a horizontal grid, each on its own pastel background: pink, blue, green, orange and slate.
- Circular profile images with a white border.
- Member name and role on every card.
- A rounded call-to-action button below the grid.

Visual direction
Light, pastel and playful. The card colours supply the personality, so keep the page background neutral and the typography restrained. Set headings in Inter Tight.

Interaction & motion
Use Framer Motion for blur-up staggered reveals with a premium cubic-bezier ease as the cards enter view.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 01 Blaze

- Slug: `jiro-testimonial-01-blaze`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-01-blaze
- Effect: A travel testimonial section with featured customer quote, vibrant destination imagery, and rating display. Built for travel platforms, tour operators, and lifestyle brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,467; total with repair and cross-check: 23,467
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 01 Blaze". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 01 Blaze".

Purpose
Build confidence for a travel brand by leading with one customer words and surrounding it with the destinations that customer is talking about. Built for travel platforms, tour operators and lifestyle brands.

Layout & content
- A featured customer quote as the primary element, with attribution and an avatar.
- A rating display associated with the featured quote.
- Vibrant destination imagery framing the quote.
- A marquee row of further customer entries with avatars, using neutral placeholder quotes and names.

Visual direction
Light and minimal with photography: the imagery carries the colour, typography stays restrained, and avatars are cropped consistently in a circular frame.

Interaction & motion
The marquee scrolls continuously with a light CSS animation loop; no motion dependency is declared, so keep it dependency-free and slow or pause it on hover.

Stack
- React functional component + Tailwind CSS.
- lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 01 Kelo

- Slug: `jiro-testimonial-01-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-01-kelo
- Effect: A flagship AI testimonial section with prominent customer story, avatar display, and credibility context. Built for AI platforms, automation tools, and intelligent SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,357; total with repair and cross-check: 26,357
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 01 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 01 Kelo".

Purpose
Give an AI platform or automation tool a flagship customer story that carries real credibility. Rather than a wall of short quotes, this section should let one customer's experience lead while still offering others.

Layout & content
- A prominent featured customer story built around a longer quote.
- Avatar display for the featured customer, with name and role context.
- Credibility context around the story, such as company or role detail.
- A carousel so additional testimonials can be browsed.
- Photography supporting the featured story.

Visual direction
Light and minimal, with photography and avatars humanising the section and the featured quote given the largest type on the page.

Interaction & motion
Make the carousel interactive with smooth slide transitions between testimonials, and animate the featured story in on scroll.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the carousel and reveal motion, lucide-react for controls.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 01 Luma

- Slug: `jiro-testimonial-01-luma`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-01-luma
- Effect: A flagship AI media testimonial section with prominent creator quote, avatar display, and product context. Suited for AI video, audio, and creative tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 38,794; total with repair and cross-check: 38,794
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 01 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 01 Luma".

Purpose
Give an AI media product a flagship social proof moment. One prominent creator quote carries the section, with product context so visitors understand what the quote refers to.

Layout & content
- A large, prominent quote from a creator as the focal element.
- An avatar display identifying the person quoted, with their name and role.
- Product context copy linking the quote back to the tool being used.
- Carousel controls so additional quotes can be reached.

Visual direction
Dark and minimal, with the quote set large and the avatar given clear prominence. Keep the surrounding surfaces quiet so the words lead.

Interaction & motion
Carousel transitions between quotes with animated slide or fade, plus entrance animation when the section reaches the viewport.

Stack
- React functional component + Tailwind CSS.
- framer-motion for carousel and reveal animation.
- lucide-react for the navigation icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 01 Orbit

- Slug: `jiro-testimonial-01-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-01-orbit
- Effect: A flagship coaching testimonial section with prominent student story, avatar display, and outcome highlights. Suited for coaches, course creators, and online education.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,094; total with repair and cross-check: 27,094
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 01 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 01 Orbit".

Purpose
Lead with one student's story and its outcome to make a coaching offer credible. Suited for coaches, course creators and online education.

Layout & content
- A prominent featured student story as the section's centrepiece.
- Avatar display identifying the person quoted.
- Outcome highlights summarising what changed for them.
- A marquee row carrying additional shorter quotes or names.

Visual direction
Light and photographic: editorial spacing, portrait-led imagery, and a calm neutral surface so the story stays the focus.

Interaction & motion
Scroll the additional quote marquee continuously and add interactive hover states on the avatars and story card.

Stack
- React functional component + Tailwind CSS.
- lucide-react for quote and avatar-adjacent icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 01 Velara

- Slug: `jiro-testimonial-01-velara`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-01-velara
- Effect: An AI product testimonial section with prominent customer quote, role metadata, and trust-building layout. Built for AI platforms, ML SaaS, and intelligent software.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,386; total with repair and cross-check: 27,386
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 01 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 01 Velara".

Purpose
Put one customer's words at the centre of the page to build trust in an AI platform, with enough context, who they are and what they do, for the quote to feel real.

Layout & content
- One prominent customer quote as the visual centrepiece.
- Role metadata beneath the quote: name, role and company, supplied as editable stand-ins.
- A supporting grid of smaller quote or avatar elements around the main testimonial.
- A short section heading.

Visual direction
Dark and minimal: a near-black surface, large readable quote type, circular avatars, and a single subtle accent. Avoid decorative quotation ornaments that compete with the words.

Interaction & motion
Animated: the quote and its metadata fade and lift in on scroll, with a staggered entrance for the supporting grid.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the reveal animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 02 Blaze

- Slug: `jiro-testimonial-02-blaze`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-02-blaze
- Effect: A travel testimonial section with customer story cards, destination imagery, and review-focused layout. Designed for travel agencies, tour operators, and experience platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 39,150; total with repair and cross-check: 39,150
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 02 Blaze". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 02 Blaze".

Purpose
Turn past trips into reassurance for people still deciding where to book. It is designed for travel agencies, tour operators and experience platforms, so the section should read as traveller stories rather than sales claims.

Layout & content
- A section intro with a headline and one supporting line.
- Customer story cards, each carrying a short review, a name and a small avatar.
- Destination imagery paired with the stories to set each trip in place.
- A review-focused layout that keeps the quote readable above the supporting detail.

Visual direction
Light and minimal: clean cards, natural destination photography, and restrained typography with the quote as the strongest text. Avatars stay small so the imagery and the words lead.

Interaction & motion
Story cards scroll continuously in a marquee, pausing on hover so a review can be read. Use Framer Motion or a CSS marquee loop, with lucide-react for the small rating or arrow icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 02 Halo

- Slug: `jiro-testimonial-02-halo`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-02-halo
- Effect: A health-focused testimonial section with featured quote, customer avatar, and transformation context. Suited for wellness apps, fitness platforms, and nutrition services.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,554; total with repair and cross-check: 23,554
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 02 Halo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 02 Halo".

Purpose
Give a health product a single, credible customer voice, pairing a featured quote with the person behind it and the context of their change. Suited for wellness apps, fitness platforms, and nutrition services.

Layout & content
- A featured quote as the section's centerpiece.
- A customer avatar beside the quote.
- Transformation context that frames what the customer experienced.
- Neutral placeholder quote text and attribution, since none is supplied.

Visual direction
Light, minimal, and photography-led: a calm surface, generous space around the quote, and the avatar treated as a modest supporting detail rather than a large image.

Interaction & motion
Animate the quote and avatar with Framer Motion on scroll entry, and add a light interactive treatment so the featured quote responds to hover. lucide-react supplies any quotation or rating icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 02 Kelo

- Slug: `jiro-testimonial-02-kelo`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-02-kelo
- Effect: An AI testimonial section with customer quote cards, role metadata, and trust-building layout. Designed for AI agents, automation platforms, and intelligent SaaS products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 47,365; total with repair and cross-check: 47,365
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 02 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 02 Kelo".

Purpose
This section supplies social proof for an AI agent, automation platform or intelligent SaaS product. It should let a prospective buyer hear from existing customers in their own words and see who those customers are.

Layout & content
- Customer quote cards carrying the testimonial text.
- Role metadata identifying each speaker.
- A trust-building arrangement of the quotes.
- Supporting imagery and figures where they reinforce credibility.

Visual direction
Light overall, with photography and avatars kept consistent across cards. Let the quotes lead and use the supporting figures as quiet reinforcement rather than a second focal point.

Interaction & motion
Present the quotes as an animated carousel with framer-motion, and use lucide-react for any quote or rating icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 02 Luma

- Slug: `jiro-testimonial-02-luma`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-02-luma
- Effect: An AI testimonial section with split-screen layout, featured creator quote, and supporting media. Built for AI media tools, content platforms, and creative AI products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,610; total with repair and cross-check: 28,610
- Verification: 16/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 02 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 02 Luma".

Purpose
Let a creator's own words carry the argument for an AI media product, pairing the quote with the work it produced. Built for AI media tools, content platforms and creative AI products.

Layout & content
- A split-screen layout with the featured quote on one side and supporting media on the other.
- A prominent creator quote as the focal content, set at a readable size.
- Attribution for the quote: name, role and a small avatar.
- Supporting media opposite, shown as a placeholder image or clip frame.
- A short section label introducing the testimonial.
- Neutral placeholder quote text and attribution; no real names or claims.

Visual direction
Light and minimal: quiet type, one strong quote, and the supporting media as the only rich visual element. No boxes or busy backgrounds.

Interaction & motion
The quote animates in as text on scroll, and the split sides fade and slide gently into place via Framer Motion. Motion stays subtle so the words lead.

Stack
- React functional component + Tailwind CSS.
- framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 02 Orbit

- Slug: `jiro-testimonial-02-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-02-orbit
- Effect: A coaching testimonial section with split-screen layout, featured student quote, and transformation context. Built for coaches, educators, and personal brand sites.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,362; total with repair and cross-check: 19,362
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 02 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 02 Orbit".

Purpose
Show the change a coaching programme produced for a real client. The section should lead with one student's words and place them in the context of where that student started and finished.

Layout & content
- A split-screen layout with the quote on one side and supporting context on the other.
- One featured student quote set in large type.
- Transformation context explaining what changed for that student.
- Neutral placeholder wording, since no real testimonial is supplied.

Visual direction
Light, bold and typographic. Large type should carry the section, with restrained supporting elements so the quote is unmistakably the focus.

Interaction & motion
Use Framer Motion for a restrained entrance reveal on scroll. No carousel or looping motion is implied.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 02 Pixa

- Slug: `jiro-testimonial-02-pixa`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-02-pixa
- Effect: A clean testimonial section with avatar selector, animated green ring indicator, Trustpilot ratings, and smooth content transitions. Built for SaaS products, AI tools, and B2B plat
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,136; total with repair and cross-check: 27,136
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 02 Pixa". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 02 Pixa".

Purpose
Provide trust-driven social proof for a SaaS or AI product: a visitor picks a customer from a row of avatars and the quote, rating and context swap to match. Built for SaaS products, AI tools and B2B platforms.

Layout & content
- An avatar selector row where one avatar is active at a time.
- A quote panel showing the selected customer testimonial with their name, role and avatar.
- A ratings display showing the review score and its source.
- A supporting stats line alongside the quote.

Visual direction
Light and minimal: circular avatars, generous whitespace, quiet borders, and a single accent, an animated green ring marking the selected avatar.

Interaction & motion
Framer Motion for the animated ring indicator and smooth crossfade transitions of the quote content when the selection changes.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 02 Velara

- Slug: `jiro-testimonial-02-velara`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-02-velara
- Effect: An AI testimonial section with customer quote cards, avatar imagery, and rating display. Designed for AI tools, automation platforms, and developer-focused AI products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 42,628; total with repair and cross-check: 42,628
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 02 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 02 Velara".

Purpose
Reassure buyers of an AI tool or developer-focused product with social proof from real users. The section should present several voices and their ratings so a visitor can judge the product on other people's experience.

Layout & content
- Customer quote cards, each holding a testimonial and its attribution.
- Avatar imagery identifying the person quoted.
- A rating display alongside the quotes.
- A layout keeping the cards balanced and easy to scan.

Visual direction
Dark and minimal, with avatars and ratings providing the only strong visual anchors and the card surfaces kept understated against the background.

Interaction & motion
Make the quote cards interactive on hover and animate them into view with a staggered reveal as the section scrolls.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the reveal and hover motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 03 Luma

- Slug: `jiro-testimonial-03-luma`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-03-luma
- Effect: An AI media testimonial grid with multiple creator quotes, avatar imagery, and rating display. Designed for AI video, audio, and content generation platforms.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,020; total with repair and cross-check: 26,020
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 03 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 03 Luma".

Purpose
Show breadth of adoption for an AI content platform by presenting several creator voices at once. The grid format suits AI video, audio and content generation products.

Layout & content
- A section heading with a short lead-in.
- A grid of multiple creator quotes, each with its own card.
- Avatar imagery for each person quoted, alongside their name and role.
- A rating display accompanying the quotes.

Visual direction
Light and colourful, with a tidy grid and consistent card structure. Let the avatar imagery and accents add variety while the layout stays orderly.

Interaction & motion
Animated entrance with staggered card reveals as the grid scrolls into view, plus hover states on each card.

Stack
- React functional component + Tailwind CSS.
- framer-motion for staggered reveals and hover motion.
- lucide-react for rating and quote icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 03 Moxo

- Slug: `jiro-testimonial-03-moxo`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-03-moxo
- Effect: A SaaS testimonial section with split-screen layout, featured customer quote, and supporting visuals. Suited for productivity platforms, business tools, and B2B software.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,753; total with repair and cross-check: 24,753
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 03 Moxo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 03 Moxo".

Purpose
Give a B2B product a customer proof section that pairs one strong quote with the results behind it. Suited for productivity platforms, business tools and B2B software.

Layout & content
- A split-screen layout separating quote from supporting visual.
- A featured customer quote as the primary content.
- Supporting visuals that show the customer or the product in use.
- Small stat callouts that back the quote up.
- Carousel navigation for moving between customer stories.

Visual direction
Light and photographic: balanced two-column composition, generous whitespace, and imagery that reads as real rather than decorative.

Interaction & motion
Animate carousel transitions between quotes and add entrance animation as the section scrolls into view.

Stack
- React functional component + Tailwind CSS.
- framer-motion for carousel and entrance animation.
- lucide-react for carousel and quote icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 03 Orbit

- Slug: `jiro-testimonial-03-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-03-orbit
- Effect: A coaching testimonial grid with multiple student quotes, avatar display, and outcome-focused context. Designed for coaches, mentors, and personal development brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,270; total with repair and cross-check: 19,270
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 03 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 03 Orbit".

Purpose
Show that coaching produces outcomes by letting several students speak in one grid, each quote framed by the context of what changed for them. For coaches, mentors and personal development brands.

Layout & content
- A grid of student quotes, each a card with the quote, an avatar and the student's name.
- Outcome-focused context alongside each quote rather than generic praise.
- A section heading that frames the grid as results.
- Optional supporting photography.

Visual direction
Light, minimal and modern with photography: portrait avatars, soft card surfaces, a comfortable measure for quote text, and one quiet accent.

Interaction & motion
Static section; no animation required beyond a light hover lift on the cards.

Stack
- React functional component + Tailwind CSS.
- lucide-react for small icons such as quote marks or ratings.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 03 Velara

- Slug: `jiro-testimonial-03-velara`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-03-velara
- Effect: An AI testimonial section with featured quote, customer avatar, and product-focused context. Suited for AI platforms, ML APIs, and developer-focused AI tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 43,104; total with repair and cross-check: 43,104
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 03 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 03 Velara".

Purpose
Give an AI platform a credibility moment built on customer voice, for AI platforms, ML APIs and developer-focused AI tools. The quote should be tied to product context so it reads as a real usage story.

Layout & content
- A section intro with a headline and one supporting line.
- A featured quote given the strongest type on the section.
- A customer avatar with the person's name and role beside the quote.
- Product-focused context that explains what the customer was doing when the quote applies.
- A carousel to move between featured quotes.

Visual direction
Dark and minimal: deep surfaces, restrained type, and the quote as the single focal point. The avatar and context line stay quiet so nothing competes with the words.

Interaction & motion
The carousel transitions between quotes with an animated slide and fade, and content reveals on scroll. Use Framer Motion for the transitions and lucide-react for the carousel controls.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 04 Halo

- Slug: `jiro-testimonial-04-halo`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-04-halo
- Effect: A health testimonial section with featured customer story, avatar display, and wellness-focused context. Designed for nutrition platforms, fitness apps, and health services.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 29,495; total with repair and cross-check: 29,495
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 04 Halo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 04 Halo".

Purpose
Present a health product's customer story alongside the people who use it, so the social proof feels broad rather than singular. Designed for nutrition platforms, fitness apps, and health services.

Layout & content
- A featured customer story occupying the primary position.
- An avatar display showing the featured customer.
- A grid of additional avatars representing other customers.
- Wellness-focused context in the supporting copy.
- Neutral placeholder story text and names.

Visual direction
Light, minimal, and modern: a calm surface with the featured story given the most space, and the avatar grid arranged on a tidy, even rhythm.

Interaction & motion
Use Framer Motion for a staggered entrance of the featured story and the avatar grid, with a subtle hover response on individual avatars. lucide-react supplies supporting icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 04 Luma

- Slug: `jiro-testimonial-04-luma`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-04-luma
- Effect: An AI testimonial section with featured customer story, creator-focused avatar, and product context. Built for AI media tools, content generation platforms, and creative SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 22,965; total with repair and cross-check: 22,965
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 04 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 04 Luma".

Purpose
This section presents a customer story for an AI media tool, content generation platform or creative SaaS. It should give one featured voice enough room to be persuasive, supported by product context.

Layout & content
- A featured customer story as the section's centrepiece.
- A creator-focused avatar identifying the speaker.
- Product context explaining what the customer uses.
- Additional testimonial entries available alongside the featured one.

Visual direction
Dark and minimal, with the featured story given generous space and quiet type. Keep avatars and any supporting imagery restrained so the story stays the focus.

Interaction & motion
Use framer-motion for a carousel that moves between stories, with subtle transitions between entries. Use lucide-react for any accompanying icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 04 Orbit

- Slug: `jiro-testimonial-04-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-04-orbit
- Effect: A coaching testimonial section with student transformation story, avatar imagery, and outcome highlights. Built for coaches, course creators, and education brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 17,274; total with repair and cross-check: 17,274
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 04 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 04 Orbit".

Purpose
Show the change a student experienced, using one story with concrete outcomes rather than a wall of short quotes. Built for coaches, course creators and education brands.

Layout & content
- A section header with a headline and one line framing the transformation story.
- A featured student story: a longer quote plus the situation before and after.
- Avatar imagery accompanying the quote and attribution.
- Outcome highlights shown as a short set of labelled results.
- Optional supporting shorter quotes from other students beneath the feature.
- Neutral placeholder story text, names and outcomes.

Visual direction
Light and minimal with photography and avatars supplying warmth. The feature story gets the most space; supporting quotes stay visually quieter.

Interaction & motion
The featured story and avatar fade and rise into view, and outcome highlights stagger in afterwards using Framer Motion. Hover states stay understated.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 04 Velara

- Slug: `jiro-testimonial-04-velara`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-04-velara
- Effect: An AI testimonial section with featured customer story, avatar display, and supporting context. Designed for AI products, automation platforms, and developer tools.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 27,168; total with repair and cross-check: 27,168
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 04 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 04 Velara".

Purpose
Give an AI or developer product social proof from a customer's perspective. The section should feature one story in enough depth to be credible, with the customer's identity presented through an avatar rather than a logo wall.

Layout & content
- A featured customer story as the centrepiece.
- An avatar display presenting the customer.
- Supporting context around the story: who they are and what they used.
- A grid arrangement for any additional testimonial items.
- Neutral placeholder wording, since no real testimonial is supplied.

Visual direction
Dark, minimal and quiet. Let the story copy carry the section, with the avatars as the only imagery and one restrained accent for emphasis.

Interaction & motion
Use Framer Motion for staggered entrance reveals across the grid. No carousel is implied by the tags.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial 05 Luma

- Slug: `jiro-testimonial-05-luma`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-05-luma
- Effect: An AI media testimonial section with customer quote cards, creator avatar display, and product context. Suited for AI video tools, content platforms, and creative AI SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 25,282; total with repair and cross-check: 25,282
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial 05 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial 05 Luma".

Purpose
Show that creators get real results from an AI media product, using customer quote cards and creator avatars to keep the proof human. Suited to AI video tools, content platforms and creative AI SaaS.

Layout & content
- Quote cards, each carrying a short testimonial, the creator name and role, and a product-context line explaining what they used.
- A creator avatar display paired with each quote.
- A marquee row of additional cards for breadth, using neutral placeholder quotes.
- A section heading and a short supporting line.

Visual direction
Dark and minimal: cards sit on a dark surface with subtle borders, avatars are circular and consistently cropped, and type stays small enough that the quotes lead.

Interaction & motion
Framer Motion for card entrances, a marquee that drifts the extra cards continuously, and hover feedback on each card.

Stack
- React functional component + Tailwind CSS.
- framer-motion, lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial Masonry

- Slug: `jiro-testimonial-masonry`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-masonry
- Effect: A dark-themed CSS columns masonry grid testimonial section featuring 9 cards with variable heights, blur-to-focus entrance animation with staggered delays, rotating conic gradient 
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 36,887; total with repair and cross-check: 36,887
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial Masonry". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial Masonry".

Purpose
Deliver a dense, dark-themed wall of customer voices. The masonry layout lets testimonials of different lengths sit together without forcing them into equal cards, so the section feels like a living collection rather than a fixed grid.

Layout & content
- A CSS columns masonry grid holding nine testimonial cards with variable heights.
- Optional italic quote headings above the testimonial body.
- A gradient text heading running from white to gray.
- A responsive layout stepping between one, two and three columns.

Visual direction
Dark and grid-led, with card borders animated by a rotating conic gradient chase in the orange accent and the gradient heading anchoring the top of the section.

Interaction & motion
Reveal the cards with a blur-to-focus entrance and staggered delays, and on hover grow each card's border radius from 24px to 30px.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the entrance and hover animation, Geist and Inter for typography.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial Modern

- Slug: `jiro-testimonial-modern`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-modern
- Effect: A light-themed two-panel testimonial slider featuring a 520x540px portrait image card and a matching quote content card (rounded-[32px]), 5 testimonials with Pexels photos, slide c
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,413; total with repair and cross-check: 28,413
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial Modern". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial Modern".

Purpose
Present a rotating set of customer quotes in a light, editorial two-panel layout. The portrait paired with a matching quote card makes the section read like a feature story rather than a review list.

Layout & content
- A two-panel slider: a portrait image card sized 520x540px and a matching quote content card with rounded-[32px] corners.
- Five testimonials using Pexels photos for the portraits.
- A slide counter in the 01/05 format, plus previous and next navigation buttons.
- Company logos with each quote to identify where the speaker works.

Visual direction
Light and minimal, set in the Geist font. Keep the two panels visually balanced, with the portrait card and the quote card reading as a pair.

Interaction & motion
AnimatePresence slide transitions with a blur-to-focus effect between testimonials, and a press animation on the prev/next buttons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for AnimatePresence transitions and button press states.
- lucide-react for the navigation icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonial Video

- Slug: `jiro-testimonial-video`
- Page: https://landingpageprompts.com/prompts/jiro-testimonial-video
- Effect: A dark-themed video testimonial carousel featuring 4 portrait cards (400x550px) with Unsplash thumbnails, centered play button with CSS triangle, glassmorphic badge overlay, scroll
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 26,900; total with repair and cross-check: 26,900
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonial Video". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonial Video".

Purpose
Present customer proof as watchable video stories, keeping the page dark and cinematic while making playback effortless.

Layout & content
- A carousel of four portrait video cards, each 400 by 550 pixels.
- Thumbnails sourced from Unsplash for the card previews.
- A centred play button drawn as a CSS triangle.
- A glassmorphic badge overlaid on each card.
- Left and right scroll navigation buttons.
- A fullscreen video modal for playback.

Visual direction
Dark and glassy: deep surfaces, frosted overlays, and portrait cards that read as a tight horizontal filmstrip.

Interaction & motion
Blur-to-focus entrance animations for the cards, AnimatePresence transitions into and out of the modal, and a body scroll lock while the modal is open.

Stack
- React functional component + Tailwind CSS.
- framer-motion for carousel, modal and entrance animation.
- lucide-react for playback and navigation icons.
- Geist as the typeface.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonials 01 Solra

- Slug: `jiro-testimonials-01-solra`
- Page: https://landingpageprompts.com/prompts/jiro-testimonials-01-solra
- Effect: An agency testimonial section with featured client quote, refined typography, and editorial layout. Built for design studios, creative agencies, and brand consultancies.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 23,104; total with repair and cross-check: 23,104
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonials 01 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonials 01 Solra".

Purpose
Present an agency's client praise as an editorial moment: one featured quote given room to breathe, with the polish a design studio would expect of its own site.

Layout & content
- A featured client quote as the section's centrepiece.
- Refined typography with a clear hierarchy between the quote and its attribution.
- An editorial layout, asymmetric or magazine-like rather than a plain centred block.
- Supporting photography or client imagery, plus navigation if more than one quote is shown.

Visual direction
Light and elegant: restrained type, generous whitespace, quiet imagery, and a layout that reads as considered rather than templated.

Interaction & motion
Animated carousel: move between client quotes with a smooth transition, and fade the section in on scroll.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the carousel transitions and lucide-react for navigation icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Testimonials 02 Solra

- Slug: `jiro-testimonials-02-solra`
- Page: https://landingpageprompts.com/prompts/jiro-testimonials-02-solra
- Effect: A studio testimonial section with split-screen layout, featured client story, and supporting visuals. Suited for design agencies, creative studios, and brand consultancies.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 20,821; total with repair and cross-check: 20,821
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Testimonial" block called "Testimonials 02 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Testimonial section for a modern website: "Testimonials 02 Solra".

Purpose
Let one client story carry the section for a studio, so prospective clients can see the depth of a working relationship. It is suited to design agencies, creative studios and brand consultancies.

Layout & content
- A split-screen layout with the client story on one side and supporting visuals on the other.
- A featured client story with a longer quote and a short framing line.
- Supporting visuals that give the story context without turning it into a gallery.
- A customer avatar with name and role attached to the quote.

Visual direction
Light, minimal and elegant: a balanced split with generous whitespace, refined typography, and flat surfaces so the quote and the visuals carry the section. No accent colour is needed.

Interaction & motion
The two halves reveal with a short offset fade on scroll, and the avatar and quote settle slightly after the visuals. Framer Motion drives the entrances; lucide-react supplies the small icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Text to Video Generator Hero

- Slug: `jiro-text-to-video-generator-hero`
- Page: https://landingpageprompts.com/prompts/jiro-text-to-video-generator-hero
- Effect: A text-to-video AI hero with prompt input preview, generated clip mockups, and creator-focused CTAs. Built for AI video generation platforms, content creation tools, and generative
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 29,541; total with repair and cross-check: 29,541
- Verification: 19/19 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "Text to Video Generator Hero". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "Text to Video Generator Hero".

Purpose
Show creators how a written prompt becomes a finished clip, putting the input and the generated result side by side in the first screen. Built for AI video generation platforms, content creation tools, and generative video products.

Layout & content
- A hero headline with creator-focused CTAs.
- A prompt input preview showing the text entry point.
- Generated clip mockups displayed as the output of that prompt.
- A dark video background behind the hero.
- Neutral placeholder prompt text and clip labels.

Visual direction
Dark, modern, and futuristic: a deep backdrop so the prompt input and generated clip mockups read as bright, legible panels against the video layer.

Interaction & motion
Animate the hero with Framer Motion, staggering the headline, prompt input, and clip mockups on load, with a gentle motion on the mockups to suggest playback. lucide-react supplies the icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Trusted Brand 2 Column

- Slug: `jiro-trusted-brand-2-column`
- Page: https://landingpageprompts.com/prompts/jiro-trusted-brand-2-column
- Effect: A dark-themed 2-column brand trust section featuring character-by-character animated headline (SplitText), 6 brand logo cards in a 3x2 grid with rotating conic gradient border anim
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 42,762; total with repair and cross-check: 42,762
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Brands" block called "Trusted Brand 2 Column". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Brands section for a modern website: "Trusted Brand 2 Column".

Purpose
Signal credibility by showing which organisations a product is associated with, in a dark two-column block that makes the logo row feel deliberate rather than decorative.

Layout & content
- A two-column layout: headline and supporting line on one side, logo cards on the other.
- A headline animated character by character, plus one line of supporting copy.
- Six brand logo cards arranged in a three-by-two grid, each holding a placeholder logo mark.
- Consistent card sizing so the grid reads as a set.
- Headings in Bricolage Grotesque and supporting text in Inter.
- Neutral placeholder logo marks only; no real brand names or marks.

Visual direction
Dark with gradient accents: quiet card surfaces, a rotating conic gradient border that appears on hover, and restrained typography. The gradient is the only colour event.

Interaction & motion
Cards stagger into view on scroll, lift on hover, and their logo marks scale slightly while the conic gradient border rotates, all driven by Framer Motion.

Stack
- React functional component + Tailwind CSS.
- framer-motion

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Trusted Brand Black

- Slug: `jiro-trusted-brand-black`
- Page: https://landingpageprompts.com/prompts/jiro-trusted-brand-black
- Effect: A dark-themed infinite scrolling brand marquee section featuring 8 white-inverted logo SVGs (Spotify, Asana, Medium, Gumroad, Framer, Stripe, HubSpot, GitHub), CSS keyframe animati
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 35,694; total with repair and cross-check: 35,694
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Brands" block called "Trusted Brand Black". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Brands section for a modern website: "Trusted Brand Black".

Purpose
Reassure visitors that established companies are already using the product. The section should present a recognisable set of logos in a calm, continuous strip that reads as proof rather than advertisement.

Layout & content
- A short title above the logo strip.
- Eight white-inverted logo SVGs: Spotify, Asana, Medium, Gumroad, Framer, Stripe, HubSpot and GitHub.
- A continuous horizontal marquee that loops the row.
- An edge fade gradient mask so logos enter and leave softly.

Visual direction
Dark and minimal, with white logos on a dark surface so the strip stays uniform. Keep the title understated and the spacing even across the row.

Interaction & motion
Animate the marquee with a CSS keyframe animation running for 30 seconds per loop, pause it on hover, and apply an opacity change to the hovered logo. Use Framer Motion for the title animation, and adjust the row responsively on mobile.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts beyond those named in the description.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Trusted Brand Box

- Slug: `jiro-trusted-brand-box`
- Page: https://landingpageprompts.com/prompts/jiro-trusted-brand-box
- Effect: A dark-themed brand grid section featuring 10 logo boxes in a responsive 5-column layout (2 on mobile, 3 on tablet, 5 on desktop), glassmorphic card styling with backdrop blur, hov
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,291; total with repair and cross-check: 19,291
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Brands" block called "Trusted Brand Box". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Brands section for a modern website: "Trusted Brand Box".

Purpose
Establish credibility quickly by presenting the logos of the companies the product works with in a clean, contained grid.

Layout & content
- A section heading naming the trusted-brands idea.
- Ten logo boxes holding neutral placeholder marks; the description supplies no real brand names, so do not invent any.
- A responsive grid: two columns on mobile, three on tablet, five on desktop.
- An optional short supporting line above the grid.

Visual direction
Dark theme with glassmorphism: each box is a frosted card with backdrop blur, a faint border and even internal padding, sitting on a subtly lit background.

Interaction & motion
Framer Motion for a staggered entrance across the grid, a hover lift of two pixels, background brightening on hover, and a press-down tap animation on each card.

Stack
- React functional component + Tailwind CSS.
- framer-motion.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Trusted Brand

- Slug: `jiro-trusted-brand`
- Page: https://landingpageprompts.com/prompts/jiro-trusted-brand
- Effect: A clean, minimal light-themed brand trust section featuring 6 logos (Stripe, HubSpot, GitHub, Spotify, Asana, Medium) in a centered flex-wrap layout, grayscale filter with color re
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 19,259; total with repair and cross-check: 19,259
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Brands" block called "Trusted Brand". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Brands section for a modern website: "Trusted Brand".

Purpose
This section gives a page immediate credibility by showing which companies the brand is associated with. It should communicate recognition quickly and then get out of the way.

Layout & content
- A clean, minimal section presenting 6 logos: Stripe, HubSpot, GitHub, Spotify, Asana and Medium.
- A centered flex-wrap layout that adapts to the available width.
- Responsive logo sizing across breakpoints.

Visual direction
Light and minimal, using the Inter font. Show the logos in grayscale by default and reveal their colour on hover, so the row reads as one calm band until the visitor engages with it.

Interaction & motion
Use Framer Motion for a fade-up scroll animation as the section enters, and keep the grayscale-to-colour hover transition smooth.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Video Generation Pricing

- Slug: `jiro-video-generation-pricing`
- Page: https://landingpageprompts.com/prompts/jiro-video-generation-pricing
- Effect: A dark-themed pricing section for AI video generation tools featuring 3 pricing cards with glassmorphic styling, dot grid hover effect, red/orange gradient glow at bottom, Play ico
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 86,268; total with repair and cross-check: 86,268
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Video Generation Pricing". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Video Generation Pricing".

Purpose
Sell plans for an AI video generation tool. The section must make the tiers easy to compare while signalling the product's creative, high-tech character, and it should push visitors toward the primary plan.

Layout & content
- Three pricing cards, each with a plan name, price and feature bullets.
- Feature bullets marked with a Play icon rather than a generic tick.
- A gradient call-to-action button on the primary tier.
- A split header layout introducing the plans.

Visual direction
Dark and glassmorphic, with translucent card surfaces, a dot grid hover effect and a red and orange gradient glow rising from the bottom of the section.

Interaction & motion
Animate the cards and header in with Framer Motion scroll animations, and let the dot grid and the glow respond on hover.

Stack
- React functional component + Tailwind CSS.
- framer-motion for the scroll animation, lucide-react for the Play icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Why Choose us 01 Finsyc

- Slug: `jiro-why-choose-us-01-finsyc`
- Page: https://landingpageprompts.com/prompts/jiro-why-choose-us-01-finsyc
- Effect: A fintech differentiation section with value pillar cards, security badges, and trust-driven copy. Built for accounting SaaS, treasury platforms, and financial software.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 16,659; total with repair and cross-check: 16,659
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Why Choose Us" block called "Why Choose us 01 Finsyc". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Why Choose Us section for a modern website: "Why Choose us 01 Finsyc".

Purpose
Explain why a financial software product is the safer, more credible choice. It is written for accounting SaaS, treasury platforms and financial software buyers who weigh trust heavily.

Layout & content
- A section heading with a short lead-in about what sets the product apart.
- Value pillar cards, each covering one reason to choose the product.
- Security badges that signal compliance and safety.
- Trust-driven supporting copy beneath or within the cards.

Visual direction
Light, minimal and modern. Calm surfaces, clear card structure and restrained accents so the badges and pillar headings read as the credible elements.

Interaction & motion
Animated entrance for the pillar cards with a staggered reveal, plus hover lift on each card.

Stack
- React functional component + Tailwind CSS.
- framer-motion for staggered reveals and hover motion.
- lucide-react for pillar and badge icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Why Choose Us 01 Luma

- Slug: `jiro-why-choose-us-01-luma`
- Page: https://landingpageprompts.com/prompts/jiro-why-choose-us-01-luma
- Effect: An AI platform differentiation section with value pillar cards, benefit highlights, and creator-focused narrative. Designed for AI media tools and generative SaaS.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 21,995; total with repair and cross-check: 21,995
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Why Choose Us" block called "Why Choose Us 01 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Why Choose Us section for a modern website: "Why Choose Us 01 Luma".

Purpose
Explain what sets an AI media platform apart, framing each difference as a benefit for creators. Designed for AI media tools and generative SaaS.

Layout & content
- Section heading stating the differentiation.
- Value pillar cards, one per reason to choose the platform.
- Benefit highlights under each pillar, written for creators.
- A closing line that points toward the next action.

Visual direction
Light, minimal and modern: quiet surfaces, consistent card rhythm, and one restrained accent to distinguish the pillars.

Interaction & motion
Reveal the value pillars with staggered entrance animation and add a subtle hover response on each card.

Stack
- React functional component + Tailwind CSS.
- framer-motion for staggered entrance and hover animation.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Why Choose Us 01 Orbit

- Slug: `jiro-why-choose-us-01-orbit`
- Page: https://landingpageprompts.com/prompts/jiro-why-choose-us-01-orbit
- Effect: A coaching differentiation section with value pillar cards, methodology highlights, and trust-building copy. Built for coaches, course creators, and personal brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 28,931; total with repair and cross-check: 28,931
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Why Choose Us" block called "Why Choose Us 01 Orbit". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Why Choose Us section for a modern website: "Why Choose Us 01 Orbit".

Purpose
Explain what sets a coaching offer apart, the pillars behind the method and the proof that it works, so a prospective client can see why this route is different. For coaches, course creators and personal brands.

Layout & content
- Value pillar cards, each naming one differentiator with a short explanation.
- Methodology highlights that group the pillars around how the coaching works.
- Trust-building copy, with any figures supplied as editable stand-ins.
- Supporting photography to keep the section human.

Visual direction
Light, modern and photography-led: portrait or lifestyle imagery grounds the claims, the cards stay minimal, and stats read as quiet supporting details.

Interaction & motion
Animated: cards enter with a staggered reveal on scroll and respond lightly on hover.

Stack
- React functional component + Tailwind CSS.
- lucide-react for the pillar icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Why Choose Us 01 Velara

- Slug: `jiro-why-choose-us-01-velara`
- Page: https://landingpageprompts.com/prompts/jiro-why-choose-us-01-velara
- Effect: An AI differentiation section with value pillar cards, capability highlights, and credibility-focused copy. Built for AI platforms, ML tools, and intelligent SaaS products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 39,710; total with repair and cross-check: 39,710
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Why Choose Us" block called "Why Choose Us 01 Velara". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Why Choose Us section for a modern website: "Why Choose Us 01 Velara".

Purpose
Explain what separates an AI product from the alternatives, for buyers of AI platforms, ML tools and intelligent SaaS. The section should establish credibility through specific pillars rather than broad claims.

Layout & content
- A section intro with a headline and one supporting line framing the difference.
- A grid of value pillar cards, each with a short title and a credibility-focused description.
- Capability highlights called out inside or beneath the pillars.
- Even card sizing so the grid reads as one argument rather than a list.

Visual direction
Dark and minimal on a firm grid: quiet card surfaces, thin borders, restrained type, and clear contrast between pillar titles and supporting copy. No decorative colour is required.

Interaction & motion
Pillar cards animate in on scroll with a short stagger and respond to hover with a subtle border or lift change. Framer Motion drives the reveals and lucide-react supplies the pillar icons.

Stack
- React functional component + Tailwind CSS.
- npm install framer-motion lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Why Choose Us 02 Luma

- Slug: `jiro-why-choose-us-02-luma`
- Page: https://landingpageprompts.com/prompts/jiro-why-choose-us-02-luma
- Effect: An AI media differentiation section with value pillars, capability highlights, and creator-driven copy. Built for AI video tools, content platforms, and generative AI products.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 24,702; total with repair and cross-check: 24,702
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Why Choose Us" block called "Why Choose Us 02 Luma". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Why Choose Us section for a modern website: "Why Choose Us 02 Luma".

Purpose
Explain what sets an AI media product apart, turning differentiation into a small set of clear value pillars. Built for AI video tools, content platforms, and generative AI products.

Layout & content
- A set of value pillars, each covering one reason to choose the product.
- Capability highlights supporting each pillar.
- Copy written in a creator-driven voice.
- Neutral placeholder pillar titles and descriptions.

Visual direction
Dark and modern: a deep base with pillars presented as distinct, evenly weighted blocks, and restrained accents so the differentiation points stay readable.

Interaction & motion
Animate the pillars with Framer Motion as they enter the viewport, staggering each one, and add interactive hover states that make each pillar feel responsive. lucide-react supplies the pillar icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Why us 01 Solra

- Slug: `jiro-why-us-01-solra`
- Page: https://landingpageprompts.com/prompts/jiro-why-us-01-solra
- Effect: A studio value proposition section with editorial layout, value pillar cards, and minimal typography. Designed for agencies, design firms, and creative consultancies.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 21,713; total with repair and cross-check: 21,713
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Why us 01 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Why us 01 Solra".

Purpose
This section states a studio's value proposition to prospective clients of an agency, design firm or creative consultancy. It should explain what makes the studio worth choosing, in an editorial voice rather than a sales one.

Layout & content
- An editorial layout introducing the studio's position.
- Value pillar cards, one per reason to choose the studio.
- Minimal typography carrying the argument.
- Supporting figures where they reinforce a pillar.

Visual direction
Light and minimal, with editorial proportions and restrained type. Let the pillar cards structure the reasoning and keep any numbers quiet and typographic.

Interaction & motion
Animate the pillar cards into view with framer-motion and count any numeric values up as they appear. Use lucide-react for pillar icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## Why us 03 Solra

- Slug: `jiro-why-us-03-solra`
- Page: https://landingpageprompts.com/prompts/jiro-why-us-03-solra
- Effect: An agency value section with split-image layout, methodology breakdown, and trust-driven narrative. Built for creative agencies, design studios, and B2B service brands.
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 31,521; total with repair and cross-check: 31,521
- Verification: 17/17 automated checks passed
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Features" block called "Why us 03 Solra". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Features section for a modern website: "Why us 03 Solra".

Purpose
Explain how an agency works and why that method is trustworthy, so prospective clients understand the approach before enquiring. Built for creative agencies, design studios and B2B service brands.

Layout & content
- A section header with a headline and one line framing the agency's position.
- A split-image layout pairing photography or studio imagery with the written narrative.
- A methodology breakdown listing the stages of how the agency works, each with a title and a short explanation.
- A trust-driven narrative paragraph connecting method to client outcomes.
- A closing call to action to start a conversation.
- Neutral placeholder methodology stage names and copy.

Visual direction
Light, minimal and elegant: generous whitespace, restrained neutral type, and imagery treated as a calm counterpart to the text rather than a focal spectacle.

Interaction & motion
The image and narrative fade and rise on scroll, and methodology stages stagger in sequence using Framer Motion. Icons come from lucide-react.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---

## ZiroBuild Hero

- Slug: `jiro-zirobuild-hero`
- Page: https://landingpageprompts.com/prompts/jiro-zirobuild-hero
- Effect: A construction and architecture hero section with bold serif typography, structural imagery, and CTA-driven layout. Combines industrial design cues with modern web aesthetics for b
- Model: `stealth/space-bunny-alpha` (Space Bunny Alpha (stealth/space-bunny-alpha)) on openrouter
- Build tokens: 46,842; total with repair and cross-check: 46,842
- Verification: no transcript attached (imported from a component gallery)
- Acceptance criteria:
  - the section's own structure is present (headings, cards, panels as the brief describes)
  - exactly one <h1> and real header/main/footer landmarks
  - no external media: no img src, no video, no remote URL
  - no horizontal overflow at 390 / 768 / 1440
  - prefers-reduced-motion leaves the page static and readable
  - window.__DEMO__.ready becomes true within 5s
  - window.__DEMO__.frames advances (>= 20 frames in 1.2s)
  - window.__DEMO__.errors is empty
  - zero console errors and zero page errors
  - zero failed network requests
  - exactly one <h1> with non-empty text
  - header, main, footer landmarks present
  - no horizontal overflow at 390 / 768 / 1440 widths
  - no horizontal overflow after 2s of animation
  - prefers-reduced-motion: reduce leaves the page usable and errors empty

### Prompt

````text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Header" block called "ZiroBuild Hero". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Header section for a modern website: "ZiroBuild Hero".

Purpose
Open a construction, real estate or building-software page with a sense of physical scale. The hero should combine structural imagery with a bold statement and a clear route to the next step.

Layout & content
- A bold serif headline carrying the main statement.
- Structural imagery of buildings or architectural detail behind or beside the copy.
- Short supporting copy under the headline.
- A CTA-driven layout with a primary action and a secondary one.

Visual direction
Dark and minimal, with industrial design cues: heavy serif type, high-contrast imagery and restrained interface elements. Keep the modern web aesthetics in the layout and spacing rather than in ornament.

Interaction & motion
Use a looping video background with animated text reveals over it. Keep the motion slow and steady so the imagery reads as architectural rather than busy, and hold text contrast over the footage. lucide-react can supply small CTA icons.

Stack
- React functional component + Tailwind CSS.
- lucide-react.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
````

---


# Report: Research report

Source: https://landingpageprompts.com/reports/01-research

### Research — What MotionSites.ai actually is, and how it is built

*Lead-authored research pass, 2026-10-04. Sources are linked inline. Everything below was
verified against the live site, its shipped bundles, and third-party references — not
taken from marketing copy.*

---

#### 1. The idea in one paragraph

[motionsites.ai](https://motionsites.ai/) is **not** a website builder and it is not a
template marketplace. It is a **library of extremely precise, copy-paste AI prompts** that
make an LLM coding agent produce a *cinematic* landing page. The product is the prompt
text. The tagline is literal: *"Build beautiful landing pages in minutes with our
ready-to-use prompts. Just copy, paste, and launch."* The user pastes one prompt into
Lovable / Cursor / Claude Code / Codex and gets back a finished, animated page.

The business is therefore **selling the prompt corpus**, not software. Everything else on
the site (Academy, MCP server, Animated Backgrounds, Affiliates, custom-prompt service)
exists to feed, defend or upsell that corpus.

Source: [homepage](https://motionsites.ai/), [request page](https://motionsites.ai/request),
[MCP page](https://motionsites.ai/mcp).

---

#### 2. Why the prompts work — the format is the moat

I read four prompts from the publicly archived corpus
([xiiiabu/motionsites.ai](https://github.com/xiiiabu/motionsites.ai)). The format is
consistent and is the real invention:

| Element | What it does |
|---|---|
| `Category` / `Type` / `License` header | Triage + paywall signalling |
| Video preview embed | Sells the outcome before the user reads a word |
| One ```text block, 1.5k–11k chars | The deliverable |
| **Exact** class names, hex values, px values | Removes all model guesswork |
| **Exact** animation timings and easing curves | This is what makes it look expensive |
| **Exact** DOM structure and Tailwind utility strings | Output is deterministic across models |
| Explicit tech stack pin (`Vite + React 18 + TS + Tailwind 3 + lucide-react`) | Prevents stack drift |
| Negative constraints ("Default Tailwind config, no extensions. No other UI libraries.") | Prevents slop |

The `Asme` prompt, for example, does not say "make a glassy hero". It specifies the
`.liquid-glass` class down to `background: rgba(255,255,255,0.01)` + `background-blend-mode:
luminosity`, a `::before` pseudo-element with `padding: 1.4px`, a six-stop
`linear-gradient(180deg, …)` edge, and the `-webkit-mask-composite: xor` border-only mask
trick. It specifies the video fade as a **500 ms requestAnimationFrame fade-in, 500 ms
fade-out at 0.55 s remaining, `fadingOutRef` guard against re-trigger, 100 ms reset to
`currentTime = 0`**. That level of specification is why the output looks art-directed
rather than generated.

**Takeaway for our clone:** the prompt is the product, and specificity is the value.
A vague prompt library is worthless. Our upgrade is to make each prompt *verifiable*.

---

#### 3. Site structure (verified from the shipped router, not guessed)

I extracted the complete route table from `/assets/index-g57HynbI.js` (43 route
components, 42 paths). The public information architecture is:

**Core funnel**
| Path | Purpose |
|---|---|
| `/` | Prompt gallery — the money page |
| `/apps` | "Apps" category view |
| `/sections` | Section-level prompts |
| `/templates` | Template view |
| `/motionsite` | Single design detail page |
| `/unlimited` | Paid plan / paywall upsell |
| `/saved` | Saved prompts (account) |
| `/auth`, `/reset-password`, `/unsubscribe` | Account plumbing |

**Free traffic + lead magnets**
| Path | Purpose |
|---|---|
| `/backgrounds` | Animated background gallery — each tile has **Copy URL** |
| `/gradients` | Gradient gallery |
| `/design-md` | A `DESIGN.md` export (agent-readable design system) |
| `/academy` + `/lesson/$slug` | Video tutorials; each lesson carries the prompt used |
| `/mcp` | Connect an AI agent to the prompt library over MCP |

**Money**
| Path | Purpose |
|---|---|
| `/request`, `/request-thanks` | Done-for-you custom prompt: **$99** hero, **$249** landing (list $599 / $1,499) |
| `/affiliates`, `/affiliate-dashboard`, `/affiliate-tracking/$affiliate` | Affiliate program |
| `/submit-earn`, `/creator/$handle`, `/creator/` | Creator program — submit prompts, earn |
| `/payment-success` | Post-purchase |
| `/contact`, `/public-contact`, `/terms`, `/refund-policy`, `/cookie-policy` | Ops |

**Internal**
`/admin/{affiliates,creators,featured,grant-access,popularity,bolt-cta,manus-cta}`,
`/upload-prompts`, `/home-old`, `/.lovable/oauth/consent`.

##### The gallery itself
Above the grid: category tabs **All · Popular · Apps · Sections · Recent**. Each card is a
looping preview (`.gif` or Mux-hosted `animated.webp`) plus a title and category badge,
and a copy action. The homepage grid mixes hero sections, full landing pages, footers and
CTA sections — so a user can buy *one section* or a *whole page*. Sections are the cheap
entry point; landing pages are the expensive one. That is a deliberate pricing ladder.

---

#### 4. Tech stack (from response headers, bundle and asset paths)

| Layer | Evidence | Conclusion |
|---|---|---|
| SPA | `assets/Index-*.js`, `react-dom-*.js`, `routes-*.js`, `jsx-runtime-*.js` | React 19 + Vite, code-split by route |
| Styling | `styles-*.css` with `--color-*: oklch(...)` and `@theme` variables | **Tailwind CSS v4** |
| Design tokens | `--background:#121212`, `--card:#292929`, `--border:#303030`, `--foreground:#f5f5f5`, `--accent:#303030`, `--font-sans: -apple-system, …` | Near-black neutral system, system font stack |
| Hosting | `server: cloudflare`, `x-deployment-id`, `__cf_bm` cookie | Cloudflare (Pages/Workers) |
| Video | `image.mux.com/<playback-id>/animated.webp?width=640&fps=15` | **Mux** for preview encoding |
| Backend | MCP endpoint at `xgdzyqfalbibzelpdpvr.supabase.co/functions/v1/mcp` | **Supabase Edge Functions** |
| Bot/edge script | `/~flock.js` | Cloudflare-adjacent edge injection |
| Analytics | `googletagmanager.com/gtag/js?id=G-9KTL0DN6Q5`, Facebook Pixel `938156741961384` | GA4 + Meta pixel |
| Fonts | `fonts.googleapis.com/icon?family=Material+Icons` + per-prompt Google Fonts | Material Icons for chrome, per-design fonts inside prompts |

**Product surfaces worth noting:** the MCP server is a single HTTP transport endpoint —
`claude mcp add motionsites --scope user --transport http https://…/functions/v1/mcp` —
and the free tier is gated to **3 free prompts**; paid plans unlock "500+". So the actual
corpus is ~500 prompts, of which 65 are publicly archived.

**Creator:** the site links to [designrocket.io](https://designrocket.io/),
[youtube.com/@ViktorOddy](https://www.youtube.com/@ViktorOddy) and
[x.com/viktoroddy](https://x.com/viktoroddy). The Academy page's featured videos are his.

---

#### 5. Business model, decoded

```
Free tier (3 prompts)  ──►  paid "Unlimited" subscription  ──►  done-for-you prompts
        │                              │                              $99 / $249
        │                              │
        ├── Academy videos  ───────────┘        (top of funnel, YouTube-native)
        ├── Animated Backgrounds / Gradients    (free SEO surfaces, "Copy URL")
        ├── MCP server                          (distribution into Claude/Cursor/Codex)
        ├── Affiliates                          (paid acquisition)
        └── Creator program (submit & earn)     (supply-side scaling of the corpus)
```

Three things are clever here and worth copying:

1. **The MCP server is distribution, not a feature.** Once the library is an MCP server,
   every AI agent in the user's editor can pull a prompt without visiting the site. The
   site becomes a backend. That is the strongest idea on the page.
2. **Free surfaces are the SEO moat.** `/backgrounds` and `/gradients` are free,
   copy-pasteable assets that rank and get shared. They cost almost nothing to produce.
3. **Section-level SKUs.** Selling one hero section separately from a full landing page
   lets a buyer enter at a low price point and upgrade later.

---

#### 6. Cross-check

I asked an independent model (`gemini-3.5-flash`, Workbuddy proxy) to review the above
findings against the raw evidence and flag anything unsupported. Result and any
corrections are recorded in [04-crosscheck.md](./04-crosscheck.md).

---

#### 7. What we will do differently (the "upgrade on top")

The original sells prompts on *vibes* — a looping GIF and a claim. Nothing tells you
whether the prompt still works, what it costs to run, or which model produced the preview.
That is the gap our free clone attacks:

| MotionSites | LandingPagePrompts (ours) |
|---|---|
| Preview GIF, no provenance | Live, runnable demo + the exact model that built it |
| No cost information | **Exact token usage** per prompt, from the API response |
| No quality claim | **Machine-verified**: 14–15 automated checks per prompt, headless browser |
| Copy prompt → trust | Copy prompt **+ full verification transcript** |
| Paid, 3 free prompts | Free, MIT, no account |
| Closed corpus | Open corpus, every prompt in the repo as Markdown |
| MCP server as a paid hook | A static `prompts.json` any agent can read for free |

Everything we ship is static HTML/CSS/JS, so it costs $0 to host on GitHub Pages or
Cloudflare Pages and cannot rot.

---

#### Sources

- [motionsites.ai](https://motionsites.ai/) — homepage, `/backgrounds`, `/mcp`, `/academy`, `/request`
- [github.com/xiiiabu/motionsites.ai](https://github.com/xiiiabu/motionsites.ai) — archived 65-prompt corpus
- [Product Hunt — Motionsites](https://www.producthunt.com/products/motionsites)
- [Tencent Cloud developer article](https://cloud.tencent.com.cn/developer/article/2709321) — Chinese-language walkthrough
- [Scamadviser listing](https://www.scamadviser.com/check-website/motionsites.ai) — domain age / trust signals
- Shipped bundles: `/assets/index-g57HynbI.js`, `/assets/styles-DxzY-U5-.css`, `/assets/Index-C7hLBIV7.js`

---


# Report: Blueprint

Source: https://landingpageprompts.com/reports/02-blueprint

### Blueprint — LandingPagePrompts, a free verified prompt library

*The build plan: what we copy conceptually from motionsites.ai, what we deliberately do
differently, and the exact architecture of what is in this repository.*

---

#### 1. The one-line thesis

**MotionSites sells prompts on vibes. LandingPagePrompts gives them away with receipts.**

A prompt library is only worth as much as its prompts are trustworthy. The original proves
nothing: you see a looping GIF, you pay, you paste, you hope. We keep the thing that makes
the category valuable — hyper-specific, art-directed prompt text — and add the three things
that make it *verifiable*: model attribution, exact token cost, and automated test results.

That reframes the whole product. It is not "cheaper MotionSites". It is **an evidence-backed
prompt library**, which is a different and defensible thing.

---

#### 2. What we copy (conceptually), and what we change

| MotionSites does | We do | Why |
|---|---|---|
| Curated prompt gallery with category tabs | Same gallery, same tabs | It is the correct information architecture for browsing prompts |
| Preview per prompt | **Live, running iframe preview** of the actual generated page | A GIF can be faked; a running page cannot |
| "Copy prompt" | Same, plus the full prompt is visible inline and as `.md` | Copying blind is bad UX |
| Free tier of 3 prompts, paid unlimited | **All prompts free, MIT, no account** | Removes the reason to pirate it |
| Animated Backgrounds as a free SEO surface | Same surface, 16 procedural backgrounds, copy-CSS | Proven top-of-funnel play, and genuinely useful |
| MCP server as a paid hook | A **static `prompts.json`** any agent can read for free | Distribution without a paywall or a server bill |
| Academy videos | `how-it-works.html` documenting the actual pipeline | We have no video budget; we have transparency |
| Custom prompt service ($99/$249) | Not offered | Out of scope for a free static site |
| Supabase + Cloudflare Workers + Mux | **Static files only** | $0 hosting, nothing to break, nothing to maintain |

---

#### 3. Architecture

```
landingpageprompts/
├── index.html                  # prompt library: filters, search, live previews, modal
├── backgrounds.html            # 16 procedural animated backgrounds, copy CSS/HTML
├── how-it-works.html           # the verification pipeline, explained honestly
├── mcp.html                    # how to point any agent at prompts.json
├── 404.html
│
├── assets/
│   ├── css/site.css            # the entire design system, one file
│   ├── js/data.js              # GENERATED: window.LANDINGPAGEPROMPTS (catalog + evidence)
│   ├── js/app.js               # rendering, filtering, live previews, modal, clipboard
│   └── previews/*.png          # verification screenshots (desktop + mobile per demo)
│
├── demos/<slug>/index.html     # GENERATED: the six demo pages. One file each.
├── prompts/
│   ├── _contract.mjs           # shared technical contract
│   ├── specs.mjs               # the six design briefs (source of truth)
│   ├── <slug>.md               # GENERATED: published prompt doc + verification block
│   └── index.json              # GENERATED: agent-readable prompt index
│
├── data/
│   ├── catalog.json            # GENERATED: what the prompts are
│   ├── jobs.json               # GENERATED: runner input
│   ├── ledger.jsonl            # APPEND-ONLY: every model call, with exact usage
│   ├── raw/<id>.txt            # raw model responses, reasoning + content, untouched
│   ├── verification.json       # GENERATED: per-check browser results
│   ├── crosscheck.json         # GENERATED: independent model reviews
│   └── last-run.json           # GENERATED: last runner summary
│
├── reports/
│   ├── 01-research.md/.html    # what motionsites.ai is and how it is built
│   ├── 02-blueprint.md/.html   # this file
│   ├── 03-verification.md/.html# generated evidence
│   └── 04-crosscheck.md/.html  # generated evidence
│
└── tools/
    ├── runner.mjs              # multi-platform model runner + exact token ledger
    ├── build_jobs.mjs          # specs -> prompt docs + jobs + catalog
    ├── verify.mjs              # Playwright/Chromium verification harness
    ├── crosscheck.mjs          # independent adversarial model review
    ├── render_site.mjs         # joins catalog + evidence into assets/js/data.js
    └── reports.mjs             # renders the Markdown/HTML evidence reports
```

**Hard constraint honoured everywhere: no build step, no framework, no bundler, no
dependencies, no external media.** Open `index.html` from disk and it works. Push the folder
to GitHub Pages or Cloudflare Pages and it is live for $0.

---

#### 4. The generation pipeline

```
prompts/specs.mjs ──► build_jobs.mjs ──► data/jobs.json
                                            │
                                            ▼
                                    tools/runner.mjs
                     (streams to Workbuddy :8788 / cmd-code :3050)
                                            │
                     ┌──────────────────────┼──────────────────────┐
                     ▼                      ▼                      ▼
        demos/<slug>/index.html   data/raw/<id>.txt      data/ledger.jsonl
        (the artifact)            (raw response)          (exact token usage)
                                            │
                                            ▼
                                    tools/verify.mjs
                              (Playwright + Chromium, 14–15 checks)
                                            │
                                            ▼
                                  data/verification.json
                                            │
                                            ▼
                                  tools/crosscheck.mjs
                        (a DIFFERENT model reviews brief vs. code)
                                            │
                                            ▼
                                   data/crosscheck.json
                                            │
                                            ▼
                        render_site.mjs + reports.mjs
                    (assets/js/data.js, prompts/*.md, reports/*)
```

Every arrow is a script in `tools/` that can be re-run. Nothing is hand-waved.

##### Why the runner streams

A 40 000-token generation held on an idle HTTP connection gets dropped by the proxy. The
runner therefore uses SSE on both wire protocols — OpenAI `chat.completions` for the
Workbuddy proxy and Anthropic `messages` for cmd-code — and reassembles the stream. Token
usage arrives in the terminal chunk of each stream, so the accounting is exact rather than
estimated.

##### Why raw responses are kept

The first run failed silently: one model returned 1 130 completion tokens and 60 characters
of content. Without the raw response that is unexplainable. Now every attempt is written to
`data/raw/<id>.attempt<n>.txt` with the reasoning block and the content block separated, and
a generation that does not yield a real HTML document is treated as a **failure and retried**,
not written out as a result.

---

#### 5. The design system

Deliberately neutral, so six very different demo palettes remain the loudest thing on the
page. Near-black shell, one accent, no gradients on the chrome.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0a0a0b` | page |
| `--bg-elev` | `#111113` | raised surfaces |
| `--card` | `#16161a` | cards |
| `--border` | `#242429` | hairlines |
| `--fg` | `#f5f5f7` | primary text |
| `--fg-dim` / `--muted` / `--faint` | `#b9b9c2` / `#8b8b96` / `#5c5c66` | secondary → tertiary |
| `--accent` | `#d4ff4f` | "verified", primary CTAs |
| `--ok` / `--warn` / `--bad` | `#4ade80` / `#fbbf24` / `#f87171` | check results |
| `--serif` | Instrument Serif | display headings only |
| `--sans` | Inter + system stack | everything else |

The accent is used for exactly one semantic job — *this has been verified* — which is why
it never feels decorative.

---

#### 6. The six prompts

Each targets one distinct motion effect, so the library is a survey of techniques rather
than six variations on "fade in on scroll". Each is executed by a **different model**, which
also makes the library a small model-comparison study.

| Prompt | Effect | Platform | Model |
|---|---|---|---|
| Liquid Glass Voyage | liquid-glass morphism over a procedural cinematic film | Workbuddy | `hy4-preview-f` |
| Scroll Atlas | pinned scroll-scrubbed narrative + progress rail | cmd-code | `xiaomi/mimo-v2.6-pro` |
| Magnetic Orbit | cursor-reactive magnetism, spotlight, custom cursor | Workbuddy | `glm-5.3` |
| Neural Drift | canvas constellation field, depth parallax, repulsion | Workbuddy | `kimi-k3` |
| Kinetic Type | split-text reveal, velocity-skewed marquees, scroll-linked scale | Workbuddy | `gemini-3.5-flash` |
| Stack Deck | pinned 3D card deck that stacks then fans into a bento | Workbuddy | `gpt-5.6-terra` |

`gpt-6-astra` and `gpt-5.6-sol` were excluded by request and are used nowhere.

##### The shared technical contract

Every prompt ends with the same 10-clause contract: one self-contained file, vanilla only,
no external media, Google Fonts as the only permitted request, responsive at 390/768/1440,
one `h1` plus real landmarks, `prefers-reduced-motion` support, 60fps discipline, a
`window.__DEMO__` telemetry hook, and zero console noise. This is what makes the output
*verifiable* — the contract is written so that a machine can check it.

---

#### 7. Cost model

| | MotionSites | LandingPagePrompts |
|---|---|---|
| Prompts | ~500, 3 free | 6, all free, MIT |
| Hosting | Cloudflare + Supabase + Mux | any static host, $0 |
| Build | React 19 + Vite + Tailwind 4 | plain files |
| Running cost | subscription | the tokens you choose to spend |
| Evidence | none | ledger + verification + cross-check |

The only real cost in this project is inference, and it is published to the token.

---


# Report: Verification report

Source: https://landingpageprompts.com/reports/03-verification

### Verification report

Every prompt in this library was executed by a real model on a real API, and the resulting
page was then attacked by an independent headless-browser harness. Nothing below is a claim —
it is output.

#### Summary

| | |
|---|---|
| Prompts executed | 336 |
| Demos fully passing | **200 / 336** |
| Individual checks | **4523 / 4606 passed** |
| Build tokens spent | **10,302,527** |
| Models used | 8 |
| Platforms | Workbuddy proxy, cmd-code (both local build proxies, not publicly reachable) |
| Verifier | Playwright + Chromium, headless, 1440×900 and 390×844 |

#### How a prompt is verified

The harness boots a local static server, loads the generated page in headless Chromium and
runs the same 14–15 checks against every demo:

1. **Runtime telemetry** — the page must expose `window.__DEMO__` and set `ready = true`.
2. **Frame liveness** — `frames` must advance by ≥ 20 in 1.2 s, proving a real rAF loop.
3. **Self-reported errors** — `window.__DEMO__.errors` must be empty.
4. **Console errors** — zero `console.error` output.
5. **Uncaught exceptions** — zero `pageerror` events.
6. **Network** — zero failed requests.
7. **Canvas liveness** — if a canvas exists it must paint (mean luminance, stdev, coverage)
   and its content hash must change over 800 ms.
8. **Semantics** — exactly one non-empty `h1`; `header`/`main`/`footer` present.
9. **Accessible names** — no unnamed `button` or `a`.
10. **Document metadata** — a real `<title>` and a `lang` attribute.
11. **Layout integrity** — no horizontal overflow at 390, 768 or 1440 px.
12. **Reduced motion** — with `prefers-reduced-motion: reduce` the page still renders real
    content and throws nothing.
13. **Prompt-specific criteria** — 2–4 checks derived from that prompt's own brief.

#### Per-prompt results

##### Liquid Glass Voyage — `liquid-glass-voyage`

| Field | Value |
|---|---|
| Platform | Workbuddy proxy (`workbuddy`) |
| Model | `hy4-preview-f` |
| Prompt size | 8,149 chars |
| Build tokens | **33,814** over 1 successful call(s), 3 attempt(s) |
| Demo size | 22.0 KB |
| Result | **21/21 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 22545 bytes |
| ✅ | window.__DEMO__.ready became true | 13 frames, effects: canvas-film, palette-crossfade, glass-tilt, stat-counters |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 48 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 46.39, stdev 13.48, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 2041299372 -> 2163609095 |
| ✅ | exactly one <h1> with text | "We chart the light
that never reaches shore." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Abyssal — Liquid Glass Voyage |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | [prompt] liquid-glass element has real backdrop-filter | blur(14px) saturate(1.4) |
| ✅ | [prompt] stat counters reach 4120 / 41 / 900 | found all three targets |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=332 pageErrors=0 |

##### Scroll Atlas — `scroll-atlas`

| Field | Value |
|---|---|
| Platform | cmd-code (`cmdcode`) |
| Model | `MiniMaxAI/MiniMax-M3` |
| Prompt size | 6,792 chars |
| Build tokens | **12,198** over 2 successful call(s), 12 attempt(s) |
| Demo size | 25.0 KB |
| Result | **23/23 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 25627 bytes |
| ✅ | window.__DEMO__.ready became true | 25 frames, effects: pinned-stage, scroll-progress, globe-3d, globe-pins, globe-route, rail-progress, beat-crossfade, col |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 65 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 60.63, stdev 75.4, coverage 0.4004 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 1099744252 -> 2371913888 |
| ✅ | exactly one <h1> with text | "Nine degrees of nowhere" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Atlas Nine — Scroll Atlas |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | [prompt] scroll stage taller than 2x viewport | true |
| ✅ | [prompt] sticky pinned element present | true |
| ✅ | [prompt] all 4 beat texts in DOM | 4/4 |
| ✅ | [prompt] canvas repaints after scroll | 669830 -> 1413358 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=768 pageErrors=0 |

##### Magnetic Orbit — `magnetic-orbit`

| Field | Value |
|---|---|
| Platform | Workbuddy proxy (`workbuddy`) |
| Model | `glm-5.3` |
| Prompt size | 6,762 chars |
| Build tokens | **7,209** over 1 successful call(s), 7 attempt(s) |
| Demo size | 16.9 KB |
| Result | **21/21 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17283 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: custom-cursor, spotlight-warm, spotlight-cold, magnetism, node-drift, node-tilt, marquee |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 34 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Design that
pulls back." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | FIELD — Design that pulls back |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | [prompt] custom cursor (fixed, pointer-events:none) present | true |
| ✅ | [prompt] >= 3 data-magnetic elements | 6 |
| ✅ | [prompt] radial-gradient spotlight present | true |
| ✅ | [prompt] marquee transform advances over time | none \| matrix(1, 0, 0, 1, -135.2, 0) -> none \| matrix(1, 0, 0, 1, -159.03, 0) |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=378 pageErrors=0 |

##### Neural Drift — `neural-drift`

| Field | Value |
|---|---|
| Platform | Workbuddy proxy (`workbuddy`) |
| Model | `kimi-k3` |
| Prompt size | 6,378 chars |
| Build tokens | **32,693** over 1 successful call(s), 2 attempt(s) |
| Demo size | 26.8 KB |
| Result | **21/21 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 27426 bytes |
| ✅ | window.__DEMO__.ready became true | 19 frames, effects: constellation-field, depth-parallax, spatial-hash-connections, hub-nodes, pointer-repulsion, signal- |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 40 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 6.19, stdev 2.86, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 2449348892 -> 3318836846 |
| ✅ | exactly one <h1> with text | "Every signal,
finally connected." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Cortex — Every signal, finally connected |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | [prompt] monospace telemetry strip present | true |
| ✅ | [prompt] three feature cards present | 3/3 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1132 pageErrors=0 |

##### Kinetic Type — `kinetic-type`

| Field | Value |
|---|---|
| Platform | Workbuddy proxy (`workbuddy`) |
| Model | `gemini-3.5-flash` |
| Prompt size | 6,438 chars |
| Build tokens | **11,429** over 1 successful call(s), 5 attempt(s) |
| Demo size | 22.7 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 23208 bytes |
| ✅ | window.__DEMO__.ready became true | 37 frames, effects: split-text-reveal, velocity-marquees, scroll-scale |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "SLOW DOWN AND
read the thing." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | OFFCUT — Independent Magazine |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | [prompt] h1 split into >= 4 word spans | 6 .w elements |
| ✅ | [prompt] >= 3 oversized nowrap marquee bands | 6 |
| ✅ | [prompt] light page (background luminance > 0.6) | 0.945 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1732 pageErrors=0 |

##### Stack Deck — `stack-deck`

| Field | Value |
|---|---|
| Platform | Workbuddy proxy (`workbuddy`) |
| Model | `gpt-5.5` |
| Prompt size | 6,724 chars |
| Build tokens | **7,752** over 1 successful call(s), 5 attempt(s) |
| Demo size | 17.8 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 18218 bytes |
| ✅ | window.__DEMO__.ready became true | 49 frames, effects: scroll-stacked-deck, fan-out-bento, stat-counters, reduced-motion-fallback |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Ship on Friday.
Sleep on Saturday." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Harbour — Stack Deck |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | [prompt] card elements present | 5 elements matching [class*=card] |
| ✅ | [prompt] stat counters reached targets after scroll | 4/4 markers |
| ✅ | [prompt] card transform changes on scroll | matrix3d(0.92, 0, 0, 0, 0, 0.874972, 0.3 -> matrix(1, 0, 0, 1, 0, 0) |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1529 pageErrors=0 |

##### Aurora Freight — `aurora-freight`

| Field | Value |
|---|---|
| Platform | Workbuddy proxy (`workbuddy`) |
| Model | `hy4-preview-f` |
| Prompt size | 38,682 chars |
| Build tokens | **47,432** over 1 successful call(s), 1 attempt(s) |
| Demo size | 24.1 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 24632 bytes |
| ✅ | window.__DEMO__.ready became true | 16 frames, effects: aurora-canvas, palette-crossfade, amber-sweep, grain, entrance-stagger, pill-shine |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 22 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 43.55, stdev 30.5, coverage 0.9851 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 3102098699 -> 3604924717 |
| ✅ | exactly one <h1> with text | "Move freight with an AI that
already knows the road." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Aurora Freight — Freight Intelligence, Orchestrated |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=379 pageErrors=0 |

##### Basalt — `basalt`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 26,881 chars |
| Build tokens | **51,075** over 1 successful call(s), 4 attempt(s) |
| Demo size | 28.1 KB |
| Result | **18/18 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 28816 bytes |
| ✅ | window.__DEMO__.ready became true | 27 frames, effects: basalt-rise, basalt-fade, basalt-scan, basalt-pulse, face-light |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 115 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "POWER, BUILT FROM THE EARTH." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Basalt — Geothermal Energy From Deep Ground. |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=438 pageErrors=0 |

##### Bracket — `bracket`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 24,374 chars |
| Build tokens | **58,247** over 1 successful call(s), 2 attempt(s) |
| Demo size | 34.7 KB |
| Result | **18/18 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 35570 bytes |
| ✅ | window.__DEMO__.ready became true | 55 frames, effects: box-draw, corner-dots, red-correction |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 75 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Keep the useful part." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Marginalia — Keep the useful part |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=671 pageErrors=0 |

##### Cadence — `cadence`

| Field | Value |
|---|---|
| Platform | cmd-code (`cmdcode`) |
| Model | `xiaomi/mimo-v2.6-pro` |
| Prompt size | 26,614 chars |
| Build tokens | **31,903** over 1 successful call(s), 10 attempt(s) |
| Demo size | 35.6 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 36424 bytes |
| ✅ | window.__DEMO__.ready became true | 24 frames, effects: metronome-arc, beat-grid, pivot-rings, beat-meter, film-grain |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 37 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 21.41, stdev 64.65, coverage 0.1006 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 3286108806 -> 2911043296 |
| ✅ | exactly one <h1> with text | "Every surface
on the beat." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Cadence — Every Surface on the Beat |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=403 pageErrors=0 |

##### Camber — `camber`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 31,421 chars |
| Build tokens | **42,702** over 1 successful call(s), 2 attempt(s) |
| Demo size | 26.2 KB |
| Result | **19/20 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 26801 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: line-one-fade, line-two-rise, specular-sweep, nav-rule-scale, conic-orbit, paper-grain-drift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 23 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 2.08, stdev 14.7, coverage 0.0236 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ❌ | canvas keeps repainting (content changes) | hash 1760415996 -> 1760415996 |
| ✅ | exactly one <h1> with text | "Holdings,
held in balance." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Ledger & Vane — Private Banking for Inherited Holdings |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=399 pageErrors=0 |

##### Cant — `cant`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 24,903 chars |
| Build tokens | **57,801** over 1 successful call(s), 3 attempt(s) |
| Demo size | 29.8 KB |
| Result | **18/18 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 30520 bytes |
| ✅ | window.__DEMO__.ready became true | 37 frames, effects: bar-grow, clip-sweep, row-highlight |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 75 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "MOVE HEAVY.
KEEP LEANING." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Ferrolane — Northern Europe, on the cant |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=505 pageErrors=0 |

##### Carbon — `carbon`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 22,749 chars |
| Build tokens | **53,910** over 1 successful call(s), 6 attempt(s) |
| Demo size | 25.5 KB |
| Result | **18/18 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 26108 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: header-reveal, eyebrow-reveal, title-reveal, rule-reveal, claim-reveal, body-reveal, actions-reveal,  |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 71 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "CARBON" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | CARBON — Woven Composites |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=397 pageErrors=0 |

##### Cardinal — `cardinal`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 16,062 chars |
| Build tokens | **34,133** over 1 successful call(s), 4 attempt(s) |
| Demo size | 14.8 KB |
| Result | **18/18 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 15179 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: spring-needle, magnetic-pulse |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 69 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "NAVIGATE WITH ABSOLUTE CERTAINTY" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | CARDINAL — Precision Navigation |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=117 pageErrors=0 |

##### Cascade — `cascade`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 26,757 chars |
| Build tokens | **58,236** over 1 successful call(s), 6 attempt(s) |
| Demo size | 35.3 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 36106 bytes |
| ✅ | window.__DEMO__.ready became true | 11 frames, effects: cascade.tokens, cascade.trails, cascade.scan |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 26.71, stdev 32.42, coverage 0.9999 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 4293200450 -> 3353705147 |
| ✅ | exactly one <h1> with text | "CASCADE" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | CASCADE — Log intelligence in motion |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=442 pageErrors=0 |

##### Chrome Bloom — `chrome-bloom`

| Field | Value |
|---|---|
| Platform | cmd-code (`cmdcode`) |
| Model | `MiniMaxAI/MiniMax-M3` |
| Prompt size | 29,235 chars |
| Build tokens | **18,097** over 1 successful call(s), 1 attempt(s) |
| Demo size | 26.3 KB |
| Result | **17/18 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 26923 bytes |
| ✅ | window.__DEMO__.ready became true | 8 frames, effects: liquid-chrome, conic-sheen, hue-drift, grain-texture, mobile-menu |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 14 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Brands, in liquid metal." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Bloom — Generative Brand Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=344 pageErrors=0 |

##### Data Tide — `data-tide`

| Field | Value |
|---|---|
| Platform | Workbuddy proxy (`workbuddy`) |
| Model | `glm-5.3` |
| Prompt size | 43,319 chars |
| Build tokens | **24,841** over 1 successful call(s), 1 attempt(s) |
| Demo size | 33.4 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 34244 bytes |
| ✅ | window.__DEMO__.ready became true | 6 frames, effects: ribbon-field, surge-envelope, glass-panel, metric-ticker, sparkline-svg, entrance-stagger, pill-shine |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 35 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 20.39, stdev 52.28, coverage 0.1342 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 557258054 -> 2006951307 |
| ✅ | exactly one <h1> with text | "All your signals,
one living tide." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Tide — See the whole signal |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=472 pageErrors=0 |

##### Echo — `echo`

| Field | Value |
|---|---|
| Platform | cmd-code (`cmdcode`) |
| Model | `xiaomi/mimo-v2.6-pro` |
| Prompt size | 26,743 chars |
| Build tokens | **33,938** over 1 successful call(s), 1 attempt(s) |
| Demo size | 25.9 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 26567 bytes |
| ✅ | window.__DEMO__.ready became true | 11 frames, effects: sonar-sweep, ping-rings, contact-blips, range-graticule, grain-texture |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 40 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 11.39, stdev 4.06, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 1204085703 -> 2982020773 |
| ✅ | exactly one <h1> with text | "Sound sees
what light cannot." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Echo — Sonar Autonomy for the Deep |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=440 pageErrors=0 |

##### Filament — `filament`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 19,698 chars |
| Build tokens | **36,003** over 1 successful call(s), 6 attempt(s) |
| Demo size | 16.5 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 16914 bytes |
| ✅ | window.__DEMO__.ready became true | 57 frames, effects: canvas-dust, filament-glow, shimmer-drift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 77 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 4.1, stdev 27.58, coverage 0.0217 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 593351159 -> 3932778044 |
| ✅ | exactly one <h1> with text | "FILAMENT" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | FILAMENT — Incandescent Computing |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=173 pageErrors=0 |

##### Fringe — `fringe`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 27,623 chars |
| Build tokens | **47,734** over 1 successful call(s), 4 attempt(s) |
| Demo size | 22.0 KB |
| Result | **18/18 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 22536 bytes |
| ✅ | window.__DEMO__.ready became true | 6 frames, effects: swatch-wipe, conic-rotation, grain-jitter, type-stagger |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 34 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "MADE BY HAND.
HELD BY
WEFT." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Fringe — Sable & Weft |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=426 pageErrors=0 |

##### Grid Collapse — `grid-collapse`

| Field | Value |
|---|---|
| Platform | Workbuddy proxy (`workbuddy`) |
| Model | `kimi-k3` |
| Prompt size | 22,856 chars |
| Build tokens | **13,811** over 1 successful call(s), 1 attempt(s) |
| Demo size | 20.2 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 20654 bytes |
| ✅ | window.__DEMO__.ready became true | 14 frames, effects: perspective-grid, scanline |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 43 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 1.16, stdev 4.13, coverage 0.0833 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 3235564425 -> 1628655722 |
| ✅ | exactly one <h1> with text | "Ship to the grid.
Collapse the distance." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Vector — Grid Collapse |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=271 pageErrors=0 |

##### Halide — `halide`

| Field | Value |
|---|---|
| Platform | cmd-code (`cmdcode`) |
| Model | `xiaomi/mimo-v2.6-pro` |
| Prompt size | 28,947 chars |
| Build tokens | **28,032** over 1 successful call(s), 3 attempt(s) |
| Demo size | 31.7 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 32472 bytes |
| ✅ | window.__DEMO__.ready became true | 29 frames, effects: aperture-iris, lens-bloom, chromatic-fringe, dust-motes, film-grain |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 26 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 32.29, stdev 74.55, coverage 0.1591 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 3940025823 -> 845380663 |
| ✅ | exactly one <h1> with text | "Night is
undeveloped light." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Halide — Night is Undeveloped Light |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=387 pageErrors=0 |

##### Headlight — `headlight`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 28,894 chars |
| Build tokens | **63,961** over 1 successful call(s), 2 attempt(s) |
| Demo size | 35.0 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 35798 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: field-advection, trail-decay, cursor-parallax |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 26 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 0.53, stdev 5.84, coverage 0.0139 |
| ✅ | canvas spans the viewport width | 1464px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 3878568169 -> 4289543272 |
| ✅ | exactly one <h1> with text | "Take the long way home." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Headlight — Nocturne |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=314 pageErrors=0 |

##### Interactive Discovery — `interactive-discovery`

| Field | Value |
|---|---|
| Platform | Workbuddy proxy (`workbuddy`) |
| Model | `hy4-preview-f` |
| Prompt size | 31,676 chars |
| Build tokens | **39,026** over 1 successful call(s), 1 attempt(s) |
| Demo size | 18.2 KB |
| Result | **18/18 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 18640 bytes |
| ✅ | window.__DEMO__.ready became true | 9 frames, effects: strata-layers, spotlight-mask, cursor-lerp, spot-ring, entrance-stagger, ken-burns, grain |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 24 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Layers hold
tales of time" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Lithos — Layers Hold Tales of Time |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=427 pageErrors=0 |

##### Lattice — `lattice`

| Field | Value |
|---|---|
| Platform | cmd-code (`cmdcode`) |
| Model | `xiaomi/mimo-v2.6-pro` |
| Prompt size | 27,524 chars |
| Build tokens | **19,261** over 1 successful call(s), 2 attempt(s) |
| Demo size | 29.3 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 30027 bytes |
| ✅ | window.__DEMO__.ready became true | 15 frames, effects: gyroid-lattice, horizon-glow, grain-texture |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 32.19, stdev 52.67, coverage 0.3722 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 1212161589 -> 1440421020 |
| ✅ | exactly one <h1> with text | "Matter, architected.
Down to the unit cell." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Lattice — Matter, Architected |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=458 pageErrors=0 |

##### Margin — `margin`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 24,829 chars |
| Build tokens | **56,960** over 1 successful call(s), 2 attempt(s) |
| Demo size | 70.2 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 71912 bytes |
| ✅ | window.__DEMO__.ready became true | 10 frames, effects: ambient-weave, counter-scroll, rise |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 0.27, stdev 1.85, coverage 0.0206 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 276700121 -> 3769831736 |
| ✅ | exactly one <h1> with text | "Wear the
in-between." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Second Skin — Deadstock, kept in motion |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=789 pageErrors=0 |

##### Meridian — `meridian`

| Field | Value |
|---|---|
| Platform | cmd-code (`cmdcode`) |
| Model | `xiaomi/mimo-v2.6-pro` |
| Prompt size | 26,904 chars |
| Build tokens | **0** over 0 successful call(s), 18 attempt(s) |
| Demo size | 0.0 KB |
| Result | **undefined/undefined checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ❌ | demo file exists and is non-trivial | 0 bytes |

##### Monolith Type — `monolith-type`

| Field | Value |
|---|---|
| Platform | Workbuddy proxy (`workbuddy`) |
| Model | `gpt-5.5` |
| Prompt size | 27,893 chars |
| Build tokens | **28,254** over 1 successful call(s), 1 attempt(s) |
| Demo size | 30.1 KB |
| Result | **17/18 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 30828 bytes |
| ✅ | window.__DEMO__.ready became true | 10 frames, effects: css-extruded-wordmark, specular-sweep, floor-reflection, procedural-css-stage, letter-cascade, mobil |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 8 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "M
O
N
O
L
I
T
H
M
O
N
O
L
I
T
H
M
O
N
O
L
I
T
H
M
O
N
O
L
I
" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Monolith Type — Monumental Letterforms |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=434 pageErrors=0 |

##### Nebula — `nebula`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 26,278 chars |
| Build tokens | **52,834** over 1 successful call(s), 7 attempt(s) |
| Demo size | 21.8 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 22275 bytes |
| ✅ | window.__DEMO__.ready became true | 32 frames, effects: precomputed-nebula, depth-stars, camera-drift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 47 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 23.31, stdev 12.66, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 4076514205 -> 1559681144 |
| ✅ | exactly one <h1> with text | "NEBULA
IN THE DARK" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | NEBULA — Deep Space Observatory |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=280 pageErrors=0 |

##### Prism — `prism`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 15,957 chars |
| Build tokens | **46,858** over 1 successful call(s), 6 attempt(s) |
| Demo size | 13.5 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13789 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: canvas-grain, beam-travel, fan-breathe, prism-glow |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 28 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 126.77, stdev 74.48, coverage 0.9365 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 2010330258 -> 4044166224 |
| ✅ | exactly one <h1> with text | "Light, divided." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | PRISM — Precision Dispersion Optics |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=246 pageErrors=0 |

##### Rift — `rift`

| Field | Value |
|---|---|
| Platform | cmd-code (`cmdcode`) |
| Model | `xiaomi/mimo-v2.6-pro` |
| Prompt size | 30,379 chars |
| Build tokens | **0** over 0 successful call(s), 1 attempt(s) |
| Demo size | 0.0 KB |
| Result | **undefined/undefined checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ❌ | demo file exists and is non-trivial | 0 bytes |

##### Sable — `sable`

| Field | Value |
|---|---|
| Platform | cmd-code (`cmdcode`) |
| Model | `xiaomi/mimo-v2.6-pro` |
| Prompt size | 27,096 chars |
| Build tokens | **0** over 0 successful call(s), 0 attempt(s) |
| Demo size | 0.0 KB |
| Result | **undefined/undefined checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ❌ | demo file exists and is non-trivial | 0 bytes |

##### Signal Room — `signal-room`

| Field | Value |
|---|---|
| Platform | Workbuddy proxy (`workbuddy`) |
| Model | `gpt-5.5` |
| Prompt size | 30,366 chars |
| Build tokens | **17,590** over 1 successful call(s), 1 attempt(s) |
| Demo size | 24.7 KB |
| Result | **19/20 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 25334 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: volumetric-light-shafts, floor-glow, audio-bars-canvas, grain-texture, mobile-menu |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 10 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 23.1, stdev 47.63, coverage 0.5231 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 1219017982 -> 3576302936 |
| ✅ | exactly one <h1> with text | "Hear the work before it slips." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Signal Room — Audio AI for Live Work |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=385 pageErrors=0 |

##### Slipstream — `slipstream`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 30,689 chars |
| Build tokens | **45,334** over 1 successful call(s), 2 attempt(s) |
| Demo size | 33.4 KB |
| Result | **19/19 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 34238 bytes |
| ✅ | window.__DEMO__.ready became true | 34 frames, effects: ring-drift, group-rotation, sticky-release, load-ramp |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 81 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 16.89, stdev 49.55, coverage 0.4805 |
| ✅ | canvas spans the viewport width | 2160px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 3350107029 -> 1669673381 |
| ✅ | exactly one <h1> with text | "KEEP THE ROOM TONE." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Slipstream — Long-form listening by Room Tone |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=723 pageErrors=0 |

##### Smolder — `smolder`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 22,465 chars |
| Build tokens | **48,480** over 1 successful call(s), 2 attempt(s) |
| Demo size | 17.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17607 bytes |
| ✅ | window.__DEMO__.ready became true | 45 frames, effects: load-rise-fade, scroll-word-reveal, ember-ignition, ember-cooling |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 77 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "A
A
 
quiet
quiet
 
page
page
 
can
can
 
hold
hold
 
one
on" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Longhand — One long thought, every week |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=300 pageErrors=0 |

##### Solstice — `solstice`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 29,728 chars |
| Build tokens | **49,170** over 1 successful call(s), 4 attempt(s) |
| Demo size | 31.8 KB |
| Result | **19/20 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 32537 bytes |
| ✅ | window.__DEMO__.ready became true | 5 frames, effects: canvas-particles, solar-arc, palette-cycle |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 19 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 0.38, stdev 9.78, coverage 0.0015 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 2313764625 -> 2376457662 |
| ✅ | exactly one <h1> with text | "ENERGY IN MOTION
SOLSTICE" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | SOLSTICE — Solar Energy, From First Light to Full Potential |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=378 pageErrors=0 |

##### Tally — `tally`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 31,054 chars |
| Build tokens | **42,733** over 1 successful call(s), 2 attempt(s) |
| Demo size | 30.5 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 31216 bytes |
| ✅ | window.__DEMO__.ready became true | 106 frames, effects: wave-sweep, pointer-hotspot, load-wipe |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 63 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 33.14, stdev 53.4, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 2426527567 -> 726195884 |
| ✅ | exactly one <h1> with text | "Know when
the water
opens." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Northlight — Live Harbour Departures |
| ✅ | document declares lang | en-GB |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=593 pageErrors=0 |

##### Tessellate — `tessellate`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 13,897 chars |
| Build tokens | **37,666** over 1 successful call(s), 4 attempt(s) |
| Demo size | 12.8 KB |
| Result | **18/18 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13104 bytes |
| ✅ | window.__DEMO__.ready became true | 10 frames, effects: svg-pattern-crossfade, mask-rotate-scale, monospace-readout |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 47 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "TESSELLATE" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | TESSELLATE — Generative Design Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=178 pageErrors=0 |

##### Thermal — `thermal`

| Field | Value |
|---|---|
| Platform | cmd-code (`cmdcode`) |
| Model | `xiaomi/mimo-v2.6-pro` |
| Prompt size | 27,521 chars |
| Build tokens | **38,840** over 1 successful call(s), 1 attempt(s) |
| Demo size | 31.8 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 32586 bytes |
| ✅ | window.__DEMO__.ready became true | 16 frames, effects: heat-diffusion, inferno-lookup, hottest-cell-hud, grain-texture |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 24 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 39.86, stdev 13.05, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 3690389995 -> 2981976436 |
| ✅ | exactly one <h1> with text | "Heat is data.
Failure is a signal." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Thermal — Continuous Heat Intelligence |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=585 pageErrors=0 |

##### Undertow — `undertow`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 30,552 chars |
| Build tokens | **45,167** over 1 successful call(s), 4 attempt(s) |
| Demo size | 27.2 KB |
| Result | **20/20 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 27892 bytes |
| ✅ | window.__DEMO__.ready became true | 5 frames, effects: vortex-particle-field, offscreen-glow-composite, interface-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 46 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 1.05, stdev 11.51, coverage 0.0094 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 729743888 -> 91465120 |
| ✅ | exactly one <h1> with text | "Data moves.
Undertow knows
where it leads." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Undertow — Data infrastructure in motion |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=434 pageErrors=0 |

##### Upslope — `upslope`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 28,296 chars |
| Build tokens | **58,434** over 1 successful call(s), 2 attempt(s) |
| Demo size | 34.1 KB |
| Result | **18/18 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 34892 bytes |
| ✅ | window.__DEMO__.ready became true | 8 frames, effects: none declared |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 67 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Markets move before consensus catches up." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Moraine — Upslope |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=477 pageErrors=0 |

##### Vellum — `vellum`

| Field | Value |
|---|---|
| Platform | cmd-code (`cmdcode`) |
| Model | `xiaomi/mimo-v2.6-pro` |
| Prompt size | 30,479 chars |
| Build tokens | **25,761** over 1 successful call(s), 2 attempt(s) |
| Demo size | 30.6 KB |
| Result | **19/20 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 31295 bytes |
| ✅ | window.__DEMO__.ready became true | 7 frames, effects: ink-bleed-mask, ink-bloom-canvas, hairline-rules, paper-grain |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 10 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 23.04, stdev 37.33, coverage 0.3997 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 2445259559 -> 1041342436 |
| ✅ | exactly one <h1> with text | "Print that
outlives us." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Vellum — Print That Outlives Us |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | desktop is one viewport (no scroll) | doc 900 vs viewport 900 |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=443 pageErrors=0 |

##### Voltage — `voltage`

| Field | Value |
|---|---|
| Platform | cmd-code (`cmdcode`) |
| Model | `xiaomi/mimo-v2.6-pro` |
| Prompt size | 30,454 chars |
| Build tokens | **0** over 0 successful call(s), 0 attempt(s) |
| Demo size | 0.0 KB |
| Result | **undefined/undefined checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ❌ | demo file exists and is non-trivial | 0 bytes |

##### About Brand Overview — `jiro-about-brand-overview`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,962 chars |
| Build tokens | **36,677** over 1 successful call(s), 1 attempt(s) |
| Demo size | 27.5 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 28148 bytes |
| ✅ | window.__DEMO__.ready became true | 6 frames, effects: badge-reveal, headline-reveal, image-reveal, stat-stagger |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 82 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "About Brand
Overview" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About Brand Overview |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=528 pageErrors=0 |

##### About Countdown — `jiro-about-countdown`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,952 chars |
| Build tokens | **54,534** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17490 bytes |
| ✅ | window.__DEMO__.ready became true | 21 frames, effects: blur-up-reveal, stat-count-up, stat-hover, nav-underline, smooth-anchor-scroll |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 75 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "We make complex ideas feel clear, useful, and human." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About us — Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=275 pageErrors=0 |

##### About Multi Layout — `jiro-about-multi-layout`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,918 chars |
| Build tokens | **19,501** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12210 bytes |
| ✅ | window.__DEMO__.ready became true | 13 frames, effects: blur-up, count-up |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "About Multi Layout" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About Multi Layout |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=559 pageErrors=0 |

##### About Team Overview — `jiro-about-team-overview`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,962 chars |
| Build tokens | **25,954** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.6 KB |
| Result | **14/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17007 bytes |
| ✅ | window.__DEMO__.ready became true | 21 frames, effects: blur-up-reveal, bar-chart-animation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 37 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Meet the people behind the vision." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About Us |
| ✅ | document declares lang | en |
| ❌ | no horizontal overflow @ 390px | 429 > 390 (div.blob.blob-1 [-39..156]; div.blob.blob-2 [273..429]; rect [-83..473]; rect [-83..473]; circle [-62..105];  |
| ❌ | no horizontal overflow @ 768px | 845 > 768 (div.blob.blob-1 [-77..307]; div.blob.blob-2 [538..845]; circle [492..815]) |
| ❌ | no horizontal overflow @ 1440px | 1584 > 1440 (div.blob.blob-1 [-144..456]; div.blob.blob-2 [1084..1584]; circle [905..1458]) |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=271 pageErrors=0 |

##### About us 01 Blaze — `jiro-about-us-01-blaze`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,906 chars |
| Build tokens | **24,786** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13544 bytes |
| ✅ | window.__DEMO__.ready became true | 24 frames, effects: entrance-animation, marquee-scroll, card-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Curators of the wild." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About us 01 Blaze |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=757 pageErrors=0 |

##### About Us 01 Kelo — `jiro-about-us-01-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,902 chars |
| Build tokens | **27,155** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17625 bytes |
| ✅ | window.__DEMO__.ready became true | 7 frames, effects: mission-fade-up-reveal, stats-staggered-reveal, philosophy-fade-up-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Intelligence, made more human." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About Us 01 — Kelo |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=874 pageErrors=0 |

##### About Us 01 Orbit — `jiro-about-us-01-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,893 chars |
| Build tokens | **43,808** over 1 successful call(s), 1 attempt(s) |
| Demo size | 36.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 37478 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: headshot-fade-rise, copy-fade-rise, proof-points-fade-rise, consultation-cta-fade-rise |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 57 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Support for your next clear step." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About Us |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=843 pageErrors=0 |

##### About Us 02 Orbit — `jiro-about-us-02-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,922 chars |
| Build tokens | **18,737** over 1 successful call(s), 1 attempt(s) |
| Demo size | 10.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 11168 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: scroll-reveal, orbit-animation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 45 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "About Us" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About Us 02 Orbit |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=508 pageErrors=0 |

##### About Us 03 Moxo — `jiro-about-us-03-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,841 chars |
| Build tokens | **30,294** over 1 successful call(s), 1 attempt(s) |
| Demo size | 37.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 38711 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: mission-reveal, staggered-team-reveal, editorial-card-hover, narrative-link-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Technology with a human point of view." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About Us 03 Moxo |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1084 pageErrors=0 |

##### About Us 03 Orbit — `jiro-about-us-03-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,951 chars |
| Build tokens | **25,708** over 1 successful call(s), 1 attempt(s) |
| Demo size | 20.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 21137 bytes |
| ✅ | window.__DEMO__.ready became true | 11 frames, effects: fade-rise, hover-lift, orbit |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Master your creative craft." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About Us 03 Orbit |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1140 pageErrors=0 |

##### About Us 04 Orbit — `jiro-about-us-04-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,844 chars |
| Build tokens | **19,496** over 1 successful call(s), 1 attempt(s) |
| Demo size | 7.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 7505 bytes |
| ✅ | window.__DEMO__.ready became true | 14 frames, effects: scroll-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Guidance for the modern enterprise." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Consultancy |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=374 pageErrors=0 |

##### About Us 05 Moxo — `jiro-about-us-05-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,876 chars |
| Build tokens | **28,426** over 1 successful call(s), 2 attempt(s) |
| Demo size | 18.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 19371 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: scroll-reveal, continuous-drift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Building the future
of work." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About Us - Moxo |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=909 pageErrors=0 |

##### About Us 05 Orbit — `jiro-about-us-05-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,919 chars |
| Build tokens | **30,926** over 1 successful call(s), 1 attempt(s) |
| Demo size | 31.5 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 32239 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: scroll-reveal, logo-marquee |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Clarity for
what comes next." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About — Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=847 pageErrors=0 |

##### About Us 06 Orbit — `jiro-about-us-06-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,847 chars |
| Build tokens | **24,161** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13412 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: reveal, counter, orbit |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Not a faceless agency.
Just me, my craft, and your vision." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About Us - Orbit |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=503 pageErrors=0 |

##### About Us 07 Orbit — `jiro-about-us-07-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,819 chars |
| Build tokens | **22,811** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 11414 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: staggered-entrance, stats-counter-scramble |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 60 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Teaching Philosophy" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | About - Educator |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=903 pageErrors=0 |

##### AI Agent Hero Kelo — `jiro-ai-agent-hero-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,981 chars |
| Build tokens | **30,449** over 1 successful call(s), 1 attempt(s) |
| Demo size | 22.8 KB |
| Result | **19/19 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 23329 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: canvas-particles, svg-flow-animation, load-fade-up |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 22 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 1.29, stdev 14.33, coverage 0.0087 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 1054055769 -> 3426227482 |
| ✅ | exactly one <h1> with text | "Meet Kelo, Your Autonomous AI Agent" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Kelo - Autonomous AI Agent |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=434 pageErrors=0 |

##### AI Automation Hero Kelo — `jiro-ai-automation-hero-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,982 chars |
| Build tokens | **37,032** over 1 successful call(s), 1 attempt(s) |
| Demo size | 35.7 KB |
| Result | **18/19 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 36519 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: ambient-video-loop, copy-entrance, workflow-entrance, integration-entrance |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 17 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 18.71, stdev 55.6, coverage 0.1019 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 3684883076 -> 3794401063 |
| ✅ | exactly one <h1> with text | "Turn busywork into a flow that keeps moving." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Workflow Automation |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=660 pageErrors=0 |

##### AI Budget Tracker Hero Velara — `jiro-ai-budget-tracker-hero-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,967 chars |
| Build tokens | **24,031** over 1 successful call(s), 1 attempt(s) |
| Demo size | 21.3 KB |
| Result | **18/19 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 21847 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: canvas-ambient-bg, parallax-hover, staggered-entrance, float-badges |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 10 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 20.52, stdev 6.55, coverage 1 |
| ✅ | canvas spans the viewport width | 1584px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 3162948574 -> 913188390 |
| ✅ | exactly one <h1> with text | "Take control of your finances with AI." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Velara AI Budget Tracker |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=389 pageErrors=0 |

##### AI Budget Tracking Landing Page - Velara AI — `jiro-ai-budget-tracking-landing-page-velara-ai`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,941 chars |
| Build tokens | **27,984** over 1 successful call(s), 1 attempt(s) |
| Demo size | 25.4 KB |
| Result | **19/19 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 26037 bytes |
| ✅ | window.__DEMO__.ready became true | 45 frames, effects: hero-bg-anim, scroll-reveal, pricing-toggle, accordion-interactive |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 94 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 45.32, stdev 27.77, coverage 0.8193 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 2358745555 -> 83935239 |
| ✅ | exactly one <h1> with text | "Intelligent Budgeting, Simplified" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=2160 pageErrors=0 |

##### AI Chatbot Agent Header — `jiro-ai-chatbot-agent-header`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,951 chars |
| Build tokens | **39,763** over 1 successful call(s), 1 attempt(s) |
| Demo size | 33.4 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 34238 bytes |
| ✅ | window.__DEMO__.ready became true | 11 frames, effects: fade-up-entrance, secondary-button-hover |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "An AI chatbot agent that keeps conversations moving." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Chatbot Agent |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=824 pageErrors=0 |

##### AI Content Generator Hero Velara — `jiro-ai-content-generator-hero-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,915 chars |
| Build tokens | **24,077** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13440 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: typing-sequence |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Turn a single prompt into finished drafts." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Content Generator |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=610 pageErrors=0 |

##### AI Customer Support Hero Kelo — `jiro-ai-customer-support-hero-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,950 chars |
| Build tokens | **39,335** over 1 successful call(s), 1 attempt(s) |
| Demo size | 41.0 KB |
| Result | **19/19 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 42028 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: hero-entrance, ambient-background-loop, chat-conversation-reveal, interactive-chat-transitions |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 47 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 90.29, stdev 62.39, coverage 0.8114 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 862190774 -> 2793642195 |
| ✅ | exactly one <h1> with text | "AI support that keeps conversations moving." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Customer Support |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=814 pageErrors=0 |

##### AI Customer Support Landing Page - Kelo — `jiro-ai-customer-support-landing-page-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,944 chars |
| Build tokens | **31,063** over 1 successful call(s), 1 attempt(s) |
| Demo size | 22.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 22500 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: scroll-reveal, accordion, pricing-toggle |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 37 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "AI Customer Support, Automated" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company - AI Support |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1712 pageErrors=0 |

##### AI Developer Solver Hero Velara — `jiro-ai-developer-solver-hero-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,985 chars |
| Build tokens | **43,851** over 1 successful call(s), 1 attempt(s) |
| Demo size | 30.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 30687 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: ambient-gradient-loop, hero-entrance, code-line-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 28 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "AI assistance for
developer productivity." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Developer Assistant |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=887 pageErrors=0 |

##### AI HR Manager Website Header — `jiro-ai-hr-manager-website-header`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,895 chars |
| Build tokens | **26,011** over 1 successful call(s), 1 attempt(s) |
| Demo size | 20.3 KB |
| Result | **18/19 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 20746 bytes |
| ✅ | window.__DEMO__.ready became true | 11 frames, effects: hero-entrance, canvas-product-video, silk-background |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 35 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 39.94, stdev 22.64, coverage 1 |
| ❌ | canvas spans the viewport width | 800px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 1841163224 -> 3934122811 |
| ✅ | exactly one <h1> with text | "The Future of HR is Here" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio - AI HR Manager |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=223 pageErrors=0 |

##### AI Image Genertion Hero kelo — `jiro-ai-image-genertion-hero-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,975 chars |
| Build tokens | **44,356** over 1 successful call(s), 1 attempt(s) |
| Demo size | 62.7 KB |
| Result | **19/19 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 64167 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: ambient-video-background, prompt-to-image-state-transitions, gallery-scroll-reveal, gallery-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 56 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 18.85, stdev 5.73, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 471271520 -> 798988087 |
| ✅ | exactly one <h1> with text | "Make the image in your mind." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Image Generator — Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=491 pageErrors=0 |

##### AI Interior Generator Header — `jiro-ai-interior-generator-header`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,978 chars |
| Build tokens | **30,926** over 1 successful call(s), 1 attempt(s) |
| Demo size | 22.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 22720 bytes |
| ✅ | window.__DEMO__.ready became true | 5 frames, effects: css-mesh-gradient, css-inner-shimmer, css-entrance-animations, interactive-form |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 54 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Reimagine your space instantly" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Interior Generator |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=495 pageErrors=0 |

##### AI Marketing Hero Kelo — `jiro-ai-marketing-hero-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,847 chars |
| Build tokens | **36,241** over 1 successful call(s), 1 attempt(s) |
| Demo size | 39.6 KB |
| Result | **13/19 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 40536 bytes |
| ❌ | window.__DEMO__.ready became true | never became ready |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ❌ | window.__DEMO__.errors empty | Uncaught TypeError: Cannot read properties of undefined (reading 'line') |
| ✅ | canvas paints non-blank content | mean 2.86, stdev 24.3, coverage 0.0141 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ❌ | canvas keeps repainting (content changes) | hash 287291138 -> 287291138 |
| ✅ | exactly one <h1> with text | "Make every campaign move." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Marketing |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ❌ | no uncaught page errors | Cannot read properties of undefined (reading 'line') |
| ✅ | no failed network requests | clean |
| ❌ | reduced-motion: page still renders content | h1=1 textLen=525 pageErrors=1 |

##### AI Marketing Landing Page - Kelo — `jiro-ai-marketing-landing-page-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,879 chars |
| Build tokens | **31,494** over 1 successful call(s), 1 attempt(s) |
| Demo size | 27.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 27610 bytes |
| ✅ | window.__DEMO__.ready became true | 19 frames, effects: section-entrance, accordion, pricing-toggle, video-bg-animation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 37 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "AI Marketing Automation" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Marketing Platform |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=841 pageErrors=0 |

##### AI Notepad Website Header — `jiro-ai-notepad-website-header`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,967 chars |
| Build tokens | **39,280** over 1 successful call(s), 1 attempt(s) |
| Demo size | 41.7 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 42682 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: headline-reveal, button-reveal, glass-card-carousel, ambient-light-rays |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 7 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Write freely.
Think with AI." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Notepad Overview |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=585 pageErrors=0 |

##### AI Notes Taker Hero Velara — `jiro-ai-notes-taker-hero-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,887 chars |
| Build tokens | **21,477** over 1 successful call(s), 1 attempt(s) |
| Demo size | 9.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 9345 bytes |
| ✅ | window.__DEMO__.ready became true | 8 frames, effects: entrance-animation, audio-visualizer, css-background-loop |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 41 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Turn every conversation into clear notes." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=486 pageErrors=0 |

##### AI Sales Call Analyzer Header — `jiro-ai-sales-call-analyzer-header`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,939 chars |
| Build tokens | **31,885** over 1 successful call(s), 1 attempt(s) |
| Demo size | 38.2 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 39119 bytes |
| ✅ | window.__DEMO__.ready became true | 5 frames, effects: hero-entrance, accordion-expand-collapse, nav-and-cta-hover |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 9 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "AI Sales Call Analyzer" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Sales Call Analyzer |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=698 pageErrors=0 |

##### AI Task Management Hero Velara — `jiro-ai-task-management-hero-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,970 chars |
| Build tokens | **20,567** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.0 KB |
| Result | **18/19 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14330 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: particles, entrance |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ❌ | canvas paints non-blank content | mean 9.33, stdev 0.94, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 704193856 -> 504983806 |
| ✅ | exactly one <h1> with text | "Automate your workflow planning" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Task Management Hero |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=262 pageErrors=0 |

##### AI Video Editor Hero Luma — `jiro-ai-video-editor-hero-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,980 chars |
| Build tokens | **40,162** over 1 successful call(s), 1 attempt(s) |
| Demo size | 40.7 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 41704 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: copy-entrance, preview-entrance, finite-playhead-progress, transcript-highlight |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 65 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Shape the cut
with your words." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Video Editor |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ❌ | no horizontal overflow @ 768px | 773 > 768 (div.preview-halo [-5..773]) |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=668 pageErrors=0 |

##### AI video Translator Hero Luma — `jiro-ai-video-translator-hero-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,902 chars |
| Build tokens | **23,804** over 1 successful call(s), 1 attempt(s) |
| Demo size | 20.6 KB |
| Result | **14/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 21081 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: entrance-animation, language-preview, lip-sync-visual, hover-feedback |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 74 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Expand Your Global Reach with AI Translation" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Video Translator |
| ✅ | document declares lang | en |
| ❌ | no horizontal overflow @ 390px | 458 > 390 () |
| ❌ | no horizontal overflow @ 768px | 912 > 768 () |
| ❌ | no horizontal overflow @ 1440px | 1472 > 1440 () |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=366 pageErrors=0 |

##### AI Voice Generator Header — `jiro-ai-voice-genarator-header`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,807 chars |
| Build tokens | **35,769** over 1 successful call(s), 1 attempt(s) |
| Demo size | 24.0 KB |
| Result | **19/19 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 24602 bytes |
| ✅ | window.__DEMO__.ready became true | 8 frames, effects: looping-background-video, staggered-entrance, reduced-motion-static-frame |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 47 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 19.39, stdev 7.09, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 3003108404 -> 2455835918 |
| ✅ | exactly one <h1> with text | "Turn text into voice." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Voice Generator |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=195 pageErrors=0 |

##### AI Voice Platform Hero Luma — `jiro-ai-voice-platform-hero-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,972 chars |
| Build tokens | **26,821** over 1 successful call(s), 1 attempt(s) |
| Demo size | 18.3 KB |
| Result | **18/19 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 18763 bytes |
| ✅ | window.__DEMO__.ready became true | 6 frames, effects: waveform-animation, tab-transition |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 25.17, stdev 38.43, coverage 1 |
| ❌ | canvas spans the viewport width | 575px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 1196329792 -> 1390830217 |
| ✅ | exactly one <h1> with text | "Advanced AI Voice Generation" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Voice Platform |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=304 pageErrors=0 |

##### Aurora Gradient — `jiro-aurora-gradient`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,849 chars |
| Build tokens | **27,750** over 1 successful call(s), 1 attempt(s) |
| Demo size | 12.0 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12288 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: aurora-drift, aurora-breathe |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 27 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Studio" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio — Background |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ❌ | reduced-motion: page still renders content | h1=1 textLen=49 pageErrors=0 |

##### Blog 01 Blaze — `jiro-blog-01-blaze`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,707 chars |
| Build tokens | **33,420** over 1 successful call(s), 1 attempt(s) |
| Demo size | 19.5 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 19998 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: staggered-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 66 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Latest Stories" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Blogs & Articles |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=885 pageErrors=0 |

##### Blog 01 Orbit — `jiro-blog-01-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,894 chars |
| Build tokens | **37,003** over 1 successful call(s), 1 attempt(s) |
| Demo size | 31.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 31712 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: scroll-entry-fade-rise-stagger, card-lift-on-hover, thumbnail-ease-scale |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Coaching, made practical." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Coaching Articles — Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1360 pageErrors=0 |

##### Blog 01 Pixa — `jiro-blog-01-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,827 chars |
| Build tokens | **24,628** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14103 bytes |
| ✅ | window.__DEMO__.ready became true | 44 frames, effects: scroll-reveal, hover-zoom |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 79 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Recent Articles" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Recent Articles |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=901 pageErrors=0 |

##### Blog 02 Pixa — `jiro-blog-02-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,815 chars |
| Build tokens | **41,911** over 1 successful call(s), 1 attempt(s) |
| Demo size | 28.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 28952 bytes |
| ✅ | window.__DEMO__.ready became true | 9 frames, effects: featured-horizontal-slide, recent-horizontal-slide, hover-color-transition |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 56 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Blogs & Articles" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Blogs & Articles |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=271 pageErrors=0 |

##### Blogs - Luxterra — `jiro-blogs-luxterra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,930 chars |
| Build tokens | **23,075** over 1 successful call(s), 1 attempt(s) |
| Demo size | 22.3 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 22858 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: hover-lift-zoom, scroll-reveal-rAF |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 18 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Blogs & Articles" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio - Blogs & Articles |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1198 pageErrors=0 |

##### Charity Headers — `jiro-charity-headers`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,788 chars |
| Build tokens | **34,404** over 1 successful call(s), 1 attempt(s) |
| Demo size | 25.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 26184 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: headline-entrance, image-entrance, metrics-entrance |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 74 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Change begins
with compassion." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Charitable Giving |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=331 pageErrors=0 |

##### Chrome Bezel 3D — `jiro-chrome-bezel-3d`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,703 chars |
| Build tokens | **19,442** over 1 successful call(s), 1 attempt(s) |
| Demo size | 8.4 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 8621 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: continuous-spin, hover-lift, press-compress |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Chrome Bezel 3D Button" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company - Primary Action |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ❌ | reduced-motion: page still renders content | h1=1 textLen=70 pageErrors=0 |

##### Circle Reveal Button — `jiro-circle-reveal-button`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,948 chars |
| Build tokens | **34,229** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.4 KB |
| Result | **15/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13735 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: pointer-origin-circle-reveal, label-cross-fade, keyboard-focus-reveal |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 1 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Circle Reveal Button" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ❌ | reduced-motion: page still renders content | h1=1 textLen=95 pageErrors=0 |

##### Contact Us 01 Orbit — `jiro-contact-us-01-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,864 chars |
| Build tokens | **22,857** over 1 successful call(s), 1 attempt(s) |
| Demo size | 12.7 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13029 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: form-interaction |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Start a Conversation" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Contact Us \| Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=481 pageErrors=0 |

##### Contact Us 02 Orbit — `jiro-contact-us-02-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,847 chars |
| Build tokens | **33,807** over 1 successful call(s), 1 attempt(s) |
| Demo size | 29.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 30586 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: intro-entrance, form-entrance, card-entrance, accordion-expand |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 59 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Contact us. Let’s start with a conversation." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Contact — Start a Conversation |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1009 pageErrors=0 |

##### CTA 01 Luma — `jiro-cta-01-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,728 chars |
| Build tokens | **24,020** over 1 successful call(s), 1 attempt(s) |
| Demo size | 9.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 9286 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: entrance-reveal, button-hover, button-press |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 65 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Create the future of media." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=222 pageErrors=0 |

##### CTA 01 Orbit — `jiro-cta-01-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,834 chars |
| Build tokens | **29,043** over 1 successful call(s), 1 attempt(s) |
| Demo size | 9.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 9837 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: none declared |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Turn uncertainty into a clear next step." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Book a consultation |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=207 pageErrors=0 |

##### CTA 01 Velara — `jiro-cta-01-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,775 chars |
| Build tokens | **20,157** over 1 successful call(s), 1 attempt(s) |
| Demo size | 8.8 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 8969 bytes |
| ✅ | window.__DEMO__.ready became true | 79 frames, effects: entrance-reveal, button-hover, button-press |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Ship faster with zero friction" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Calls To Action |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=207 pageErrors=0 |

##### CTA 02 Luma — `jiro-cta-02-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,814 chars |
| Build tokens | **27,193** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17283 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: headline-entry, subtext-entry, actions-entry, button-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Make what
only you
can see." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Make What Only You Can See |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=282 pageErrors=0 |

##### CTA 02 Orbit — `jiro-cta-02-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,899 chars |
| Build tokens | **27,326** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13493 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: split-entrance, avatar-stagger |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Transform your potential." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | CTA 02 Orbit |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=197 pageErrors=0 |

##### CTA 03 orbit — `jiro-cta-03-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,830 chars |
| Build tokens | **35,895** over 1 successful call(s), 1 attempt(s) |
| Demo size | 30.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 31117 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: copy-entrance, portrait-entrance, community-band-entrance, avatar-marquee, cta-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Your next step starts with a conversation." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company — Book a consultation |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=282 pageErrors=0 |

##### Electric Border Button — `jiro-electric-border-button`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,785 chars |
| Build tokens | **31,247** over 1 successful call(s), 1 attempt(s) |
| Demo size | 12.2 KB |
| Result | **18/19 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12510 bytes |
| ✅ | window.__DEMO__.ready became true | 6 frames, effects: electric-border-canvas |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 60.28, stdev 79.75, coverage 0.3702 |
| ❌ | canvas spans the viewport width | 323px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 2858834829 -> 2149354414 |
| ✅ | exactly one <h1> with text | "Electric Border Button" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Electric Border Button |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=208 pageErrors=0 |

##### Energy Beam Bg — `jiro-energy-beam-bg`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,828 chars |
| Build tokens | **24,315** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.7 KB |
| Result | **15/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17150 bytes |
| ✅ | window.__DEMO__.ready became true | 5 frames, effects: radiating-beam-sway, beam-bloom-pulse, central-glow-drift |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 11 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Energy Beam Background" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Energy Beam Background |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ❌ | reduced-motion: page still renders content | h1=1 textLen=58 pageErrors=0 |

##### FAQ 01 Kelo — `jiro-faq-01-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,804 chars |
| Build tokens | **22,226** over 1 successful call(s), 1 attempt(s) |
| Demo size | 12.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12711 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: accordion |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently asked questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Frequently Asked Questions |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1395 pageErrors=0 |

##### FAQ 01 Luma — `jiro-faq-01-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,821 chars |
| Build tokens | **24,242** over 1 successful call(s), 1 attempt(s) |
| Demo size | 21.4 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 21866 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: accordion-single-open, smooth-height-reveal, chevron-rotation, accordion-row-hover |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Questions,
answered." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Frequently Asked Questions — Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=520 pageErrors=0 |

##### FAQ 01 Moxo — `jiro-faq-01-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,750 chars |
| Build tokens | **21,939** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.5 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 11796 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: accordion-animation |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently asked questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Frequently Asked Questions |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=335 pageErrors=0 |

##### FAQ 01 Orbit — `jiro-faq-01-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,912 chars |
| Build tokens | **25,176** over 1 successful call(s), 1 attempt(s) |
| Demo size | 19.2 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 19655 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: accordion-expand-collapse, answer-opacity-fade, indicator-rotation |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 6 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently asked questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Student FAQ \| Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1356 pageErrors=0 |

##### FAQ 01 Velara — `jiro-faq-01-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,779 chars |
| Build tokens | **21,399** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.1 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13400 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: none declared |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently Asked Questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | FAQ - Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1203 pageErrors=0 |

##### FAQ 02 Kelo — `jiro-faq-02-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,865 chars |
| Build tokens | **31,458** over 1 successful call(s), 1 attempt(s) |
| Demo size | 29.5 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 30218 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: accordion-expand-collapse, chevron-rotation, category-filter |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 6 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Questions, answered." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Product Questions |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1482 pageErrors=0 |

##### FAQ 02 Luma — `jiro-faq-02-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,844 chars |
| Build tokens | **18,401** over 1 successful call(s), 1 attempt(s) |
| Demo size | 10.5 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 10779 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: accordion-transition, icon-rotation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently asked questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1063 pageErrors=0 |

##### FAQ 02 Moxo — `jiro-faq-02-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,761 chars |
| Build tokens | **34,186** over 1 successful call(s), 2 attempt(s) |
| Demo size | 31.6 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 32325 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: accordion-height, answer-reveal, indicator-rotation |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently asked questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Frequently Asked Questions |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=2152 pageErrors=0 |

##### FAQ 02 Orbit — `jiro-faq-02-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,729 chars |
| Build tokens | **29,206** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.2 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17651 bytes |
| ✅ | window.__DEMO__.ready became true | 62 frames, effects: accordion-height, scroll-reveal |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently asked questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=522 pageErrors=0 |

##### FAQ 02 Velara — `jiro-faq-02-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,822 chars |
| Build tokens | **30,327** over 1 successful call(s), 1 attempt(s) |
| Demo size | 19.5 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 19946 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: accordion-height-opacity-transition, accordion-indicator-rotation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "AI API questions,
answered directly." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI API FAQ |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=754 pageErrors=0 |

##### FAQ 03 Kelo — `jiro-faq-03-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,811 chars |
| Build tokens | **20,899** over 1 successful call(s), 1 attempt(s) |
| Demo size | 15.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 15766 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: init |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Automation Platform FAQs" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | FAQ - Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=516 pageErrors=0 |

##### FAQ 03 Luma — `jiro-faq-03-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,748 chars |
| Build tokens | **45,153** over 1 successful call(s), 1 attempt(s) |
| Demo size | 41.5 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 42467 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: accordion-expand-collapse, chevron-rotation, tab-transition, row-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Questions, answered." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | FAQ for AI Media Creators |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1656 pageErrors=0 |

##### FAQ 03 Moxo — `jiro-faq-03-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,712 chars |
| Build tokens | **23,215** over 1 successful call(s), 1 attempt(s) |
| Demo size | 9.8 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 10082 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: none declared |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently asked questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company - FAQ |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1196 pageErrors=0 |

##### FAQ 03 Orbit — `jiro-faq-03-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,945 chars |
| Build tokens | **27,466** over 1 successful call(s), 3 attempt(s) |
| Demo size | 15.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 15768 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: stagger-reveal, accordion-height, chevron-rotate |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 66 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Practical Details" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Program Questions |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=377 pageErrors=0 |

##### FAQ 03 Velara — `jiro-faq-03-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,727 chars |
| Build tokens | **27,984** over 1 successful call(s), 1 attempt(s) |
| Demo size | 15.3 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 15701 bytes |
| ✅ | window.__DEMO__.ready became true | 49 frames, effects: accordion-transition, indicator-rotation, reveal-on-load |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently Asked Questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | API FAQ - Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1070 pageErrors=0 |

##### FAQ 04 Kelo — `jiro-faq-04-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,785 chars |
| Build tokens | **28,877** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.4 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17831 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: accordion-height-opacity, rotating-state-indicator |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "What can an AI platform do?" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Platform FAQ |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=588 pageErrors=0 |

##### FAQ 04 Luma — `jiro-faq-04-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,828 chars |
| Build tokens | **27,573** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 18227 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: accordion-height-animation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Answers for Creators" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Answers for Creators \| Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1502 pageErrors=0 |

##### FAQ 04 Moxo — `jiro-faq-04-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,723 chars |
| Build tokens | **33,158** over 1 successful call(s), 1 attempt(s) |
| Demo size | 20.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 21406 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: staggered-column-entrance, accordion-open-close |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 61 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Product questions,
answered." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Product questions \| Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1317 pageErrors=0 |

##### FAQ 04 Orbit — `jiro-faq-04-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,737 chars |
| Build tokens | **27,255** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12151 bytes |
| ✅ | window.__DEMO__.ready became true | 146 frames, effects: accordion-animation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 153 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently Asked Questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | FAQ |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1087 pageErrors=0 |

##### FAQ 05 Kelo — `jiro-faq-05-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,799 chars |
| Build tokens | **22,654** over 1 successful call(s), 1 attempt(s) |
| Demo size | 21.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 21771 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: accordion-expand-collapse, rotating-indicator |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 21 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Automation, with the details in view." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Automation FAQs — Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=738 pageErrors=0 |

##### FAQ 05 Moxo — `jiro-faq-05-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,854 chars |
| Build tokens | **17,445** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12165 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: accordion-transition, icon-rotation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently asked questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio - Frequently Asked Questions |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1670 pageErrors=0 |

##### FAQ 05 Velara — `jiro-faq-05-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,722 chars |
| Build tokens | **19,156** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.4 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17816 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: accordion-expand-collapse, chevron-rotation, row-hover-feedback |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "What can an AI platform do?" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Platform FAQ |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1267 pageErrors=0 |

##### FAQ 2 Column Straight — `jiro-faq-2-column-straight`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,769 chars |
| Build tokens | **23,181** over 1 successful call(s), 1 attempt(s) |
| Demo size | 12.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12348 bytes |
| ✅ | window.__DEMO__.ready became true | 12 frames, effects: scroll-stagger, accordion-rotate |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently Asked Questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Frequently Asked Questions |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=961 pageErrors=0 |

##### FAQ Middle Image — `jiro-faq-middle-image`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,901 chars |
| Build tokens | **37,332** over 1 successful call(s), 2 attempt(s) |
| Demo size | 26.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 27041 bytes |
| ✅ | window.__DEMO__.ready became true | 13 frames, effects: staggered-scroll-reveal, single-open-accordion, animated-answer-panel, chevron-rotation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 50 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently asked questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Frequently Asked Questions |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=452 pageErrors=0 |

##### FAQ Middle Simple — `jiro-faq-middle-simple`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,841 chars |
| Build tokens | **28,261** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14273 bytes |
| ✅ | window.__DEMO__.ready became true | 11 frames, effects: scroll-entrance, accordion-expansion, icon-rotation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 44 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently asked questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company - FAQ |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=639 pageErrors=0 |

##### FAQ Vendo — `jiro-faq-vendo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,747 chars |
| Build tokens | **30,443** over 1 successful call(s), 1 attempt(s) |
| Demo size | 23.6 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 24140 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: accordion-toggle, topic-tabs |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 10 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently asked questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Frequently asked questions |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=412 pageErrors=0 |

##### FAQ with Image — `jiro-faq-with-image`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,890 chars |
| Build tokens | **24,236** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14525 bytes |
| ✅ | window.__DEMO__.ready became true | 9 frames, effects: scroll-entry, accordion-expand |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 55 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently Asked Questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio - FAQ |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1212 pageErrors=0 |

##### FAQs 01 Pixa — `jiro-faqs-01-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,718 chars |
| Build tokens | **22,561** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.1 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17555 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: accordion-height, accordion-opacity, chevron-rotation |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently asked questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Frequently asked questions |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=867 pageErrors=0 |

##### FAQs 01 Solra — `jiro-faqs-01-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,732 chars |
| Build tokens | **20,190** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.9 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12199 bytes |
| ✅ | window.__DEMO__.ready became true | 38 frames, effects: accordion, entrance-fade |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Frequently Asked Questions" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Frequently Asked Questions |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1196 pageErrors=0 |

##### FAQs - Luxterra — `jiro-faqs-luxterra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,851 chars |
| Build tokens | **28,373** over 1 successful call(s), 1 attempt(s) |
| Demo size | 21.7 KB |
| Result | **12/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 22209 bytes |
| ❌ | window.__DEMO__.ready became true | never became ready |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ❌ | window.__DEMO__.errors empty | Uncaught TypeError: Cannot read properties of null (reading 'setAttribute') |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Answers for your property search." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | FAQs — Luxterra |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ❌ | no uncaught page errors | Cannot read properties of null (reading 'setAttribute') |
| ✅ | no failed network requests | clean |
| ❌ | reduced-motion: page still renders content | h1=1 textLen=2485 pageErrors=1 |

##### Feature 04 Solra — `jiro-feature-04-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,955 chars |
| Build tokens | **25,652** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14454 bytes |
| ✅ | window.__DEMO__.ready became true | 8 frames, effects: reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 79 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Work that speaks for itself" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=764 pageErrors=0 |

##### Feature Work Benjamen — `jiro-feature-work-benjamen`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,812 chars |
| Build tokens | **29,727** over 1 successful call(s), 1 attempt(s) |
| Demo size | 28.8 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 29466 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: cover-tilt-zoom, title-letter-rise |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 1 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Selected work" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Selected Work |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=163 pageErrors=0 |

##### Features 01 Halo — `jiro-features-01-halo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,830 chars |
| Build tokens | **23,577** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.7 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13981 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: staggered-entrance, hover-response |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Wellness, designed around you" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Features - Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=915 pageErrors=0 |

##### Features 01 Kelo — `jiro-features-01-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,982 chars |
| Build tokens | **39,099** over 1 successful call(s), 1 attempt(s) |
| Demo size | 47.9 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 49013 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: scroll-reveal, staggered-capabilities, badge-hover, conversion-dialog |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 8 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Turn an idea into a clear, intelligent workflow." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Intelligent Workflows — Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1101 pageErrors=0 |

##### Features 01 Learn.AI — `jiro-features-01-learnai`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,954 chars |
| Build tokens | **36,718** over 1 successful call(s), 1 attempt(s) |
| Demo size | 33.7 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 34487 bytes |
| ✅ | window.__DEMO__.ready became true | 11 frames, effects: pulsing-status-dot, scroll-entry-glide |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 39 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Turn recorded conversations into actionable coaching" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Features - Learn.AI |
| ✅ | document declares lang | en |
| ❌ | no horizontal overflow @ 390px | 439 > 390 (div.mockup-container [24..439]; div.mockup-window [24..439]; div.mockup-header [25..438]; div.mockup-body [25 |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=757 pageErrors=0 |

##### Features 01 Luma — `jiro-features-01-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,749 chars |
| Build tokens | **37,644** over 1 successful call(s), 1 attempt(s) |
| Demo size | 42.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 43041 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: mockup-entrance, badge-entrance, pointer-tilt, hover-feedback |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "From idea to polished media." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Media Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=610 pageErrors=0 |

##### Features 01 Moxo — `jiro-features-01-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,832 chars |
| Build tokens | **22,847** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14349 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: scroll-reveal, stat-scramble |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Core Capabilities" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=328 pageErrors=0 |

##### Features 01 Orbit — `jiro-features-01-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,821 chars |
| Build tokens | **27,964** over 1 successful call(s), 3 attempt(s) |
| Demo size | 14.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14544 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: scroll-reveals, button-hover, svg-draw |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Design Your Next Chapter" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=297 pageErrors=0 |

##### Features 01 Velara — `jiro-features-01-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,812 chars |
| Build tokens | **21,529** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 18258 bytes |
| ✅ | window.__DEMO__.ready became true | 7 frames, effects: scroll-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Intelligent Systems for Modern Workflows" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company - Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=688 pageErrors=0 |

##### Features 01 Vendo — `jiro-features-01-vendo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,771 chars |
| Build tokens | **54,383** over 1 successful call(s), 2 attempt(s) |
| Demo size | 46.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 47378 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: scroll-reveal, badge-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Complex work, made clear." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Product features — Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=926 pageErrors=0 |

##### Features 02 Kelo — `jiro-features-02-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,947 chars |
| Build tokens | **26,943** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.5 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17891 bytes |
| ✅ | window.__DEMO__.ready became true | 22 frames, effects: scroll-reveal, counter-animation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 52 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Intelligent automation, orchestrated effortlessly" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Features - Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=828 pageErrors=0 |

##### Features 02 Luma — `jiro-features-02-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,820 chars |
| Build tokens | **34,571** over 1 successful call(s), 1 attempt(s) |
| Demo size | 46.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 47369 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: staged-preview-entrance, staged-workflow-entrance, feature-scroll-reveal, feature-hover-response |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 70 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Create with a clearer direction." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Media Features — Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1092 pageErrors=0 |

##### Features 02 NexVPN — `jiro-features-02-nexvpn`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,826 chars |
| Build tokens | **23,530** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.5 KB |
| Result | **18/19 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 11737 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: procedural-video-orb, scroll-entrance |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 41.93, stdev 42.14, coverage 0.6574 |
| ❌ | canvas spans the viewport width | 600px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 551217948 -> 1009677140 |
| ✅ | exactly one <h1> with text | "Total data protection." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=377 pageErrors=0 |

##### Features 02 Orbit — `jiro-features-02-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,976 chars |
| Build tokens | **33,590** over 1 successful call(s), 1 attempt(s) |
| Demo size | 26.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 26905 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: image-fade-rise, narrative-fade-rise, staggered-highlights |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "A clearer path from learning to practice." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Program Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=970 pageErrors=0 |

##### Features 02 Velara — `jiro-features-02-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,836 chars |
| Build tokens | **26,462** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.7 KB |
| Result | **17/19 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14035 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: static-canvas, scroll-reveal, rAF-loop |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 10.93, stdev 26.64, coverage 0.2162 |
| ❌ | canvas spans the viewport width | 470px of 1440px |
| ❌ | canvas keeps repainting (content changes) | hash 503359710 -> 503359710 |
| ✅ | exactly one <h1> with text | "Advanced AI capabilities" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company - Advanced AI Capabilities |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=864 pageErrors=0 |

##### Features 02 Vendo — `jiro-features-02-vendo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,814 chars |
| Build tokens | **31,545** over 1 successful call(s), 1 attempt(s) |
| Demo size | 40.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 41804 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: scroll-row-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Features for work that does not stand still." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Product capabilities — Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1051 pageErrors=0 |

##### Features 03 Kelo — `jiro-features-03-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,876 chars |
| Build tokens | **26,984** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17708 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: scroll-stagger, hover-lift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Smarter workflows, powered by AI" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Features - Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=804 pageErrors=0 |

##### Features 03 Luma — `jiro-features-03-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,810 chars |
| Build tokens | **43,108** over 1 successful call(s), 1 attempt(s) |
| Demo size | 47.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 48232 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: split-viewport-reveal, capability-highlight-states, output-scene-transition |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Generate the visual. Keep the intent." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Creative Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1076 pageErrors=0 |

##### Features 03 Moxo — `jiro-features-03-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,768 chars |
| Build tokens | **25,568** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13465 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: scroll-reveal, hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 54 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Streamline your team's workflow" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Capabilities \| Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=960 pageErrors=0 |

##### Features 03 Orbit — `jiro-features-03-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,768 chars |
| Build tokens | **21,367** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.7 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17084 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: staggered-card-reveal, card-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 64 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "A clear process for moving forward." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Coaching Methodology \| Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=922 pageErrors=0 |

##### Features 03 Velara — `jiro-features-03-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,990 chars |
| Build tokens | **28,017** over 1 successful call(s), 1 attempt(s) |
| Demo size | 18.2 KB |
| Result | **19/19 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 18608 bytes |
| ✅ | window.__DEMO__.ready became true | 85 frames, effects: scroll-entry-animations, canvas-backdrop |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 7.71, stdev 1.25, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 2775903914 -> 2346532792 |
| ✅ | exactly one <h1> with text | "Automate your team's busywork" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Intelligent Automation Platform |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=832 pageErrors=0 |

##### Features 04 Luma — `jiro-features-04-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,828 chars |
| Build tokens | **34,859** over 1 successful call(s), 1 attempt(s) |
| Demo size | 33.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 34070 bytes |
| ✅ | window.__DEMO__.ready became true | 5 frames, effects: staggered-card-entrance, card-hover-lift, accordion-expansion |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Create, refine, and bring every idea into focus." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Creator Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=959 pageErrors=0 |

##### Features 04 Orbit — `jiro-features-04-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,743 chars |
| Build tokens | **26,884** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17758 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: scroll-reveal, accordion |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 24 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Master the Modern Workflow" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Program Curriculum |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=880 pageErrors=0 |

##### Features 04 Velara — `jiro-features-04-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 8,014 chars |
| Build tokens | **37,019** over 1 successful call(s), 1 attempt(s) |
| Demo size | 27.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 28571 bytes |
| ✅ | window.__DEMO__.ready became true | 35 frames, effects: card-stagger-on-scroll, icon-entry-motion, icon-hover-motion |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 40 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "AI infrastructure, shaped for developer workflows." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Developer Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1335 pageErrors=0 |

##### Features 05 Kelo — `jiro-features-05-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,783 chars |
| Build tokens | **31,750** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17272 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: scroll-reveal, badge-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Automate Your Workflow End to End" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Automated Workflow Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=580 pageErrors=0 |

##### Features 05 Luma — `jiro-features-05-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,642 chars |
| Build tokens | **40,689** over 1 successful call(s), 1 attempt(s) |
| Demo size | 60.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 61595 bytes |
| ✅ | window.__DEMO__.ready became true | 7 frames, effects: grid-entrance-reveal, scroll-linked-reveal, copy-block-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 30 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "From first prompt to final frame, keep the creative thread i" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Media Workflow |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1862 pageErrors=0 |

##### Features 05 Orbit — `jiro-features-05-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,916 chars |
| Build tokens | **25,988** over 1 successful call(s), 1 attempt(s) |
| Demo size | 15.7 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 16048 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: scroll-reveal, scroll-reveal |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "A clear path to your goals" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Coaching Methodology |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=714 pageErrors=0 |

##### Features 05 Velara — `jiro-features-05-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,805 chars |
| Build tokens | **39,884** over 1 successful call(s), 1 attempt(s) |
| Demo size | 27.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 28546 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: staggered-reveal, workflow-signal-loop, handoff-transfer-loop |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "AI automation,
made visible." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Automation Workflow |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=846 pageErrors=0 |

##### Features 06 Luma — `jiro-features-06-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,760 chars |
| Build tokens | **18,403** over 1 successful call(s), 1 attempt(s) |
| Demo size | 10.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 10302 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: preview-entrance, capability-stagger |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 70 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Create without limits" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=617 pageErrors=0 |

##### Features 06 Moxo — `jiro-features-06-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,846 chars |
| Build tokens | **30,999** over 1 successful call(s), 1 attempt(s) |
| Demo size | 42.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 43108 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: scroll-reveal, image-scale, cta-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 70 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "The work, without the working around it." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Features — Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=962 pageErrors=0 |

##### Features 06 Orbit — `jiro-features-06-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,748 chars |
| Build tokens | **20,097** over 1 successful call(s), 1 attempt(s) |
| Demo size | 6.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 6514 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: static-layout |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Everything You Need to Succeed" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio - Program |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=832 pageErrors=0 |

##### Features 06 Velara — `jiro-features-06-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,729 chars |
| Build tokens | **23,841** over 1 successful call(s), 1 attempt(s) |
| Demo size | 19.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 19911 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: staggered-fade-rise, card-hover-lift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 68 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Platform capabilities" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Platform Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=866 pageErrors=0 |

##### Features 07 Luma — `jiro-features-07-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,791 chars |
| Build tokens | **25,056** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.5 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14886 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: scroll-entry-animation, hover-preview-effects |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 48 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Media generation,
start to finish." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=515 pageErrors=0 |

##### Features 07 Orbit — `jiro-features-07-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,862 chars |
| Build tokens | **29,298** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14970 bytes |
| ✅ | window.__DEMO__.ready became true | 8 frames, effects: none declared |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 88 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Move forward with clarity." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Coaching Program Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=595 pageErrors=0 |

##### Features 07 Velara — `jiro-features-07-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,727 chars |
| Build tokens | **24,845** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14494 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: scroll-reveal, hover-lift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 57 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "AI Platform Capabilities" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Platform Capabilities |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=766 pageErrors=0 |

##### Features 08 Luma — `jiro-features-08-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,716 chars |
| Build tokens | **36,918** over 1 successful call(s), 1 attempt(s) |
| Demo size | 25.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 25563 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: staggered-card-entrance, card-hover-lift, preview-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 43 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Create without losing the flow." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Creative workflow — Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=909 pageErrors=0 |

##### Features 08 Orbit — `jiro-features-08-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,867 chars |
| Build tokens | **16,082** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 11519 bytes |
| ✅ | window.__DEMO__.ready became true | 16 frames, effects: staggered-scroll-reveal, button-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Master Your Craft" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company Masterclass |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=954 pageErrors=0 |

##### Features 09 Luma — `jiro-features-09-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,750 chars |
| Build tokens | **36,381** over 1 successful call(s), 1 attempt(s) |
| Demo size | 48.8 KB |
| Result | **15/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 50021 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: copy-entrance, product-reveal, workflow-reveal, hover-focus-states, workflow-selection |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 56 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "From first idea to finished content." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Content Workspace — Features |
| ✅ | document declares lang | en |
| ❌ | no horizontal overflow @ 390px | 900 > 390 () |
| ❌ | no horizontal overflow @ 768px | 1036 > 768 () |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1334 pageErrors=0 |

##### Features 09 Moxo — `jiro-features-09-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,970 chars |
| Build tokens | **30,201** over 1 successful call(s), 1 attempt(s) |
| Demo size | 44.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 45365 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: section-intro-entrance, badge-entrance, mockup-entrance, copy-entrance |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Move work forward, with the full picture in view." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Moxo — Product Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1678 pageErrors=0 |

##### Features 09 Orbit — `jiro-features-09-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,749 chars |
| Build tokens | **21,898** over 1 successful call(s), 1 attempt(s) |
| Demo size | 12.0 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12315 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: staggered-entrance, counter |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "The Methodology" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=698 pageErrors=0 |

##### Features 10 Luma — `jiro-features-10-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,795 chars |
| Build tokens | **37,696** over 1 successful call(s), 1 attempt(s) |
| Demo size | 42.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 43011 bytes |
| ✅ | window.__DEMO__.ready became true | 5 frames, effects: staggered-scroll-reveal, card-hover-lift, preview-cross-fade |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 55 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Give every idea a way to become visible." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Creative AI Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1101 pageErrors=0 |

##### Features 10 Moxo — `jiro-features-10-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,889 chars |
| Build tokens | **19,649** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 11641 bytes |
| ✅ | window.__DEMO__.ready became true | 14 frames, effects: scroll-reveal, hover-lift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Platform Capabilities" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Platform Capabilities |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=730 pageErrors=0 |

##### Features 10 Orbit — `jiro-features-10-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,798 chars |
| Build tokens | **39,108** over 1 successful call(s), 2 attempt(s) |
| Demo size | 24.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 25442 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: artwork-scroll-entry, methodology-stagger |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 62 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "A clear path from insight to action" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Coaching Methodology |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=687 pageErrors=0 |

##### Features 11 Luma — `jiro-features-11-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,757 chars |
| Build tokens | **31,946** over 1 successful call(s), 1 attempt(s) |
| Demo size | 25.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 25663 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: raf-loop |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "The complete AI media toolkit." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Media Platform Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=400 pageErrors=0 |

##### Features 11 Orbit — `jiro-features-11-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,965 chars |
| Build tokens | **39,077** over 1 successful call(s), 2 attempt(s) |
| Demo size | 21.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 22274 bytes |
| ✅ | window.__DEMO__.ready became true | 6 frames, effects: scroll-entry-reveal, staggered-fade-rise, card-hover-lift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 56 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Online Course Curriculum" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Online Course Curriculum |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1277 pageErrors=0 |

##### Features 12 Orbit — `jiro-features-12-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,781 chars |
| Build tokens | **30,421** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12050 bytes |
| ✅ | window.__DEMO__.ready became true | 11 frames, effects: scroll-entrance |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 50 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "A structured path to meaningful change" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Coaching Programme Features |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1242 pageErrors=0 |

##### Finance Management Landing Page - Finsyc — `jiro-finance-management-landing-page-finsyc`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,911 chars |
| Build tokens | **42,657** over 1 successful call(s), 2 attempt(s) |
| Demo size | 54.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 55741 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: hero-entrance, dashboard-trace, ambient-video-background, billing-period-toggle |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 23 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Financial clarity, built into every decision." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Finance Management |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=2328 pageErrors=0 |

##### Fluid Gradient Engine — `jiro-fluid-gradient-engine`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,845 chars |
| Build tokens | **26,961** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.2 KB |
| Result | **17/19 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 11506 bytes |
| ✅ | window.__DEMO__.ready became true | 5 frames, effects: webgl-fluid-gradient |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 31 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ❌ | canvas paints non-blank content | mean 0, stdev 0, coverage 0 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ❌ | canvas keeps repainting (content changes) | hash 4201180741 -> 4201180741 |
| ✅ | exactly one <h1> with text | "Fluid Gradient Engine" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Fluid Gradient Engine |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=231 pageErrors=0 |

##### Footer 01 Kelo — `jiro-footer-01-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,640 chars |
| Build tokens | **42,107** over 1 successful call(s), 1 attempt(s) |
| Demo size | 18.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 18729 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: scroll-reveal, subtle-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 49 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Studio" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=109 pageErrors=0 |

##### Footer 01 Luma — `jiro-footer-01-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,621 chars |
| Build tokens | **24,365** over 1 successful call(s), 1 attempt(s) |
| Demo size | 9.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 9179 bytes |
| ✅ | window.__DEMO__.ready became true | 7 frames, effects: static-footer |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Company" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=244 pageErrors=0 |

##### Footer 01 Pixa — `jiro-footer-01-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,683 chars |
| Build tokens | **30,359** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 16977 bytes |
| ✅ | window.__DEMO__.ready became true | 13 frames, effects: columns-fade-in-on-scroll, quiet-link-hover-states |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 48 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Studio" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=299 pageErrors=0 |

##### Footer 01 Solra — `jiro-footer-01-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,938 chars |
| Build tokens | **22,075** over 1 successful call(s), 1 attempt(s) |
| Demo size | 12.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12414 bytes |
| ✅ | window.__DEMO__.ready became true | 11 frames, effects: hover-socials, scroll-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 74 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Studio" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Footer 01 Solra |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=195 pageErrors=0 |

##### Footer 01 Velara — `jiro-footer-01-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,743 chars |
| Build tokens | **31,036** over 1 successful call(s), 1 attempt(s) |
| Demo size | 18.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 19029 bytes |
| ✅ | window.__DEMO__.ready became true | 9 frames, effects: footer-text-entrance, header-link-hover, footer-link-hover, social-icon-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 63 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Studio" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=204 pageErrors=0 |

##### Footer 02 Kelo — `jiro-footer-02-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,676 chars |
| Build tokens | **30,920** over 1 successful call(s), 1 attempt(s) |
| Demo size | 22.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 22651 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: footer-reveal, link-hover, social-icon-hover, newsletter-submit |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 59 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Kelo" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Kelo |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=232 pageErrors=0 |

##### Footer 02 Luma — `jiro-footer-02-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,864 chars |
| Build tokens | **21,385** over 1 successful call(s), 1 attempt(s) |
| Demo size | 10.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 10514 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: intersection-observer-fade-in |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Company" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Footer 02 Luma |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=298 pageErrors=0 |

##### Footer 02 Pixa — `jiro-footer-02-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,783 chars |
| Build tokens | **48,333** over 1 successful call(s), 1 attempt(s) |
| Demo size | 18.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 19058 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: footer-scroll-reveal, navigation-link-hover, social-icon-hover, newsletter-submit-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Studio
Studio" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=216 pageErrors=0 |

##### Footer 02 Solra — `jiro-footer-02-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,620 chars |
| Build tokens | **23,003** over 1 successful call(s), 1 attempt(s) |
| Demo size | 8.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 8583 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: restrained-hover-states |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Company" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=291 pageErrors=0 |

##### Footer 02 Velara — `jiro-footer-02-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,784 chars |
| Build tokens | **41,491** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.8 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17196 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: footer-columns-enter, wordmark-enter, navigation-link-hover, social-icon-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Company" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ❌ | reduced-motion: page still renders content | h1=1 textLen=97 pageErrors=0 |

##### Footer 03 Kelo — `jiro-footer-03-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,698 chars |
| Build tokens | **20,489** over 1 successful call(s), 1 attempt(s) |
| Demo size | 12.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12670 bytes |
| ✅ | window.__DEMO__.ready became true | 18 frames, effects: entrance-animation, hover-states |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 66 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "COMPANY" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company Platform |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=228 pageErrors=0 |

##### Footer 03 Luma — `jiro-footer-03-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,692 chars |
| Build tokens | **36,004** over 1 successful call(s), 1 attempt(s) |
| Demo size | 15.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 15322 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: wordmark-scroll-reveal, columns-scroll-reveal, link-hover, social-icon-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 71 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "AI MEDIA" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Media Platform |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=112 pageErrors=0 |

##### Footer 03 Orbit — `jiro-footer-03-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,614 chars |
| Build tokens | **22,388** over 1 successful call(s), 1 attempt(s) |
| Demo size | 8.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 8454 bytes |
| ✅ | window.__DEMO__.ready became true | 6 frames, effects: hover-transitions, smooth-scrolling |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 75 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Company" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company — Footer |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=191 pageErrors=0 |

##### Footer 03 Solra — `jiro-footer-03-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,909 chars |
| Build tokens | **36,489** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17617 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: scroll-entry-stagger, navigation-link-hover, social-icon-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 51 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Thoughtful work,
clearly connected." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=269 pageErrors=0 |

##### Footer 03 Velara — `jiro-footer-03-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,794 chars |
| Build tokens | **29,921** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14691 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: hover-focus-states, entrance-animation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 58 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "STUDIO" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Footer 03 Velara |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=279 pageErrors=0 |

##### Footer 04 Kelo — `jiro-footer-04-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,555 chars |
| Build tokens | **38,872** over 1 successful call(s), 1 attempt(s) |
| Demo size | 18.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 19361 bytes |
| ✅ | window.__DEMO__.ready became true | 5 frames, effects: staggered-entrance, link-hover, social-icon-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 50 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Company" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=123 pageErrors=0 |

##### Footer 04 Moxo — `jiro-footer-04-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,788 chars |
| Build tokens | **19,411** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12145 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: hover-transitions |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Company Enterprise SaaS Platform" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company Enterprise SaaS Platform |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=388 pageErrors=0 |

##### Footer 04 Orbit — `jiro-footer-04-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,559 chars |
| Build tokens | **37,771** over 1 successful call(s), 1 attempt(s) |
| Demo size | 22.4 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 22916 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: orbit-reveal, link-feedback, newsletter-feedback, share-actions |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Keep learning. Keep moving." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=349 pageErrors=0 |

##### Footer 04 Solra — `jiro-footer-04-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,698 chars |
| Build tokens | **23,624** over 1 successful call(s), 1 attempt(s) |
| Demo size | 8.7 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 8882 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: scroll-entrance, link-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Studio" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=134 pageErrors=0 |

##### Footer 05 Kelo — `jiro-footer-05-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,716 chars |
| Build tokens | **34,824** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Footer 05 Moxo — `jiro-footer-05-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,754 chars |
| Build tokens | **26,925** over 1 successful call(s), 1 attempt(s) |
| Demo size | 10.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 10379 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: hover-focus-states, static-render |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 58 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Company" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company — Productivity Tools |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=254 pageErrors=0 |

##### Footer 05 Orbit — `jiro-footer-05-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,621 chars |
| Build tokens | **36,013** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Footer 06 Moxo — `jiro-footer-06-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,631 chars |
| Build tokens | **24,263** over 1 successful call(s), 1 attempt(s) |
| Demo size | 9.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 10069 bytes |
| ✅ | window.__DEMO__.ready became true | 11 frames, effects: css-hover-focus |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 91 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "COMPANY" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=297 pageErrors=0 |

##### Footer Basic — `jiro-footer-basic`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,903 chars |
| Build tokens | **46,720** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Footer - Glimpse — `jiro-footer-glimpse`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,818 chars |
| Build tokens | **23,810** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 11887 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: soft-entrance, hover-states |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 74 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Company" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI-Powered Smart Glass |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=373 pageErrors=0 |

##### Footer o1 Moxo — `jiro-footer-o1-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,646 chars |
| Build tokens | **28,786** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Footer With Newsletter — `jiro-footer-with-newsletter`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,918 chars |
| Build tokens | **24,924** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14996 bytes |
| ✅ | window.__DEMO__.ready became true | 14 frames, effects: staggered-blur-reveal, golden-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 65 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Stay in the loop" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=306 pageErrors=0 |

##### Freelance Coach Hero Orbit — `jiro-freelance-coach-hero-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,796 chars |
| Build tokens | **42,391** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Glow Button — `jiro-glow-button`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,797 chars |
| Build tokens | **27,585** over 1 successful call(s), 1 attempt(s) |
| Demo size | 10.5 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 10763 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: magnetic-hover, 3d-tilt, cursor-bloom, border-highlight |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Glow Button Demonstration" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ❌ | reduced-motion: page still renders content | h1=1 textLen=68 pageErrors=0 |

##### Glow Color — `jiro-glow-color`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,806 chars |
| Build tokens | **30,968** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Header 02 Pixa — `jiro-header-02-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,928 chars |
| Build tokens | **32,594** over 1 successful call(s), 1 attempt(s) |
| Demo size | 32.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 33027 bytes |
| ✅ | window.__DEMO__.ready became true | 21 frames, effects: blur-up, tab-transitions |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Intelligent agents for your workflow." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=334 pageErrors=0 |

##### Header 02 Solra — `jiro-header-02-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,835 chars |
| Build tokens | **44,645** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Header 03 Pixa — `jiro-header-03-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,849 chars |
| Build tokens | **33,243** over 1 successful call(s), 1 attempt(s) |
| Demo size | 19.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 20302 bytes |
| ✅ | window.__DEMO__.ready became true | 8 frames, effects: blur-fade-in, video-preview |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Build and deploy AI agents" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | AI Agent Builder |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=309 pageErrors=0 |

##### Header 04 Pixa — `jiro-header-04-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,962 chars |
| Build tokens | **46,300** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Header 04 Solra — `jiro-header-04-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,890 chars |
| Build tokens | **23,394** over 1 successful call(s), 1 attempt(s) |
| Demo size | 10.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 11033 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: stagger-entrance, parallax |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Crafting digital experiences with intention." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio — Digital Experiences |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=238 pageErrors=0 |

##### Hero 02 Moxo — `jiro-hero-02-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,782 chars |
| Build tokens | **34,876** over 1 successful call(s), 1 attempt(s) |
| Demo size | 23.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 23626 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: headline-reveal, copy-reveal, cta-reveal, product-preview-reveal, button-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 65 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "A calmer way to do your best work." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Product |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=249 pageErrors=0 |

##### Hero 03 Moxo — `jiro-hero-03-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,981 chars |
| Build tokens | **37,296** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Hero 05 Moxo — `jiro-hero-05-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,716 chars |
| Build tokens | **26,909** over 1 successful call(s), 1 attempt(s) |
| Demo size | 18.4 KB |
| Result | **15/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 18829 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: entrance-reveal, logo-marquee |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Streamline your workflow" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Streamline your workflow \| Company |
| ✅ | document declares lang | en |
| ❌ | no horizontal overflow @ 390px | 402 > 390 (div.badge.badge-1 [267..402]; div.badge.badge-2 [-12..150]; div.badge.badge-3 [242..402]; div.marquee-track [ |
| ❌ | no horizontal overflow @ 768px | 780 > 768 (div.badge.badge-1 [645..780]; div.badge.badge-3 [620..780]; div.marquee-track [-67..1373]; div.logo-set [-67. |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=288 pageErrors=0 |

##### How it Works 01 Halo — `jiro-how-it-works-01-halo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,792 chars |
| Build tokens | **36,824** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### How it works 01 Kelo — `jiro-how-it-works-01-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,900 chars |
| Build tokens | **25,653** over 1 successful call(s), 1 attempt(s) |
| Demo size | 9.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 9318 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: scroll-reveal, line-draw |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "How the platform works" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Process |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=473 pageErrors=0 |

##### How it Works 01 Luma — `jiro-how-it-works-01-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,812 chars |
| Build tokens | **42,084** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### How it Works 01 Orbit — `jiro-how-it-works-01-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,716 chars |
| Build tokens | **14,908** over 1 successful call(s), 1 attempt(s) |
| Demo size | 8.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 9151 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: staggered-entrance |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "How it Works" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | How it Works |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1342 pageErrors=0 |

##### How It Works 01 Pixa — `jiro-how-it-works-01-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,869 chars |
| Build tokens | **40,407** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### How it Works 02 Halo — `jiro-how-it-works-02-halo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,942 chars |
| Build tokens | **23,386** over 1 successful call(s), 1 attempt(s) |
| Demo size | 12.3 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12576 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: scroll-reveal, parallax |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Your path to better health" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | How It Works |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=869 pageErrors=0 |

##### How it Works 02 Kelo — `jiro-how-it-works-02-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,770 chars |
| Build tokens | **30,982** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### How it Works 02 Luma — `jiro-how-it-works-02-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,705 chars |
| Build tokens | **27,634** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 16782 bytes |
| ✅ | window.__DEMO__.ready became true | 5 frames, effects: scroll_reveal, generation_scan |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "From concept to final cut" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio - How it Works |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=711 pageErrors=0 |

##### How It Works 02 Pixa — `jiro-how-it-works-02-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,936 chars |
| Build tokens | **25,370** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### How it Works 03 Velara — `jiro-how-it-works-03-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,793 chars |
| Build tokens | **28,267** over 1 successful call(s), 1 attempt(s) |
| Demo size | 15.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 16330 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: scroll-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 62 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "How it Works" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | How it Works |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=493 pageErrors=0 |

##### How it Works 04 Kelo — `jiro-how-it-works-04-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,807 chars |
| Build tokens | **32,057** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### How it works 04 Velara — `jiro-how-it-works-04-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,866 chars |
| Build tokens | **19,506** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14578 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: accordion-animation, node-highlight, scroll-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 74 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "How it works" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company - How it works |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=732 pageErrors=0 |

##### How it Works 05 Halo — `jiro-how-it-works-05-halo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,715 chars |
| Build tokens | **60,692** over 2 successful call(s), 2 attempt(s) |
| Demo size | — |
| Result | not run |

##### How it Works 05 Velara — `jiro-how-it-works-05-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,789 chars |
| Build tokens | **33,147** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14750 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: none declared |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "How it Works" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | How it Works \| Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=486 pageErrors=0 |

##### How it works Creation.AI — `jiro-how-it-works-creationai`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,906 chars |
| Build tokens | **32,404** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### How it Wroks 01 Velara — `jiro-how-it-wroks-01-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,967 chars |
| Build tokens | **19,994** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.5 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 11729 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: scroll-reveal, visual-transition |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Turn your ideas into finished assets instantly." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | How it Works |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=665 pageErrors=0 |

##### Human Synthesis Header - The World — `jiro-human-synthesis-header-the-world`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,943 chars |
| Build tokens | **71,435** over 2 successful call(s), 2 attempt(s) |
| Demo size | — |
| Result | not run |

##### Integration 01 Kelo — `jiro-integration-01-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,701 chars |
| Build tokens | **28,134** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 16500 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: none declared |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Connect your entire stack" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Integration - Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=323 pageErrors=0 |

##### Integration 01 Luma — `jiro-integration-01-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,924 chars |
| Build tokens | **40,123** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Integration 01 Velara — `jiro-integration-01-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,736 chars |
| Build tokens | **26,106** over 1 successful call(s), 1 attempt(s) |
| Demo size | 10.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 10556 bytes |
| ✅ | window.__DEMO__.ready became true | 7 frames, effects: scroll-reveal, hover-connection |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Seamless Integrations" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Integration |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=344 pageErrors=0 |

##### Integration 02 Kelo — `jiro-integration-02-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,833 chars |
| Build tokens | **65,663** over 2 successful call(s), 2 attempt(s) |
| Demo size | — |
| Result | not run |

##### Integration 02 Luma — `jiro-integration-02-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,758 chars |
| Build tokens | **28,203** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 16662 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: scroll-entry, hover-response |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Connect your creative stack" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Integrations \| Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1083 pageErrors=0 |

##### Jelly Explore Button — `jiro-jelly-explore-button`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,793 chars |
| Build tokens | **31,136** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Juice Ecommerce Header - Strip — `jiro-juice-ecommerce-header-strip`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,898 chars |
| Build tokens | **28,987** over 1 successful call(s), 1 attempt(s) |
| Demo size | 12.7 KB |
| Result | **19/19 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12990 bytes |
| ✅ | window.__DEMO__.ready became true | 5 frames, effects: canvas-video-sim, scroll-navbar, card-entrance |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 38 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 52.27, stdev 40.65, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 371185788 -> 2226470549 |
| ✅ | exactly one <h1> with text | "FUEL
YOUR
BODY
WITH
NATURE" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=285 pageErrors=0 |

##### Left to Right Scan — `jiro-left-to-right-scan`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,807 chars |
| Build tokens | **48,300** over 2 successful call(s), 3 attempt(s) |
| Demo size | — |
| Result | not run |

##### Light Beam Button — `jiro-light-beam-button`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,950 chars |
| Build tokens | **32,300** over 1 successful call(s), 1 attempt(s) |
| Demo size | 8.6 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 8856 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: css-conic-gradient-border, css-inner-shimmer, css-dot-matrix, active-press-state |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Light Beam Button" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ❌ | reduced-motion: page still renders content | h1=1 textLen=68 pageErrors=0 |

##### Liquid Glass — `jiro-liquid-glass`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,847 chars |
| Build tokens | **45,894** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Metal Button — `jiro-metal-button`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,789 chars |
| Build tokens | **26,008** over 1 successful call(s), 1 attempt(s) |
| Demo size | 7.7 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 7904 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: continuous-rainbow-border, hover-lift, press-down |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Tactile by Design" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=161 pageErrors=0 |

##### Mindfulness Landing Page Design - Solra — `jiro-mindfulness-landing-page-design-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 8,029 chars |
| Build tokens | **26,365** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Neon Typing Button — `jiro-neon-typing-button`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,877 chars |
| Build tokens | **24,288** over 1 successful call(s), 1 attempt(s) |
| Demo size | 9.2 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 9457 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: TypewriterEffect, NeonHover, CursorBlink |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Neon Typing Button Interactive Component" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Neon Typing Button |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ❌ | reduced-motion: page still renders content | h1=1 textLen=90 pageErrors=0 |

##### Nutrition-Health Hero 03 Halo — `jiro-nutrition-health-hero-03-halo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,850 chars |
| Build tokens | **34,710** over 1 successful call(s), 1 attempt(s) |
| Demo size | — |
| Result | not run |

##### Nutrition-Health Hero 04 Halo — `jiro-nutrition-health-hero-04-halo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,846 chars |
| Build tokens | **27,687** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.0 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17406 bytes |
| ✅ | window.__DEMO__.ready became true | 121 frames, effects: entrance-animation, stat-count-up |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "A clearer path to better health." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Nutrition Health Platform |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=395 pageErrors=0 |

##### Online AI Learning Platform Hero Orbit — `jiro-online-ai-learning-platform-hero-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,902 chars |
| Build tokens | **78,624** over 2 successful call(s), 2 attempt(s) |
| Demo size | — |
| Result | not run |

##### Online Store Manager AI Website Header — `jiro-online-store-manager-ai-website-header`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,879 chars |
| Build tokens | **30,874** over 1 successful call(s), 1 attempt(s) |
| Demo size | 15.4 KB |
| Result | **19/19 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 15733 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: canvas-cinematic-bg, staggered-entrance, ping-animation, spring-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 69 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 15.5, stdev 7.65, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 1768645228 -> 4128240011 |
| ✅ | exactly one <h1> with text | "Manage Your Online Store with AI" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Online Store Manager AI |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=212 pageErrors=0 |

##### Online Yoga Programs Landing Page - Solra — `jiro-online-yoga-programs-landing-page-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,899 chars |
| Build tokens | **40,205** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Personal Business Coach Hero Orbit — `jiro-personal-business-coach-hero-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,968 chars |
| Build tokens | **26,253** over 1 successful call(s), 1 attempt(s) |
| Demo size | 15.5 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 15853 bytes |
| ✅ | window.__DEMO__.ready became true | 15 frames, effects: fade-in-css, marquee-rAF |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Elevate your professional trajectory." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Personal Business Coach |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=493 pageErrors=0 |

##### Personal Fitness Coach Hero Orbit — `jiro-personal-fitness-coach-hero-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,906 chars |
| Build tokens | **25,847** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Pricing 01 Kelo — `jiro-pricing-01-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,660 chars |
| Build tokens | **39,635** over 1 successful call(s), 1 attempt(s) |
| Demo size | 24.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 25156 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: card-entrance, billing-toggle-transition, plan-selection-feedback |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 65 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Pricing 01 Kelo" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Pricing 01 Kelo |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=797 pageErrors=0 |

##### Pricing 01 Luma — `jiro-pricing-01-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,977 chars |
| Build tokens | **29,382** over 1 successful call(s), 1 attempt(s) |
| Demo size | 20.5 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 21001 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: scroll_stagger, cta_ripple |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 60 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "AI Media Generation Plans" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Pricing \| Company |
| ✅ | document declares lang | en |
| ❌ | no horizontal overflow @ 390px | 717 > 390 (table.comparison-table [25..793]; thead [25..793]; tr [25..793]; th [286..427]; th [427..621]; th [621..793]; |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1000 pageErrors=0 |

##### Pricing 01 Orbit — `jiro-pricing-01-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,823 chars |
| Build tokens | **28,994** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Pricing 01 Solra — `jiro-pricing-01-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,722 chars |
| Build tokens | **28,144** over 1 successful call(s), 1 attempt(s) |
| Demo size | 19.1 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 19567 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: staggered-card-entrance |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 63 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Engagement Models" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Pricing & Engagements \| Studio |
| ✅ | document declares lang | en |
| ❌ | no horizontal overflow @ 390px | 578 > 390 (table [25..725]; thead [25..725]; tr [25..725]; th [388..554]; th [554..725]; tbody [25..725]; tr [25..725]) |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1238 pageErrors=0 |

##### Pricing 02 Kelo — `jiro-pricing-02-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,745 chars |
| Build tokens | **25,623** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Pricing 02 Orbit — `jiro-pricing-02-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,845 chars |
| Build tokens | **21,315** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14516 bytes |
| ✅ | window.__DEMO__.ready became true | 21 frames, effects: scroll-entrance-animation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 45 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Choose Your Programme" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company - Pricing |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=578 pageErrors=0 |

##### Pricing 02 Velara — `jiro-pricing-02-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,753 chars |
| Build tokens | **40,792** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Pricing 03 Kelo — `jiro-pricing-03-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,847 chars |
| Build tokens | **29,784** over 1 successful call(s), 1 attempt(s) |
| Demo size | 19.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 19782 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: scroll-reveal, billing-toggle-transition, card-hover-lift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Intelligent pricing for every stage" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Pricing |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=617 pageErrors=0 |

##### Pricing 03 Luma — `jiro-pricing-03-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,944 chars |
| Build tokens | **30,759** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Pricing 03 Orbit — `jiro-pricing-03-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,838 chars |
| Build tokens | **27,853** over 1 successful call(s), 1 attempt(s) |
| Demo size | 21.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 21885 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: card-entrance, price-toggle |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 53 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Choose your coaching program" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Pricing |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=660 pageErrors=0 |

##### Pricing 03 Pixa — `jiro-pricing-03-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,781 chars |
| Build tokens | **28,869** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Pricing 03 Solra — `jiro-pricing-03-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,950 chars |
| Build tokens | **24,210** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.7 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14027 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: scroll-stagger, hover-lift, interactive-select |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Engagement Options" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Pricing - Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=758 pageErrors=0 |

##### Pricing 04 Kelo — `jiro-pricing-04-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,689 chars |
| Build tokens | **23,462** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Pricing 04 Luma — `jiro-pricing-04-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,795 chars |
| Build tokens | **24,555** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 18370 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: scroll-entrance, toggle-transition |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Scale your creative output" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Pricing |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=612 pageErrors=0 |

##### Pricing 04 Orbit — `jiro-pricing-04-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,763 chars |
| Build tokens | **31,706** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Pricing 04 Velara — `jiro-pricing-04-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,768 chars |
| Build tokens | **28,688** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 15206 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: card-entrance, toggle-transition, card-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 66 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Pricing Plans" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Pricing |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=643 pageErrors=0 |

##### Pricing 05 Kelo — `jiro-pricing-05-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,697 chars |
| Build tokens | **25,152** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Pricing 05 Luma — `jiro-pricing-05-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,736 chars |
| Build tokens | **29,609** over 1 successful call(s), 1 attempt(s) |
| Demo size | 22.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 22721 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: scroll-animations, toggle-transitions, rAF-loop |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Pricing" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Pricing |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=453 pageErrors=0 |

##### Pricing 05 Solra — `jiro-pricing-05-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,917 chars |
| Build tokens | **26,814** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Pricing 05 Velara — `jiro-pricing-05-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,761 chars |
| Build tokens | **35,638** over 1 successful call(s), 1 attempt(s) |
| Demo size | 30.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 31335 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: scroll-entrance, usage-curve-morph, comparison-filter |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 59 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Pricing" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Pricing |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=860 pageErrors=0 |

##### Pricing 06 Kelo — `jiro-pricing-06-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,702 chars |
| Build tokens | **29,821** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Pricing 3 Card Long — `jiro-pricing-3-card-long`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,952 chars |
| Build tokens | **30,260** over 1 successful call(s), 1 attempt(s) |
| Demo size | 18.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 18500 bytes |
| ✅ | window.__DEMO__.ready became true | 16 frames, effects: char-animation, toggle-slide, price-fade, cta-sweep, card-stagger |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 61 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Simple, transparent pricing" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Pricing - Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=465 pageErrors=0 |

##### Spot Fill Button — `jiro-spot-fill-button`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,710 chars |
| Build tokens | **26,268** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Stacked Card — `jiro-stackedcard`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,695 chars |
| Build tokens | **31,474** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.0 KB |
| Result | **15/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14360 bytes |
| ✅ | window.__DEMO__.ready became true | 85 frames, effects: staggered-entrance |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Selected Works" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Stacked Card Component |
| ✅ | document declares lang | en |
| ❌ | no horizontal overflow @ 390px | 470 > 390 (button.card.is-visible [-80..230]; div.card-image-wrapper [-80..211]; div.card-image.img-1 [-80..228]; div.ca |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ❌ | reduced-motion: page still renders content | h1=1 textLen=89 pageErrors=0 |

##### Stats and Metrics 01 Luma — `jiro-stats-and-metrics-01-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,792 chars |
| Build tokens | **20,174** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Stats & Metrics 01 Halo — `jiro-stats-metrics-01-halo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,764 chars |
| Build tokens | **23,117** over 1 successful call(s), 1 attempt(s) |
| Demo size | 8.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 8770 bytes |
| ✅ | window.__DEMO__.ready became true | 10 frames, effects: scroll-reveal, counter-placeholder |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 51 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Measurable Wellness Outcomes" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=216 pageErrors=0 |

##### Stats & Metrics 01 kelo — `jiro-stats-metrics-01-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,716 chars |
| Build tokens | **29,685** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Stats Metrics 01 Pixa — `jiro-stats-metrics-01-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,825 chars |
| Build tokens | **26,054** over 1 successful call(s), 1 attempt(s) |
| Demo size | 12.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12315 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: counter-scramble, scroll-reveal, avatar-stagger |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Measurable Impact" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=233 pageErrors=0 |

##### Stats & Metrics 02 Halo — `jiro-stats-metrics-02-halo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,995 chars |
| Build tokens | **22,109** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Stats & Metrics 02 Kelo — `jiro-stats-metrics-02-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,846 chars |
| Build tokens | **22,333** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 12207 bytes |
| ✅ | window.__DEMO__.ready became true | 10 frames, effects: staggered-entrance, counter-animation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Measurable outcomes for intelligent systems" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=303 pageErrors=0 |

##### Stats & Metrics 02 Moxo — `jiro-stats-metrics-02-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,723 chars |
| Build tokens | **38,159** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Stats Metrics 02 Pixa — `jiro-stats-metrics-02-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,918 chars |
| Build tokens | **24,982** over 1 successful call(s), 1 attempt(s) |
| Demo size | 8.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 8314 bytes |
| ✅ | window.__DEMO__.ready became true | 13 frames, effects: scroll-reveal-spring |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 61 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Platform Metrics" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Stats & Metrics |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=133 pageErrors=0 |

##### Stats & Metrics 04 Moxo — `jiro-stats-metrics-04-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,788 chars |
| Build tokens | **15,694** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Stats & Metrics 05 Moxo — `jiro-stats-metrics-05-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,939 chars |
| Build tokens | **23,899** over 1 successful call(s), 1 attempt(s) |
| Demo size | 15.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 16193 bytes |
| ✅ | window.__DEMO__.ready became true | 12 frames, effects: spring-entrance, path-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Measurable impact across the enterprise" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company - Platform Metrics |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=452 pageErrors=0 |

##### Stats & Metrics o1 Moxo — `jiro-stats-metrics-o1-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,815 chars |
| Build tokens | **18,658** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Stats & Metrics Vendo — `jiro-stats-metrics-vendo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,726 chars |
| Build tokens | **17,489** over 1 successful call(s), 1 attempt(s) |
| Demo size | 7.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 7528 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: stagger-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 43 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Stats & Metrics" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Stats & Metrics |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=105 pageErrors=0 |

##### Swap Button — `jiro-swap-button`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,756 chars |
| Build tokens | **24,202** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Swiss-style Card — `jiro-swiss-style-card`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,773 chars |
| Build tokens | **23,724** over 1 successful call(s), 1 attempt(s) |
| Demo size | 11.2 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 11430 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: scroll-entrance, spring-hover-popup |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Key Metrics" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=310 pageErrors=0 |

##### Team 02 Pixa — `jiro-team-02-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,973 chars |
| Build tokens | **47,640** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Team 02 Solra — `jiro-team-02-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,875 chars |
| Build tokens | **24,827** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.6 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14968 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: none declared |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Meet the team" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=575 pageErrors=0 |

##### Team 03 Pixa — `jiro-team-03-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,661 chars |
| Build tokens | **25,964** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Team 03 Solra — `jiro-team-03-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,721 chars |
| Build tokens | **19,410** over 1 successful call(s), 1 attempt(s) |
| Demo size | 8.7 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 8928 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: marquee, hover-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Team" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company - Team |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=311 pageErrors=0 |

##### Team Showcase — `jiro-team-showcase`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,880 chars |
| Build tokens | **33,897** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Team Talent — `jiro-team-talent`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,771 chars |
| Build tokens | **23,693** over 1 successful call(s), 1 attempt(s) |
| Demo size | 9.7 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 9978 bytes |
| ✅ | window.__DEMO__.ready became true | 14 frames, effects: staggered-blur-up |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Meet the Team Talent" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Team Talent |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=368 pageErrors=0 |

##### Testimonial 01 Blaze — `jiro-testimonial-01-blaze`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,828 chars |
| Build tokens | **23,467** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Testimonial 01 Kelo — `jiro-testimonial-01-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,862 chars |
| Build tokens | **26,357** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14457 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: scroll-reveal, carousel |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Customer Stories" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Customer Stories |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=828 pageErrors=0 |

##### Testimonial 01 Luma — `jiro-testimonial-01-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,799 chars |
| Build tokens | **38,794** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Testimonial 01 Orbit — `jiro-testimonial-01-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,658 chars |
| Build tokens | **27,094** over 1 successful call(s), 1 attempt(s) |
| Demo size | 14.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 14901 bytes |
| ✅ | window.__DEMO__.ready became true | 4 frames, effects: marquee-scroll |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Student Stories" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Student Stories |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=802 pageErrors=0 |

##### Testimonial 01 Velara — `jiro-testimonial-01-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,765 chars |
| Build tokens | **27,386** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Testimonial 02 Blaze — `jiro-testimonial-02-blaze`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,931 chars |
| Build tokens | **39,150** over 1 successful call(s), 1 attempt(s) |
| Demo size | 23.9 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 24497 bytes |
| ✅ | window.__DEMO__.ready became true | 14 frames, effects: marquee-scroll, pause-on-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Traveller stories to inspire your next journey" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Traveller Stories \| Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=982 pageErrors=0 |

##### Testimonial 02 Halo — `jiro-testimonial-02-halo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,855 chars |
| Build tokens | **23,554** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Testimonial 02 Kelo — `jiro-testimonial-02-kelo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,775 chars |
| Build tokens | **47,365** over 1 successful call(s), 1 attempt(s) |
| Demo size | 37.1 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 38026 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: carousel-navigation, carousel-autoplay, desktop-card-rotation, staggered-card-entrance, supporting-or |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Testimonial 02 Kelo" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Testimonial 02 Kelo |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=706 pageErrors=0 |

##### Testimonial 02 Luma — `jiro-testimonial-02-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,918 chars |
| Build tokens | **28,610** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.7 KB |
| Result | **16/17 checks passed** ⚠️ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17078 bytes |
| ✅ | window.__DEMO__.ready became true | 93 frames, effects: scroll-entry |
| ❌ | animation loop is live (>= 20 frames / 1.2s) | 0 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "A quiet tool that lets the work speak for itself. It perfect" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=193 pageErrors=0 |

##### Testimonial 02 Orbit — `jiro-testimonial-02-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,724 chars |
| Build tokens | **19,362** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Testimonial 02 Pixa — `jiro-testimonial-02-pixa`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,763 chars |
| Build tokens | **27,136** over 1 successful call(s), 1 attempt(s) |
| Demo size | 12.7 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13038 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: avatar-ring-animation, quote-crossfade |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Customer Testimonials" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Testimonials |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=354 pageErrors=0 |

##### Testimonial 02 Velara — `jiro-testimonial-02-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,751 chars |
| Build tokens | **42,628** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Testimonial 03 Luma — `jiro-testimonial-03-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,742 chars |
| Build tokens | **26,020** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13563 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: staggered-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Creator Voices" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=654 pageErrors=0 |

##### Testimonial 03 Moxo — `jiro-testimonial-03-moxo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,791 chars |
| Build tokens | **24,753** over 1 successful call(s), 9 attempt(s) |
| Demo size | — |
| Result | not run |

##### Testimonial 03 Orbit — `jiro-testimonial-03-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,733 chars |
| Build tokens | **19,270** over 1 successful call(s), 1 attempt(s) |
| Demo size | 10.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 10202 bytes |
| ✅ | window.__DEMO__.ready became true | 12 frames, effects: hover-lift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Real Results, Real Growth" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Student Outcomes |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=681 pageErrors=0 |

##### Testimonial 03 Velara — `jiro-testimonial-03-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,925 chars |
| Build tokens | **43,104** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Testimonial 04 Halo — `jiro-testimonial-04-halo`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,838 chars |
| Build tokens | **29,495** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.0 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 17383 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: staggered-entrance, avatar-hover |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Customer Stories" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Customer Stories |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=364 pageErrors=0 |

##### Testimonial 04 Luma — `jiro-testimonial-04-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,795 chars |
| Build tokens | **22,965** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Testimonial 04 Orbit — `jiro-testimonial-04-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,913 chars |
| Build tokens | **17,274** over 1 successful call(s), 1 attempt(s) |
| Demo size | 13.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 13589 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: scroll-reveal |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 67 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "A journey of growth" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Student Transformation - Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=570 pageErrors=0 |

##### Testimonial 04 Velara — `jiro-testimonial-04-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,782 chars |
| Build tokens | **27,168** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Testimonial 05 Luma — `jiro-testimonial-05-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,826 chars |
| Build tokens | **25,282** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.4 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 16818 bytes |
| ✅ | window.__DEMO__.ready became true | 0 frames, effects: scroll-entrance, marquee-drift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Real results from modern creators" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company - Testimonials |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1216 pageErrors=0 |

##### Testimonial Masonry — `jiro-testimonial-masonry`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,878 chars |
| Build tokens | **36,887** over 1 successful call(s), 9 attempt(s) |
| Demo size | — |
| Result | not run |

##### Testimonial Modern — `jiro-testimonial-modern`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,917 chars |
| Build tokens | **28,413** over 1 successful call(s), 1 attempt(s) |
| Demo size | 17.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 18180 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: blur-to-focus-transition, button-press-animation |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Client Testimonials" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=208 pageErrors=0 |

##### Testimonial Video — `jiro-testimonial-video`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,819 chars |
| Build tokens | **26,900** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Testimonials 01 Solra — `jiro-testimonials-01-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,806 chars |
| Build tokens | **23,104** over 1 successful call(s), 1 attempt(s) |
| Demo size | 10.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 11093 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: scroll-fade-in, carousel-transition |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "SELECTED FEEDBACK" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=391 pageErrors=0 |

##### Testimonials 02 Solra — `jiro-testimonials-02-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,930 chars |
| Build tokens | **20,821** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Text to Video Generator Hero — `jiro-text-to-video-generator-hero`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,894 chars |
| Build tokens | **29,541** over 1 successful call(s), 1 attempt(s) |
| Demo size | 16.3 KB |
| Result | **19/19 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 16721 bytes |
| ✅ | window.__DEMO__.ready became true | 11 frames, effects: canvas-background, staggered-entrance, mockup-playback-motion |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 20 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas paints non-blank content | mean 31.07, stdev 5.79, coverage 1 |
| ✅ | canvas spans the viewport width | 1440px of 1440px |
| ✅ | canvas keeps repainting (content changes) | hash 3712570837 -> 1760807321 |
| ✅ | exactly one <h1> with text | "Turn your ideas into cinematic video." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Text to Video Generator Hero |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=310 pageErrors=0 |

##### Trusted Brand 2 Column — `jiro-trusted-brand-2-column`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,958 chars |
| Build tokens | **42,762** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Trusted Brand Black — `jiro-trusted-brand-black`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,888 chars |
| Build tokens | **35,694** over 1 successful call(s), 1 attempt(s) |
| Demo size | 9.7 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 9934 bytes |
| ✅ | window.__DEMO__.ready became true | 3 frames, effects: marquee-css-loop, title-css-fade-in |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 73 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Trusted by top teams" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=114 pageErrors=0 |

##### Trusted Brand Box — `jiro-trusted-brand-box`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,743 chars |
| Build tokens | **19,291** over 1 successful call(s), 9 attempt(s) |
| Demo size | — |
| Result | not run |

##### Trusted Brand — `jiro-trusted-brand`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,706 chars |
| Build tokens | **19,259** over 1 successful call(s), 1 attempt(s) |
| Demo size | 9.2 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 9404 bytes |
| ✅ | window.__DEMO__.ready became true | 15 frames, effects: scroll-fade-up |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 34 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Trusted Brand" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Company - Trusted Brands |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=173 pageErrors=0 |

##### Video Generation Pricing — `jiro-video-generation-pricing`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,803 chars |
| Build tokens | **86,268** over 2 successful call(s), 7 attempt(s) |
| Demo size | — |
| Result | not run |

##### Why Choose us 01 Finsyc — `jiro-why-choose-us-01-finsyc`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,799 chars |
| Build tokens | **16,659** over 1 successful call(s), 1 attempt(s) |
| Demo size | 10.6 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 10874 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: staggered-reveal, hover-lift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Why Choose Us" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Why Choose Us |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=761 pageErrors=0 |

##### Why Choose Us 01 Luma — `jiro-why-choose-us-01-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,661 chars |
| Build tokens | **21,995** over 1 successful call(s), 9 attempt(s) |
| Demo size | — |
| Result | not run |

##### Why Choose Us 01 Orbit — `jiro-why-choose-us-01-orbit`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,778 chars |
| Build tokens | **28,931** over 1 successful call(s), 1 attempt(s) |
| Demo size | 18.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 18741 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: scroll-reveal, hover-lift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 70 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Why Choose Us" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Why Choose Us |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=920 pageErrors=0 |

##### Why Choose Us 01 Velara — `jiro-why-choose-us-01-velara`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,949 chars |
| Build tokens | **39,710** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

##### Why Choose Us 02 Luma — `jiro-why-choose-us-02-luma`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,819 chars |
| Build tokens | **24,702** over 1 successful call(s), 1 attempt(s) |
| Demo size | 15.3 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 15700 bytes |
| ✅ | window.__DEMO__.ready became true | 6 frames, effects: staggered-scroll-reveal, hover-lift |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Why Choose Us" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Why Choose Us |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1045 pageErrors=0 |

##### Why us 01 Solra — `jiro-why-us-01-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,770 chars |
| Build tokens | **21,713** over 1 successful call(s), 9 attempt(s) |
| Demo size | — |
| Result | not run |

##### Why us 03 Solra — `jiro-why-us-03-solra`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,978 chars |
| Build tokens | **31,521** over 1 successful call(s), 1 attempt(s) |
| Demo size | 19.8 KB |
| Result | **17/17 checks passed** ✅ |

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 20316 bytes |
| ✅ | window.__DEMO__.ready became true | 1 frames, effects: scroll-fade-rise, staggered-sequence |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 57 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "A considered approach to digital craft." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Our Approach \| Studio |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1153 pageErrors=0 |

##### ZiroBuild Hero — `jiro-zirobuild-hero`

| Field | Value |
|---|---|
| Platform | cmd-code (`openrouter`) |
| Model | `stealth/space-bunny-alpha` |
| Prompt size | 7,874 chars |
| Build tokens | **46,842** over 1 successful call(s), 5 attempt(s) |
| Demo size | — |
| Result | not run |

#### Reproducing this

```bash
# 1. build every demo from its prompt (writes data/ledger.jsonl with exact token usage)
node tools/runner.mjs --jobs data/jobs.json --concurrency 2

# 2. verify every demo in headless Chromium (writes data/verification.json)
node tools/verify.mjs

# 3. have a different model review each demo against its brief
node tools/crosscheck.mjs

# 4. regenerate the site data + these reports
node tools/render_site.mjs && node tools/reports.mjs
```

---

*Generated 2026-10-05T15:16:34.022Z by `tools/reports.mjs`.*

---


# Report: Cross-check report

Source: https://landingpageprompts.com/reports/04-crosscheck

### Cross-check report

Verification with a headless browser proves a page *runs*. It cannot prove the page is the
page that was asked for. So each demo was also handed — together with the full original
brief — to a **different model** than the one that built it, with instructions to be hostile
and to report only concrete mismatches.

Reviewer models are never reused, and no reviewer is the builder.

#### Summary

| | |
|---|---|
| Reviews performed | 38 |
| Verdict `confirmed` | 8 |
| Verdict `partial` | 26 |
| Verdict `refuted` | 0 |
| Cross-check tokens | **770,912** |

#### Reviewer assignment

| Prompt | Built by | Reviewed by | Platform |
|---|---|---|---|
| Liquid Glass Voyage | `hy4-preview-f` | `gpt-5.5` | workbuddy |
| Scroll Atlas | `MiniMaxAI/MiniMax-M3` | `gpt-5.4` | workbuddy |
| Magnetic Orbit | `glm-5.3` | `MiniMaxAI/MiniMax-M3` | cmdcode |
| Neural Drift | `kimi-k3` | `glm-5.2` | workbuddy |
| Kinetic Type | `gemini-3.5-flash` | `moonshotai/Kimi-K2.7-Code` | cmdcode |
| Stack Deck | `gpt-5.5` | `kimi-k2.8-preview` | workbuddy |
| Aurora Freight | `hy4-preview-f` | `hy3` | workbuddy |
| Basalt | `stealth/space-bunny-alpha` | `moonshotai/Kimi-K2.7-Code` | cmdcode |
| Bracket | `stealth/space-bunny-alpha` | `moonshotai/Kimi-K2.7-Code` | cmdcode |
| Cadence | `xiaomi/mimo-v2.6-pro` | `kimi-k2.8-preview` | workbuddy |
| Camber | `stealth/space-bunny-alpha` | `kimi-k2.8-preview` | workbuddy |
| Cant | `stealth/space-bunny-alpha` | `glm-5.2` | workbuddy |
| Carbon | `stealth/space-bunny-alpha` | `MiniMaxAI/MiniMax-M3` | cmdcode |
| Cardinal | `stealth/space-bunny-alpha` | `deepseek-v4.1-flash` | workbuddy |
| Cascade | `stealth/space-bunny-alpha` | `kimi-k2.8-preview` | workbuddy |
| Chrome Bloom | `MiniMaxAI/MiniMax-M3` | `gpt-5.6-luna` | workbuddy |
| Data Tide | `glm-5.3` | `glm-5.3-flash` | workbuddy |
| Echo | `xiaomi/mimo-v2.6-pro` | `glm-5.2` | workbuddy |
| Filament | `stealth/space-bunny-alpha` | `glm-5.2` | workbuddy |
| Fringe | `stealth/space-bunny-alpha` | `glm-5.3-flash` | workbuddy |
| Grid Collapse | `kimi-k3` | `deepseek-v4.1-flash` | workbuddy |
| Halide | `xiaomi/mimo-v2.6-pro` | `gpt-5.5` | workbuddy |
| Headlight | `stealth/space-bunny-alpha` | `MiniMaxAI/MiniMax-M3` | cmdcode |
| Interactive Discovery | `hy4-preview-f` | `—` | — |
| Lattice | `xiaomi/mimo-v2.6-pro` | `MiniMaxAI/MiniMax-M3` | cmdcode |
| Margin | `stealth/space-bunny-alpha` | `gpt-5.6-luna` | workbuddy |
| Meridian | `xiaomi/mimo-v2.6-pro` | `—` | — |
| Monolith Type | `gpt-5.5` | `MiniMaxAI/MiniMax-M3` | cmdcode |
| Nebula | `stealth/space-bunny-alpha` | `hy3` | workbuddy |
| Prism | `stealth/space-bunny-alpha` | `gpt-5.5` | workbuddy |
| Rift | `xiaomi/mimo-v2.6-pro` | `—` | — |
| Sable | `xiaomi/mimo-v2.6-pro` | `—` | — |
| Signal Room | `gpt-5.5` | `hy4-preview-f` | workbuddy |
| Slipstream | `stealth/space-bunny-alpha` | `deepseek-v4.1-flash` | workbuddy |
| Smolder | `stealth/space-bunny-alpha` | `gpt-5.4` | workbuddy |
| Solstice | `stealth/space-bunny-alpha` | `gpt-5.6-luna` | workbuddy |
| Tally | `stealth/space-bunny-alpha` | `gpt-5.5` | workbuddy |
| Tessellate | `stealth/space-bunny-alpha` | `glm-5.3-flash` | workbuddy |
| Thermal | `xiaomi/mimo-v2.6-pro` | `gpt-5.4` | workbuddy |
| Undertow | `stealth/space-bunny-alpha` | `gpt-5.4` | workbuddy |
| Upslope | `stealth/space-bunny-alpha` | `hy3` | workbuddy |
| Vellum | `xiaomi/mimo-v2.6-pro` | `hy3` | workbuddy |
| Voltage | `xiaomi/mimo-v2.6-pro` | `—` | — |
| About Brand Overview | `stealth/space-bunny-alpha` | `—` | — |
| About Countdown | `stealth/space-bunny-alpha` | `—` | — |
| About Multi Layout | `stealth/space-bunny-alpha` | `—` | — |
| About Team Overview | `stealth/space-bunny-alpha` | `—` | — |
| About us 01 Blaze | `stealth/space-bunny-alpha` | `—` | — |
| About Us 01 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| About Us 01 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| About Us 02 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| About Us 03 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| About Us 03 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| About Us 04 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| About Us 05 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| About Us 05 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| About Us 06 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| About Us 07 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| AI Agent Hero Kelo | `stealth/space-bunny-alpha` | `—` | — |
| AI Automation Hero Kelo | `stealth/space-bunny-alpha` | `—` | — |
| AI Budget Tracker Hero Velara | `stealth/space-bunny-alpha` | `—` | — |
| AI Budget Tracking Landing Page - Velara AI | `stealth/space-bunny-alpha` | `—` | — |
| AI Chatbot Agent Header | `stealth/space-bunny-alpha` | `—` | — |
| AI Content Generator Hero Velara | `stealth/space-bunny-alpha` | `—` | — |
| AI Customer Support Hero Kelo | `stealth/space-bunny-alpha` | `—` | — |
| AI Customer Support Landing Page - Kelo | `stealth/space-bunny-alpha` | `—` | — |
| AI Developer Solver Hero Velara | `stealth/space-bunny-alpha` | `—` | — |
| AI HR Manager Website Header | `stealth/space-bunny-alpha` | `—` | — |
| AI Image Genertion Hero kelo | `stealth/space-bunny-alpha` | `—` | — |
| AI Interior Generator Header | `stealth/space-bunny-alpha` | `—` | — |
| AI Marketing Hero Kelo | `stealth/space-bunny-alpha` | `—` | — |
| AI Marketing Landing Page - Kelo | `stealth/space-bunny-alpha` | `—` | — |
| AI Notepad Website Header | `stealth/space-bunny-alpha` | `—` | — |
| AI Notes Taker Hero Velara | `stealth/space-bunny-alpha` | `—` | — |
| AI Sales Call Analyzer Header | `stealth/space-bunny-alpha` | `—` | — |
| AI Task Management Hero Velara | `stealth/space-bunny-alpha` | `—` | — |
| AI Video Editor Hero Luma | `stealth/space-bunny-alpha` | `—` | — |
| AI video Translator Hero Luma | `stealth/space-bunny-alpha` | `—` | — |
| AI Voice Generator Header | `stealth/space-bunny-alpha` | `—` | — |
| AI Voice Platform Hero Luma | `stealth/space-bunny-alpha` | `—` | — |
| Aurora Gradient | `stealth/space-bunny-alpha` | `—` | — |
| Blog 01 Blaze | `stealth/space-bunny-alpha` | `—` | — |
| Blog 01 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Blog 01 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Blog 02 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Blogs - Luxterra | `stealth/space-bunny-alpha` | `—` | — |
| Charity Headers | `stealth/space-bunny-alpha` | `—` | — |
| Chrome Bezel 3D | `stealth/space-bunny-alpha` | `—` | — |
| Circle Reveal Button | `stealth/space-bunny-alpha` | `—` | — |
| Contact Us 01 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Contact Us 02 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| CTA 01 Luma | `stealth/space-bunny-alpha` | `—` | — |
| CTA 01 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| CTA 01 Velara | `stealth/space-bunny-alpha` | `—` | — |
| CTA 02 Luma | `stealth/space-bunny-alpha` | `—` | — |
| CTA 02 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| CTA 03 orbit | `stealth/space-bunny-alpha` | `—` | — |
| Electric Border Button | `stealth/space-bunny-alpha` | `—` | — |
| Energy Beam Bg | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 01 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 01 Luma | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 01 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 01 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 01 Velara | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 02 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 02 Luma | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 02 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 02 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 02 Velara | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 03 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 03 Luma | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 03 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 03 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 03 Velara | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 04 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 04 Luma | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 04 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 04 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 05 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 05 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 05 Velara | `stealth/space-bunny-alpha` | `—` | — |
| FAQ 2 Column Straight | `stealth/space-bunny-alpha` | `—` | — |
| FAQ Middle Image | `stealth/space-bunny-alpha` | `—` | — |
| FAQ Middle Simple | `stealth/space-bunny-alpha` | `—` | — |
| FAQ Vendo | `stealth/space-bunny-alpha` | `—` | — |
| FAQ with Image | `stealth/space-bunny-alpha` | `—` | — |
| FAQs 01 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| FAQs 01 Solra | `stealth/space-bunny-alpha` | `—` | — |
| FAQs - Luxterra | `stealth/space-bunny-alpha` | `—` | — |
| Feature 04 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Feature Work Benjamen | `stealth/space-bunny-alpha` | `—` | — |
| Features 01 Halo | `stealth/space-bunny-alpha` | `—` | — |
| Features 01 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Features 01 Learn.AI | `stealth/space-bunny-alpha` | `—` | — |
| Features 01 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Features 01 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Features 01 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Features 01 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Features 01 Vendo | `stealth/space-bunny-alpha` | `—` | — |
| Features 02 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Features 02 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Features 02 NexVPN | `stealth/space-bunny-alpha` | `—` | — |
| Features 02 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Features 02 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Features 02 Vendo | `stealth/space-bunny-alpha` | `—` | — |
| Features 03 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Features 03 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Features 03 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Features 03 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Features 03 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Features 04 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Features 04 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Features 04 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Features 05 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Features 05 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Features 05 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Features 05 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Features 06 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Features 06 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Features 06 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Features 06 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Features 07 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Features 07 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Features 07 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Features 08 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Features 08 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Features 09 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Features 09 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Features 09 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Features 10 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Features 10 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Features 10 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Features 11 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Features 11 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Features 12 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Finance Management Landing Page - Finsyc | `stealth/space-bunny-alpha` | `—` | — |
| Fluid Gradient Engine | `stealth/space-bunny-alpha` | `—` | — |
| Footer 01 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Footer 01 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Footer 01 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Footer 01 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Footer 01 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Footer 02 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Footer 02 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Footer 02 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Footer 02 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Footer 02 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Footer 03 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Footer 03 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Footer 03 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Footer 03 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Footer 03 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Footer 04 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Footer 04 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Footer 04 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Footer 04 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Footer 05 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Footer 05 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Footer 05 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Footer 06 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Footer Basic | `stealth/space-bunny-alpha` | `—` | — |
| Footer - Glimpse | `stealth/space-bunny-alpha` | `—` | — |
| Footer o1 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Footer With Newsletter | `stealth/space-bunny-alpha` | `—` | — |
| Freelance Coach Hero Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Glow Button | `stealth/space-bunny-alpha` | `—` | — |
| Glow Color | `stealth/space-bunny-alpha` | `—` | — |
| Header 02 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Header 02 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Header 03 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Header 04 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Header 04 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Hero 02 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Hero 03 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Hero 05 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| How it Works 01 Halo | `stealth/space-bunny-alpha` | `—` | — |
| How it works 01 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| How it Works 01 Luma | `stealth/space-bunny-alpha` | `—` | — |
| How it Works 01 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| How It Works 01 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| How it Works 02 Halo | `stealth/space-bunny-alpha` | `—` | — |
| How it Works 02 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| How it Works 02 Luma | `stealth/space-bunny-alpha` | `—` | — |
| How It Works 02 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| How it Works 03 Velara | `stealth/space-bunny-alpha` | `—` | — |
| How it Works 04 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| How it works 04 Velara | `stealth/space-bunny-alpha` | `—` | — |
| How it Works 05 Halo | `stealth/space-bunny-alpha` | `—` | — |
| How it Works 05 Velara | `stealth/space-bunny-alpha` | `—` | — |
| How it works Creation.AI | `stealth/space-bunny-alpha` | `—` | — |
| How it Wroks 01 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Human Synthesis Header - The World | `stealth/space-bunny-alpha` | `—` | — |
| Integration 01 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Integration 01 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Integration 01 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Integration 02 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Integration 02 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Jelly Explore Button | `stealth/space-bunny-alpha` | `—` | — |
| Juice Ecommerce Header - Strip | `stealth/space-bunny-alpha` | `—` | — |
| Left to Right Scan | `stealth/space-bunny-alpha` | `—` | — |
| Light Beam Button | `stealth/space-bunny-alpha` | `—` | — |
| Liquid Glass | `stealth/space-bunny-alpha` | `—` | — |
| Metal Button | `stealth/space-bunny-alpha` | `—` | — |
| Mindfulness Landing Page Design - Solra | `stealth/space-bunny-alpha` | `—` | — |
| Neon Typing Button | `stealth/space-bunny-alpha` | `—` | — |
| Nutrition-Health Hero 03 Halo | `stealth/space-bunny-alpha` | `—` | — |
| Nutrition-Health Hero 04 Halo | `stealth/space-bunny-alpha` | `—` | — |
| Online AI Learning Platform Hero Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Online Store Manager AI Website Header | `stealth/space-bunny-alpha` | `—` | — |
| Online Yoga Programs Landing Page - Solra | `stealth/space-bunny-alpha` | `—` | — |
| Personal Business Coach Hero Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Personal Fitness Coach Hero Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 01 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 01 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 01 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 01 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 02 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 02 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 02 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 03 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 03 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 03 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 03 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 03 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 04 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 04 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 04 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 04 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 05 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 05 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 05 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 05 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 06 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Pricing 3 Card Long | `stealth/space-bunny-alpha` | `—` | — |
| Spot Fill Button | `stealth/space-bunny-alpha` | `—` | — |
| Stacked Card | `stealth/space-bunny-alpha` | `—` | — |
| Stats and Metrics 01 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Stats & Metrics 01 Halo | `stealth/space-bunny-alpha` | `—` | — |
| Stats & Metrics 01 kelo | `stealth/space-bunny-alpha` | `—` | — |
| Stats Metrics 01 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Stats & Metrics 02 Halo | `stealth/space-bunny-alpha` | `—` | — |
| Stats & Metrics 02 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Stats & Metrics 02 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Stats Metrics 02 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Stats & Metrics 04 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Stats & Metrics 05 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Stats & Metrics o1 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Stats & Metrics Vendo | `stealth/space-bunny-alpha` | `—` | — |
| Swap Button | `stealth/space-bunny-alpha` | `—` | — |
| Swiss-style Card | `stealth/space-bunny-alpha` | `—` | — |
| Team 02 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Team 02 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Team 03 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Team 03 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Team Showcase | `stealth/space-bunny-alpha` | `—` | — |
| Team Talent | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 01 Blaze | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 01 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 01 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 01 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 01 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 02 Blaze | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 02 Halo | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 02 Kelo | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 02 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 02 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 02 Pixa | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 02 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 03 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 03 Moxo | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 03 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 03 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 04 Halo | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 04 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 04 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 04 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial 05 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial Masonry | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial Modern | `stealth/space-bunny-alpha` | `—` | — |
| Testimonial Video | `stealth/space-bunny-alpha` | `—` | — |
| Testimonials 01 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Testimonials 02 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Text to Video Generator Hero | `stealth/space-bunny-alpha` | `—` | — |
| Trusted Brand 2 Column | `stealth/space-bunny-alpha` | `—` | — |
| Trusted Brand Black | `stealth/space-bunny-alpha` | `—` | — |
| Trusted Brand Box | `stealth/space-bunny-alpha` | `—` | — |
| Trusted Brand | `stealth/space-bunny-alpha` | `—` | — |
| Video Generation Pricing | `stealth/space-bunny-alpha` | `—` | — |
| Why Choose us 01 Finsyc | `stealth/space-bunny-alpha` | `—` | — |
| Why Choose Us 01 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Why Choose Us 01 Orbit | `stealth/space-bunny-alpha` | `—` | — |
| Why Choose Us 01 Velara | `stealth/space-bunny-alpha` | `—` | — |
| Why Choose Us 02 Luma | `stealth/space-bunny-alpha` | `—` | — |
| Why us 01 Solra | `stealth/space-bunny-alpha` | `—` | — |
| Why us 03 Solra | `stealth/space-bunny-alpha` | `—` | — |
| ZiroBuild Hero | `stealth/space-bunny-alpha` | `—` | — |

#### Findings

##### Liquid Glass Voyage — `liquid-glass-voyage`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 6/10 · **tokens:** 15,225

> This is a recognizable implementation of the brief, but it lands as a clean generic glass hero rather than the requested cinematic liquid-light composition. The main visual failures are the flat backdrop, missing footer in the shown viewport, and several motion interactions implemented as simple shortcuts.

**Requirements confirmed met**

- Abyssal-specific copy is present for eyebrow, headline, paragraph and stats
- Header pill contains mark, wordmark, nav links, sign-in link and request-access button
- Display type uses Instrument Serif with italic second headline line
- Reusable .liquid-glass class includes the requested blur, saturation, inset shadow, isolation and masked 1.4px edge
- Canvas backdrop is procedural and uses multiple soft gradients plus a warm highlight
- DPR is capped and the canvas backing store is downscaled to 0.6x
- CSS grain, caustic-line overlay and bottom vignette are present
- Stats cards and one-shot animated counters are implemented

**Requirements not met**

- The visible composition at 1024x640 does not include the requested footer row
- The backdrop in the screenshot reads as a flat dark teal field, not a cinematic underwater light film with visible drifting pools
- Email confirmation does not morph or fade; it hard-swaps display states
- Pointer tilt is document-wide and globally applied, not scoped to pointer movement over the hero with panes tilting individually toward the pointer
- In-progress palette fade cancellation/restart is not implemented
- Specular sweep is started by a fixed timeout, not by the hero entering
- Header/nav/footer are not all inside main, contrary to the layout wording

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Footer is missing from the rendered viewport | Screenshot at 1024x640 ends at the stat cards; the "© 2026 Abyssal Research" row and social icons are not visible. In th |
| medium | Backdrop is visually too flat for the requested film of underwater light | Screenshot shows an almost uniform dark teal background with no discernible large cyan/blue radial light pools, warm pas |
| medium | Email capture confirmation is an abrupt content swap, not a morph/fade interaction | Submit handler uses `input.style.display = 'none'; btn.style.display = 'none'; success.style.display = 'flex';` and late |
| medium | Pointer tilt behavior is coupled incorrectly | Code listens on `document.addEventListener('pointermove', ...)` and writes global `--rotX` / `--rotY` on `document.docum |
| low | Palette cross-fade does not satisfy the requested cancellation behavior | Fade trigger is guarded by `&& !fadeActive`, so an active fade is never cancelled and restarted from current weights. |
| low | Specular sweep is not tied to actual hero entry | The page runs `setTimeout(() => { document.body.classList.add('hero-entered'); }, 100);` instead of detecting when the h |
| low | Header center navigation is only space-betweened, not truly centered | `header { justify-content: space-between; }` with unequal brand/action widths; in the screenshot the nav cluster sits le |
| low | Button hover scales the whole control instead of only lifting and boosting specular | `button.liquid-glass:hover, a.liquid-glass:hover { transform: translateY(-1px) scale(1.04); }`; the brief asked for a 1p |

##### Scroll Atlas — `scroll-atlas`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 6/10 · **tokens:** 13,068

> The page hits the broad structure and copy, but the hero composition is off: the globe is overblown and cropped until it stops reading as the requested object. Several brief-specific implementation details are also wrong, especially the crossfade timing, pin styling, and required typed-array technique.

**Requirements confirmed met**

- Fixed translucent blurred top bar with correct nav items and pill CTA
- Pinned full-viewport stage with canvas, stacked text beats, and right-side progress rail
- All four requested beat titles and body lines are present as real DOM text
- Canvas visual is procedurally drawn rather than image-based
- Closing section includes the requested h2 and ghost-style CTA
- Footer is arranged as three columns with a bottom copyright row
- Dark palette and serif display treatment broadly match the brief

**Requirements not met**

- Globe is not presented clearly as a readable rotating sphere in the shown composition
- Beat cross-fade window is not the requested 0.08 width
- Survey pins are not rendered as small filled circles with a 1.5px halo
- Precomputation does not use typed arrays as specified
- Display font is applied beyond h1/h2 despite the brief limiting it
- There is continuous pulsing UI animation in the stage chrome, which conflicts with the film-scrub-only motion direction
- Route connection logic can break when a predecessor pin is back-facing instead of consistently connecting each new pin to its predecessor

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | The main visual reads as an oversized clipped grid with a horizontal divider, not a clear globe of front-hemisphere arcs. | In the screenshot the circular form is so enlarged that only partial arcs are visible and a single straight purple line  |
| medium | Beat crossfade timing is wider than specified. | Code sets `const win = 0.08` but then uses `smoothstep(0, win*2, d)`, creating a 0.16-wide opacity/translate window inst |
| medium | Pin styling does not match the brief's small filled circles with a 1.5px halo. | Pins are drawn with three circles: `arc(..., 5.5)`, `arc(..., 3.2)` and `arc(..., 1.8)`, which produces a much larger ma |
| medium | Required typed-array precomputation technique is not implemented. | Sphere data is built into nested normal arrays via `pts.push([ ... ])`; no `Float32Array` or other typed arrays are used |
| low | The wordmark uses the display serif font even though the brief reserves it for h1/h2 only. | `.word{ font-family: var(--display); }` applies Instrument Serif to header and footer branding. |
| low | There is extra autonomous motion unrelated to scroll scrubbing. | `.stage__topright .pulse` runs `animation:pulse 1.8s ease-in-out infinite;` even though the brief says the page should f |
| medium | Route drawing can drop continuity instead of always connecting a pin to its predecessor. | Inside the pin loop, `if(q[2] > 0.02){ prevProj = null; continue; }` resets the predecessor whenever a pin is back-facin |

##### Magnetic Orbit — `magnetic-orbit`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 7/10 · **tokens:** 10,614

> Composition, copy, palette and structure match the brief closely, but the magnetic offset is sign-inverted so elements repel rather than attract the pointer, the cursor ring isn't scoped to the hero, and the Brand node visually collides with the CTA in the 1024x640 screenshot. Aesthetically it reads as a deliberate, premium studio page rather than a default AI template.

**Requirements confirmed met**

- Wordmark FIELD in header with correct tracking/weight
- Index, Contact, Book a call pill in header
- H1 copy 'Design that pulls back.' with second line dimmed
- Lede paragraph with correct copy and styling
- Primary CTA solid orange with rounded-full
- Ghost CTA with 1px translucent border
- Three orbit nodes with Motion/Systems/Brand labels
- Magnetic nodes drift on slow independent sine paths
- Marquee strip with MOTION · SYSTEMS · BRAND · ... repeated
- Footer with copyright and email
- Custom cursor dot and ring with lerp
- Two spotlights (warm + cold) with mix-blend-mode: screen
- Magnetism applied to CTA, nodes, and logo
- Critically-damped spring back on pointer leave
- Grid overlay with radial mask
- System fonts only, no external resources
- Touch fallback: static glow when no fine pointer
- Reduced motion respected

**Requirements not met**

- Cursor ring is sized at 40px but element has 40px width/height so 3.2x scale makes it 128px — does not match the 1px border thinning on interactive hover (border remains at calculated 1px only when explicitly set, not the 1.5→1 transition described)
- Magnetic offset direction: brief says 'translates toward the pointer' but code applies sign-inverted offset (multiplied by -1), pushing elements AWAY from the pointer
- Tilt direction looks reversed: code uses (-dy) for rotateX and (dx) for rotateY which tilts nodes away from pointer in a non-intuitive way, and clamp is ±10 but values can hit ±10 abruptly
- Spotlight translation subtracts 520/900 from coords (intended to center radial gradient on pointer) — this is correct only if radial gradient is centered at 50% 50%; the spot element is 1040×1040 with 520px gradient at center, so subtract 520 is correct, but spotCold is 1800×1800 with 900px gradient, so subtract 900 is correct — actually this is fine
- marqueeTrack: halfWidth measured only on first child span, and modulo uses that — but with two duplicated spans, after first wrap the visible content shifts; the implementation may not wrap seamlessly if the two spans have different measured widths (they should match but it's fragile)
- Cursor ring uses 'transform-origin: center' only via class but transform string also includes translate3d — the scale origin will be at the translated position's center which is correct
- Node hover detection via mouseenter/mouseleave sets --hs but never reads it; instead the rAF loop uses m.hovering which is set by pointerover delegation — there is a code path that sets both, indicating confusion
- The hero 'min-height: 100vh' plus large padding plus 3 absolutely positioned nodes plus orbit-stage with z-index means nodes can sit on top of or behind text depending on z-stacking — node-3 is at left:22% bottom:20% which is fine, but at smaller viewports the orbit-stage becomes static and nodes appear below the CTA — this is acceptable per brief for touch devices only, but the breakpoint is 900px which is mid-desktop
- Brief says custom cursor should be 'inside the hero' only; code applies it body-wide via body.fine-pointer class
- Eyebrow text 'A studio of three — everywhere at once' is present in code but not described in brief — extra content not required
- Brief specifies 'logo mark' should be data-magnetic — wordmark is data-magnetic but is text, not a mark

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | Magnetic elements move AWAY from pointer instead of toward it | if (d > 0.001){ ox += (dx / d) * s * -1; oy += (dy / d) * s * -1; } — the * -1 inverts the direction. Brief C explicitly |
| low | Ring border 'thinning' on interactive hover not implemented as described | var bw = magneticHover ? 1 : (interactiveHover ? 1 : 1.5); — border is 1px on BOTH magnetic and interactive, so the 1.5→ |
| low | Custom cursor not scoped to hero only | body.fine-pointer .hero{cursor:none} applies to hero, but cursor-dot/ring are fixed positioned and visible everywhere; b |
| medium | Node tilt direction appears reversed/intuitive-fail | tiltY = (dx / m.w) * 10; tiltX = (-dy / m.h) * 10; — when pointer is to the right of node, dx>0 so tiltY is positive (ro |
| medium | Orbit nodes break into 3-up grid at <=900px (tablet portrait and below) | @media (max-width:900px){ .orbit-stage{position:static; ... display:flex; ...} } — at 768px tablet width, nodes become s |
| low | Orbit-stage and hero-inner have overlapping z-index with nodes potentially rendering over text | orbit-stage z-index:4, hero-inner z-index:5, nodes absolutely positioned at left:9% top:22% etc. — at 1024x640 the node- |
| medium | Screenshot shows the page renders correctly overall but node-3 (Brand) overlaps the orange CTA button | node-3 {left:22%; bottom:20%} at 1024x640 puts the 72px node at approximately (225, 512) which visually overlaps the 'St |
| low | H1 has <br> instead of the two-line layout the brief implies | <h1>Design that<br><span class="dim">pulls back.</span></h1> — uses literal <br> rather than two block elements; visuall |
| low | Marquee uses 'padding-right:0' and a trailing &nbsp; in spans; seamless wrap depends on duplicated spans being identical — fragile but works | <span>MOTION · SYSTEMS · BRAND · INTERFACES · SOUND ·&nbsp;</span><span>...</span> |

##### Neural Drift — `neural-drift`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 8/10 · **tokens:** 12,520

> The field, motion choreography, and page structure faithfully implement nearly every specification in the brief with correct particle counts, spatial hashing, BFS-based pulses, and two-pass bloom. The only real deviation is an unrequested 'hub nodes' system that introduces 7 green-accented nodes from mid/far layers and amplifies certain edges, which is not part of the specified constellation metaphor.

**Requirements confirmed met**

- 3 depth layers with correct counts (90/55/26), radii, and alphas
- Spatial hash grid used for connections (O(n) neighbor scan via cell bucketing)
- Pointer repulsion with correct force formula and 0.06 lerp back to base velocity
- Signal pulses via BFS queue (no recursion), 4-7s interval, 400ms duration
- Two-pass bloom with offscreen canvas, globalAlpha 0.28, blur(6px)
- devicePixelRatio capped at 2
- Sticky blurred header with correct rgba and blur(14px)
- SVG glyph with three connected dots
- Correct nav items, Sign in, and Deploy pill
- Hero scrim for text legibility
- Eyebrow pill, h1 with correct clamp/font/letter-spacing, paragraph with max-width 540px
- Telemetry card with correct labels, aria-live=off, 1.4s update interval, 200ms count-up
- Features section with 3 cards, stroke-only SVG icons, 2px lift + #34d399/40 border on hover, 720px breakpoint
- Closing CTA band with correct h2 copy and one button
- Footer with four columns and bottom row with copyright and pulsing green dot status pill
- Correct palette and font usage (JetBrains Mono for telemetry only)
- Reduced motion renders field statically and disables telemetry ticking
- window.__DEMO__ telemetry hook with all required fields

**Requirements not met**

- Hub nodes are not the specified 'near-nodes'; pulses originate from random near-nodes but 7 hub nodes are drawn from indices 90-170 (mid+far), contradicting 'a random near-node' for pulse origin while also adding an unrequested 'hub-nodes' visual effect with amplified edges and green tinting

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Pulse spawning selects from NEAR array (correct), but an unrequested 'hubs' system creates 7 visually-distinct green nodes from indices 90+ (mid and far layers), which is not in the brief and visually deviates from the pure constellation metaphor | var picked = 0; while (picked < 7) { var c = 90 + ((Math.random() * (N - 90)) \| 0); ... hubs[c] = 1; } and drawNodes fi |
| low | Connection alpha formula multiplies by 1.9 for hub-hub pairs, an unrequested modification that overrides the brief's specified alpha formula | if (hubs[i] && hubs[j]) a *= 1.9; |
| low | Telemetry format for INGEST displays '41.2k/s' but the brief specified 'INGEST  41.2k/s' as the displayed string; the implementation splits label and value into separate spans losing the inline monospace figure format | <span class="t-label">INGEST</span><span class="t-value" id="tIngest">41.2k/s</span> |
| low | Reduced-motion path sets D.frames=1 but does not push 'signal-pulses' or 'pointer-repulsion' into effects array (effects are pushed conditionally before reduced check); the 'telemetry-ticker' effect is only pushed in the non-reduced branch which is correct, but the effects list naming is slightly inconsistent with the brief's described effects | if (!reduced) D.effects.push('pointer-repulsion', 'signal-pulses', 'telemetry-ticker'); |

##### Kinetic Type — `kinetic-type`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 7/10 · **tokens:** 12,540

> The page looks intentionally editorial and type-driven, but several concrete spec mismatches remain: the background stroke band is the wrong color, the header top rule is missing, the marquee wrap algorithm is off, and the footer copy is wrong. It feels premium at first glance, but a hostile review finds the brief was not followed to the letter.

**Requirements confirmed met**

- single valid HTML file
- header 3-part grid with logo, meta, actions
- hero h1 split into per-word w/wi spans
- three marquee bands present and driven by one rAF loop
- scroll-linked h1 scale and letter-spacing
- two-column hero content stacks below 720px
- index list with five numbered rows and CSS hover transforms
- subscribe form with inline success message
- footer masthead + link columns + bottom row structure
- light paper palette with Instrument Serif/Inter fonts
- prefers-reduced-motion safeguard

**Requirements not met**

- header hairline rule above the header
- band 2 white 1px text-stroke color
- marquee seamless wrap: duplicate twice + half-width modulo
- exact footer bottom copy
- hero paragraph size 15px/1.7
- split reveal cubic-bezier(.16,1,.3,1) easing

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Band 2 text-stroke is dark ink instead of the specified rgba(255,255,255,.13), making the 'PRINT IS NOT DEAD...' background band appear muddy or nearly invisible against the paper background instead of a subtle white outline. | CSS: `.band-2 span { -webkit-text-stroke: 1px rgba(20, 20, 15, 0.13); }` — brief requires `rgba(255,255,255,.13)`. |
| medium | Marquee seamless-wrap implementation does not follow the brief's algorithm: it duplicates content by a calculated multiplier rather than exactly twice, and wraps using single-text-width modulo instead of half the scroll width. | JS: `const multiplier = Math.max(3, ...);` and `offset = baseOffsets[idx] % singleWidth;` instead of duplicate twice and |
| low | Header lacks the required hairline rule above it; only a bottom border is present. | HTML: `<header class="border-bottom">` only; no `.border-top` or top border rule applied. |
| low | Footer bottom text does not match the brief: it reads '© 2026 OFFCUT Press — Rotterdam' and adds an extra 'Printed on FSC Certified 120gsm paper' line instead of '© 2026 OFFCUT Press — printed in Rotterdam'. | HTML: `<span>© 2026 OFFCUT Press — Rotterdam</span><span>Printed on FSC Certified 120gsm paper</span>`. |
| low | Hero paragraph font size is 16px, not the requested 15px. | CSS: `.hero-desc { font-size: 16px; line-height: 1.7; ... }`. |
| low | Split-text reveal easing is a quartic ease-out approximation, not the specified cubic-bezier(.16,1,.3,1). | JS: `const ease = 1 - Math.pow(1 - t, 4); // Quartic approximation of easeOut`. |

##### Stack Deck — `stack-deck`

**Verdict:** `confirmed` · **confidence:** high · **aesthetic score:** 8/10 · **tokens:** 15,334

> The screenshot's hero is clean and premium — strong clamp type, correct serif italic second line, tidy header — and the code faithfully implements the stacking, dimming, smoothstep deal, and counter choreography. It is docked for a no-IntersectionObserver path that renders an invisible deck instead of the final bento, and a dealt-state bottom row that gets clipped on short viewports.

**Requirements confirmed met**

- 500vh deck-wrap with sticky 100vh stage and perspective: 1400px
- five 460x300 glass cards (rgba white fill, .09 border, 18px radius, blur(10px), 40px shadow) with hue hairline, 01-05 index, h3, two copy lines, and five distinct stroke-only SVGs (pipeline, branch, gauge, timeline, shield) in the specified hue order
- arrival window [i*0.16, i*0.16+0.16] driving translateY(60vh)->-i*14px, scale .92->1-i*.012, rotateX 18->0, opacity 0->1
- brightness drops 5% per card stacked on landed cards
- smoothstep deal between p=.82 and 1.0 into a 3+2 bento with 2deg alternating rotateZ
- 1 / 5 readout pinned to stage bottom tracking the most recently landed card
- four stat counters animating 0->target with easeOutExpo over 1.8s, toLocaleString separators, s/% in separate spans
- sticky blurred header with anchor glyph, exact nav labels, Sign in + solid #6366f1 Start free
- hero clamp(2.5rem,7vw,5.2rem) weight 650 -0.03em h1 with muted Instrument Serif italic second line, 560px paragraph, both buttons
- CTA band h2 and one button; footer with wordmark, description, three link columns, (c) 2026 Harbour Labs, green-dot status pill
- resize debounce 150ms + orientationchange rect recompute; reduced-motion collapses deck and jumps counters
- copy is real, specific, and on-theme throughout

**Requirements not met**

- IntersectionObserver-unavailable guard does not render the deck in final state: it calls renderDeck() once with wrapTop=0/travel=1, giving p=0 and all cards at opacity 0 (invisible), not the dealt bento the brief demands

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Bento bottom row overflows short viewports: finalY=230 for cards 04/05 but deck height is min(620px,72vh), so at 640px-tall stages the dealt cards extend ~60px past the stage bottom and are clipped by overflow:hidden (diagrams and card bottoms cut off, readout overlaps) | var finalY=[-92,-92,-92,230,230]; .deck{height:min(620px,72vh)}; .deck-stage{...;overflow:hidden} |
| medium | No-IO fallback leaves deck invisible instead of final state | if(!('IntersectionObserver' in window)\|\|reduce){setCountsFinal();renderDeck();...;return} — renderDeck computes p from |
| low | Brightness dimming persists after the deal even though cards are no longer stacked (card 01 sits at 0.80 in the final bento), leaving the grid permanently uneven | var stacked=Math.max(0,landed-1-i), bright=1-stacked*.05 — no reset when deal>0 |
| low | Muted ink deviates from the stated palette: --muted is rgba(237,238,244,.68) while brief specifies .58 (--soft is defined at .58 but barely used) | --muted:rgba(237,238,244,.68) |
| low | Card fill is a linear-gradient (.07 -> .035) rather than the specified flat rgba(255,255,255,.045) | .card{background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035))} |

##### Aurora Freight — `aurora-freight`

**Verdict:** `confirmed` · **confidence:** high · **aesthetic score:** 8/10 · **tokens:** 27,033

> A faithful, end-to-end implementation of the Aurora Freight brief — copy is exact, tokens, breakpoints, layer stack, sprite/aurora math, palette cross-fade, amber sweep, grain, entrance stagger, mobile menu, reduced-motion and __DEMO__ telemetry are all correctly wired and the screenshot is free of clipping or mis-positioned elements. The aurora field is on the quiet end at 1024x640 because the spec deliberately caps luminance; nothing in the rendering is broken.

**Requirements confirmed met**

- document title exactly 'Aurora Freight — Freight Intelligence, Orchestrated'
- lang='en' on html
- pure black ground (body inline + html,body !important)
- fixed canvas #aurora with required CSS (z:0, pointer-events:none, #000 background)
- DPR capped at 2, SCALE 0.5, 2,600,000 device-pixel clamp implemented
- 18 pre-rendered radial sprite canvases (256x256, 5-stop gradient)
- screen composite mode, hard-black ground each frame
- 5 Lissajous bands + amber sweep band 5 with 30s cycle, easeInOutSine envelope
- palette cross-fade every 20s with cancellation snapshot rule (B.6)
- dt clamp at 0.05, ~60fps draw budget (15.5ms), visibilitychange handling
- SVG feTurbulence grain at 4% with 6-step drift animation (compositor-only)
- scrim: fixed, z:1, pointer-events:none, correct radial + linear gradient stops
- layer stack z-indices (0/1/2/90/100) match spec
- all required CSS tokens declared on :root at default values
- header with inline SVG brand-mark (3-arc path + 2.2r amber circle + linearGradient markGrad)
- four pills in exact order Platform/Network/Pricing/Docs + Request access ghost
- burger 40x40 with 3x 1x16 white bars, aria-label/expanded/controls
- hero bottom-anchored via align-items:flex-end, padding per spec
- two-line masked h1 with em 'freight' in italic Instrument Serif, color --muted
- lede copy exact, max-width var(--lede-max)
- two hero CTAs: btn-solid 'Request access' and btn-line 'Watch the 2-min tour'
- footer stats with exactly three li items, tabular-nums on b
- mobile menu overlay z:90 with backdrop-filter blur+saturate, link/Escape/resize close
- anti-flash rules in correct order at top of stylesheet
- .appear resting state opacity:1, .is-in settlement, two-rAF fallback implemented
- all 7 entrance keyframes defined with correct end states
- stagger table matches element-to-animation-to-delay mapping
- lede override animation-duration:1.25s applied
- all 8 responsive breakpoints present and ordered (1600/1920/1280-1599/901-1279/<=850/<=720/<=900/<=560)
- desktop lock (>=901px) sets html/body height:100% overflow:hidden and .page 100dvh overflow:hidden
- <=900px disables desktop lock, hides nav-desktop, shows burger
- prefers-reduced-motion media query with full overrides + canvas still frames-counter
- window.__DEMO__ telemetry (ready/frames/effects/errors/name) implemented
- window.error handler pushes to D.errors
- no console.log, no third-party JS, no remote media, only Google Fonts request

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| low | Aurora field reads as very subdued in the 1024x640 screenshot — only a faint right-edge glow is visible | Spec deliberately caps luminance <0.78 to protect readability (B.5 note) and uses peak alphas 0.28–0.62, so this is by d |
| low | Anti-flash rules list order differs from brief ordering — brief specifies inline body style as item 2 between two html,body rules, generated file only has two html,body rules + body attribute (acceptable collapse) | CSS lines 41–42 ('html, body { background:#000000 !important; color:#ffffff; }' then 'html, body { background:#000000; b |

##### Basalt — `basalt`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 6/10 · **tokens:** 34,229

> It mostly looks like the specified landing page, but the field is built only with JavaScript, the startup and interpolation logic deviate from the brief, and the layer stack is nested rather than flat. Premium feel is undermined by these reliability and precision gaps.

**Requirements confirmed met**

- Single valid index.html with standalone HTML/CSS/JS
- Semantic landmarks: header, nav with aria-label, main, footer
- Exactly one h1 with required text content
- Document language and title present
- Custom properties defined on :root and used throughout
- Backdrop radial/linear gradients implemented
- Grain layer present with pointer-events none
- SVG field generated in JS with 60 columns and 180 face paths
- Flat-top hex geometry, depth formula, and skewX(-6deg) applied
- Light sweep element, animation keyframes, and timing values
- Header, hero copy, buttons, readout, and footer content match the brief
- Button states and focus-visible outline implemented
- Named keyframes and entrance animation delays applied
- Responsive overrides for 1920, 1440, 901-1439, 768-900, 390-767, and short heights
- Reduced-motion static state supported
- Telemetry object and error listener implemented

**Requirements not met**

- Page readable with JavaScript disabled (field is empty without JS)
- Exact two-rAF startup fallback with 50 ms setTimeout
- Error fallback that restores face fills to cached values
- Global layer stack with z-index values as direct siblings
- Per-frame fractional interpolation between light-angle samples
- Cached depth opacity lookup values (.42/.68/.92)
- Haze implemented as CSS pseudo-elements
- Exact document title punctuation

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | SVG field is empty in the HTML; it is drawn entirely by JavaScript, so the page fails the brief's no-JS readability requirement. | <svg id="field" viewBox="0 0 1600 1000" ...></svg> contains no static content. |
| medium | The animation loop only recomputes face fills when the sample index changes, not each frame with fractional interpolation. | render() wraps applySample() inside `if (current !== lastIndex)`. |
| medium | The two-rAF fallback is not implemented as specified; the 50 ms setTimeout path is missing and the fallback check `if (!second)` is invalid because requestAnimationFrame always returns a positive ID. | const second = requestAnimationFrame(() => { ... }); if (!second) { ... } |
| medium | The error catch block stops the loop but never resets face fills to cached fallback values. | catch block only pushes `error.message` and returns. |
| medium | The backdrop layer stack is nested inside .backdrop instead of direct siblings, so the specified global z-index ordering is not literally applied. | <div class="backdrop"> contains .backdrop-gradient, .grain, #field, .haze-far, .haze-near, .light-sweep, .vignette. |
| low | Column opacity is computed by linear row interpolation rather than the specified rear/middle/front lookup. | const opacity = .42 + (row / 8) * .50; |
| low | Haze is implemented as real <div> elements, not CSS pseudo-elements as described. | <div class="haze-far"></div><div class="haze-near"></div> |
| low | Document title has an extra trailing period compared to the brief. | <title>Basalt — Geothermal Energy From Deep Ground.</title> |
| low | Top face geometry uses a six-vertex trigonometric hex, not the brief's x±46, y+23 / x, y−39 construction. | const hex = radius => Array.from({length:6}, (_, i) => { const angle = Math.PI * i / 3; ... }); |
| low | Grain background adds extra stops and a fixed background-size that differ from the specified repeating-radial-gradient. | repeating-radial-gradient(...) includes .34px, 1px, transparent 1px, transparent 7px with background-size: 7px 7px. |
| low | No fill-rule="evenodd" is applied to the face paths despite the brief's instruction. | make() sets class and d but not fill-rule. |

##### Bracket — `bracket`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 6/10 · **tokens:** 32,956

> Most of the requested document-like composition is present, but the rendered page omits the row-03 bracket annotation, duplicates annotation dots, and misplaces the red strikethrough. These deviations make the output look like an incomplete implementation rather than a faithful build.

**Requirements confirmed met**

- Single-file document structure with one nav, header, main, footer and single h1
- Exact title, lang, charset, and viewport declaration
- Five-layer backdrop, guide lines, cross-paper texture, and margin notes
- Navigation copy and 1fr auto 1fr layout
- Hero eyebrow, h1, span#useful-word, and two-column hero grid copy
- Workflow row copy and annotation of row 03 only
- Evidence band testimonial and index copy
- Footer copy, layout, and visible border
- IBM Plex Mono with preconnect and system fallback
- Visible #C2452D 2px/3px focus-visible outline
- Responsive breakpoints and no horizontal overflow
- window.__DEMO__ telemetry, error handlers, and live rAF loop
- prefers-reduced-motion static fallback

**Requirements not met**

- Bracket annotation visible in final render
- Correct annotation dot geometry (eight total: four corner + four midpoint)
- Red strikethrough positioned 4px below h1 top
- Red-line animation driven solely by rAF --strike-progress
- .sr-only utility layer in z-index contract

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | Row 03 bracket annotation is not visible in the rendered screenshot | No bracket overlay appears around the heading 'Leave a trail your future self can follow.', which is the only element th |
| medium | Annotation SVG contains duplicate midpoint circles | The SVG defines four corner circles plus eight r=3 midpoint-positioned circles, with the last four duplicating the coord |
| medium | Red strikethrough is vertically misplaced | syncStrike sets strikeTop = usefulBounds.height * 0.52 instead of 4 px below the h1's top. |
| medium | Red-line animation is driven by CSS keyframes rather than the rAF custom property | .motion-ready .strike-line { animation: correction-strike ... } overrides the transform: scaleX(var(--strike-progress))  |
| low | Missing .sr-only utility layer from the z-index contract | No .sr-only rule is present in the stylesheet. |

##### Cadence — `cadence`

**Verdict:** `confirmed` · **confidence:** high · **aesthetic score:** 8/10 · **tokens:** 24,202

> The page renders as the brief's room-sized metronome scene with correct geometry, palette, copy and choreography, and nothing in the screenshot is broken, clipped or misplaced. Residual gaps are minor: the beat-dot decay is CSS-driven rather than JS-driven, and the mandated pivot position crowds the center nav link slightly.

**Requirements confirmed met**

- Composition matches brief: header / bottom-anchored hero / right-side meter / 3-stat footer at one frame
- Copy is exact: chip, h1 two masked lines with mono accent 'beat', lead paragraph, stat pairs all verbatim
- Beat clock constants correct (96 BPM, 0.625s beat, 1.25s swing, theta = A*cos(2*pi*t/1.25), downbeat at right extreme)
- Canvas geometry tiers, pitch, weight sizes and amplitude breakpoints implemented per section B
- Grid alpha formula, 6-bucket batching, measure-line accent override present
- 4 pre-allocated ring slots, born/down on new beatIndex, r = 14 + 300a, pow(1.7) decay, downbeat 1.4x heavier
- Pendulum details present: ghost trails at 4 offsets, 3px rod, rotated rounded weight with groove, pivot cap layers, accent tip, 11-tick scale arc with accent extremes
- Token table, breakpoint overrides, and desktop viewport lock implemented as specified
- Entrance stagger table with per-element --d delays and all seven named keyframes; resting state = final state
- Failure guards: black-first CSS, two-rAF getAnimations fallback, no-canvas static stage, reduced-motion frozen frame at t=0.22
- dpr cap of 2, single getBoundingClientRect in resize, rAF-queued resize, no ctx.filter/shadowBlur, no in-loop allocation
- Telemetry hook exact shape with five effects pushed in order

**Requirements not met**

- Beat-dot decay is done via CSS animation classes (is-a/is-b) instead of JS writing opacity 1 -> 0.25 each beat as briefed
- Mobile menu wraps the 4 links in a nested <nav> rather than direct flex children, a structural deviation from the specified .menu layout

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| low | Pivot sits inside the header band and the housing circle visually collides with the 'Rigs' nav link | P = (w*0.5, h*0.075) is mandated, so the r=22 housing circle and rings render behind the centered nav at 1024x640; nav t |
| low | Beat-dot opacity decay driven by CSS keyframes, not the JS opacity writes the brief specifies | updateBeat sets style.opacity='1' then toggles .is-a/.is-b classes with dot-tick keyframes; brief: 'opacity written per  |

##### Camber — `camber`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 5/10 · **tokens:** 20,332

> The structural composition, copy, and motion spec are faithfully implemented, but the rendered screenshot is missing the entire second headline line 'held in balance.', which is the page's primary statement and gut-punches the design. Until that line renders reliably, the page reads as an unfinished hero with a floating CTA.

**Requirements confirmed met**

- exact specified copy throughout (wordmark, eyebrow, nav, button, proof, footer)
- header/nav/rule structure with Contact divider matches brief
- balance rail right-aligned to h1 bottom edge with specified figures
- conic orbit backdrop and paper grain canvas present behind page
- single pill CTA with specified gradient and hover/active states
- footer three-column grid with centre-centred copy
- staggered entrance animation timings and named keyframes present
- no second CTA, hamburger, or extraneous controls

**Requirements not met**

- second h1 line 'held in balance.' not visible in the rendered screenshot
- last balance row uses an empty <dd></dd> with 'London · Geneva · Singapore' as a dt
- drawGrain omits the specified rgba(239,237,232,0) fill of the 192x192 working canvas
- reduced-motion selector .line.two does not match the actual .line-two class names

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | The second headline line 'held in balance.' is entirely absent from the rendered page; only the graphite 'Holdings,' line is visible above the CTA, leaving a large blank band where the primary ink headline should sit. | Screenshot: only 'Holdings,' renders; no second line below it despite h1 containing span.line.line-two with the gradient |
| low | Empty dd element after final dt leaves an invalid/empty definition row in the balance rail. | <dt>London · Geneva · Singapore</dt><dd></dd> |
| low | Reduced-motion rule for the sweep uses selector .line.two which matches nothing (elements use .line-two), so background-position:50% 0 is never applied under reduced motion. | CSS: `.line.two { background-position: 50% 0 !important; }` vs HTML `class="line line-two"` |
| low | drawGrain deviates from the exact JS: no fill of the 192x192 working canvas with rgba(239,237,232,0) after clearRect, and an extra initial drawGrain() call was added in startAndReady. | drawGrain() only calls context.clearRect then four drawImage calls |

##### Cant — `cant`

**Verdict:** `unparsed` · **confidence:** low · **aesthetic score:** —/10 · **tokens:** 36,630

> 

##### Carbon — `carbon`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 6/10 · **tokens:** 23,679

> The page implements the brief's token system, backdrop layers, motion choreography, and copy faithfully, but the hero h1 rendering is broken at the 1024px viewport — the wordmark is severely clipped showing only a fragment, and the footer is not visible. The main landmark also has the wrong id (top instead of process), and the grid template deviates from the literal spec. Visually premium in concept but the screenshot reveals a critical layout failure at this resolution.

**Requirements confirmed met**

- Document title and lang attribute exact
- Single h1 present with exact copy CARBON
- Token table complete with all specified values
- Backdrop weave uses exact specified gradients with correct offsets
- Blue seam at 63% with correct linear-gradient and animation
- Backdrop light veil with correct mask-image (both webkit and standard)
- Grain layer uses 4px conic-gradient with correct opacity
- Header three-column grid with brand/nav/action
- Footer three-column grid with exact copy
- Edge-index with vertical-rl writing mode and correct copy
- Hero seam label with exact copy and correct positioning
- Primary action button with arrow glyph in aria-hidden span
- Secondary link beside primary
- Reduced motion media query stops all animations and sets static states
- Telemetry script matches brief with frames counter and error listener
- No external resources, no canvas, no images
- Motion choreography matches specified durations and delays
- Named keyframes (reveal-up, reveal-title, reveal-rule, lightSweep, seamPulse, grainShift) implemented correctly

**Requirements not met**

- Main element has id="top" instead of id="process" as explicitly required
- Grid template uses minmax(0, var(--hero-width)) instead of literal 1fr 1120px 1fr
- h1 rendering appears severely clipped at 1024px viewport showing only partial text
- Footer is not visible in the 1024x640 screenshot, likely clipped by overflow
- Unspecified .wordmark-viewport and .wordmark-form wrapper elements added without brief authorization

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | h1 wordmark severely clipped at 1024x640 viewport, only 'ON' or last portion visible at left edge instead of full 'CARBON' centered in hero | Screenshot shows large white letters 'ON' at left edge of viewport with 'CARB' missing; .wordmark-form width:max-content |
| medium | Footer not visible in 1024x640 screenshot | Screenshot shows only backdrop, header, partial hero, and seam-label; no footer strip at bottom edge |
| medium | Main landmark has id='top' but brief explicitly states 'Give main id=process' | <main class="hero" id="top"> vs brief: 'Give main id="process". Put id="contact" on the primary action wrapper' |
| low | Hero grid template deviates from brief literal specification | Generated: grid-template-columns: minmax(0, 1fr) minmax(0, var(--hero-width)) minmax(0, 1fr); Brief: grid-template-colum |
| low | Unspecified wordmark wrapper elements add rendering risk | .wordmark-viewport and .wordmark-form classes are not mentioned in the brief but are inserted around the h1 text |
| low | backdrop-base lacks explicit z-index: 1 while its pseudo-elements have z-index: 1 | .backdrop-base has no z-index property; .backdrop-base::before and ::after have z-index: 1 |
| low | primary-action transition only covers transform, not background/box-shadow specified in brief hover state | CSS: transition: transform var(--motion-fast) var(--ease-out); on .primary-action |

##### Cardinal — `cardinal`

**Verdict:** `confirmed` · **confidence:** high · **aesthetic score:** 7/10 · **tokens:** 16,330

> The build is a near-verbatim transcription of the brief — tokens, layer stack, stagger table, keyframes and the spring-needle loop are all present and correct, and nothing in the screenshot is clipped, mis-sized or misplaced. It reads as a competent, restrained dark instrument page rather than a default AI template, though the centred H1 burying the E/W bearings makes the rose decorative instead of functional.

**Requirements confirmed met**

- Layer stack z0 bg-glow / z1 #rings / z2 #rose-container / z3 header / z4 .hero / z5 footer all present and ordered correctly
- 72 ticks generated at 5° intervals with cardinal/ordinal/minor length and stroke-width differentiation, rOuter 48
- 4 cardinal labels N/E/S/W at r=42, fill var(--text-main), font-size 4, mono family
- 3 magnetic rings r=30/40/50, fill none, stroke var(--accent) 0.3 units, pulse-ring 4s/5s/6s with 0/1.3/2.6s delays
- Ring container drift animation: translate(-50%,-50%) rotate(360deg) over 180s linear infinite
- Exact radial glow: circle at 50% 50%, rgba(248,113,113,0.08) 0% -> rgba(5,5,5,1) 60% on a full-viewport pseudo-element at z-index 0
- Header grid 1fr auto, CARDINAL with 0.5em letter-spacing, nav with TECHNOLOGY/FLEET/CONTACT in mono uppercase
- Hero absolute 50%/50% translate(-50%,-50%), single h1 'NAVIGATE WITH ABSOLUTE CERTAINTY' + #readout 'BRG 000°' in accent mono
- Footer grid 1fr auto with STATUS: ONLINE, 8px blinking accent dot, and pill button group
- Stagger table honoured exactly: header fade-down 0.6s/0.1s, h1 fade-up 0.8s/0.2s, readout fade-up 0.8s/0.4s, footer fade-up 0.6s/0.6s
- All six named keyframes (pulse-ring, drift, fade-in, fade-up, fade-down, blink) present with brief-specified values
- Spring needle JS verbatim from brief: stiffness 0.08, damping 0.85, shortest-path diff normalization, 2 DOM writes per frame
- Reduced-motion guard in CSS and JS (bearing pinned to 45°, no rAF, no setInterval)
- Responsive table reproduced at 900/768/390px and 700/500px height breakpoints with matching token overrides
- Focus-visible 2px accent outline with 2px offset on all interactive elements

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| low | Compass rose is visually subordinated: the h1 sits dead-centre over the dial and completely hides the E and W cardinal labels | Screenshot shows 'NAVIGATE WITH ABSOLUTE CERTAINTY' covering the rose centre; only N and S labels are legible. This is t |
| low | Nav anchors point at unrelated landmark IDs that are not navigation destinations | <a href="#technology"> resolves to <main id="technology">, #fleet to the button group, #contact to <footer>. Clicking 'F |
| low | Three declared design tokens are dead code; tick and needle geometry is hardcoded instead | --tick-length-cardinal/ordinal/minor and --needle-length are declared in :root but never referenced; JS hardcodes 2.5/1. |

##### Cascade — `cascade`

**Verdict:** `confirmed` · **confidence:** high · **aesthetic score:** 7/10 · **tokens:** 22,570

> The rendered page matches the brief's composition: restrained observability aesthetic, exact copy, left-anchored hero over a veiled 14-stream waterfall, correct chrome and footer. Main defects are a doubled scan-line implementation and a legend whose legibility drowns against the brightest token columns.

**Requirements confirmed met**

- 14-column token waterfall rendered behind UI with dark base gradient
- Hero copy block on left with exact eyebrow, h1 CASCADE, statement, lede, buttons, proof row
- Header with brand lockup, three nav links, Request access pill
- Footer with exact left copy, centered ALL SYSTEMS OBSERVABLE status, copyright
- Signal legend TRACE/BATCH/HOT ROW positioned bottom-right with correct dots
- Hot rows rendered green with 76x14 wash visible in the field
- Content veil, vignette, and layer stacking present; hero text sits on controlled dark veil
- Token heads are short horizontal segments (56-86% column width), not full-width lines or Matrix rain
- Two horizontal rules and restrained palette; no neon field, no glow overload
- Staggered entrance keyframes (fade-up/fade-down/fade-in) with the specified durations and delays

**Requirements not met**

- Single scan line implementation: both a CSS .scan-runner (scan-sweep) and a JS-drawn scan sprite exist, producing two independently timed sweeps
- Brief's token table is extended with non-specified variables (--header-bg-top, --vignette-edge, etc.) and header/footer/vignette use colors not routed through the mandated gradient tokens

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Duplicate scan line: CSS-animated div and canvas-drawn scan sweep run simultaneously with different clocks, so two scan lines can be visible at once instead of one | .scan-runner{animation:scan-sweep 5900ms linear infinite} plus frame(){ctx.drawImage(scanSprite, x, 0, 2, scaleY)} |
| low | Signal legend text sits over the brightest token columns and its small grey mono labels have poor contrast against the dense white token field | legend at right:100px bottom:24px renders as tiny dim text over the right-side comb of tokens in the screenshot |
| low | Rightmost canvas region shows a dead gap: columns are squeezed by the 0.82 field factor, leaving the far-right edge emptier than the composition implies | columnX uses fieldWidth * 0.82 * (0.045 + i * 0.0825) |
| low | Hot-row uniqueness per column not guaranteed by the ordinal scheme; several columns show clusters of green rows while the spec says exactly one hot row visible per column | plan.hot = ordinal % 29 === 0 with ordinal = columnIndex * 29 + residue |

##### Chrome Bloom — `chrome-bloom`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 5/10 · **tokens:** 20,679

> The structure and copy are largely faithful, but the screenshot fails the central visual promise: the supposed liquid chrome renders as an uncontrolled neon blob and the wordmark lacks a convincing chrome finish. Several implementation details also violate the specified motion and fallback behavior.

**Requirements confirmed met**

- Desktop composition uses the required header, centered hero, and three-part footer within one viewport
- Header contains the Bloom brand, exactly three primary nav links, and the Start a project CTA
- Hero copy matches the specified eyebrow, h1, and lede exactly
- Footer copy and three social links match the brief
- Six orb elements, radial chrome gradients, compositing filter, grain SVG, conic text sheen, and hue-drift keyframes are present
- Entrance animations use the requested named keyframes, stagger delays, and easing
- Mobile overlay menu structure and breakpoint behavior are implemented

**Requirements not met**

- The six orbs do not have their required base x/y offsets in CSS; those offsets exist only in JavaScript
- The page adds an unrequested continuously pulsing footer status dot animation
- The rendered bloom does not read as a single premium liquid-chrome mass; it reads as a brightly colored neon blob
- The rendered wordmark is visually flat beige/gold rather than convincingly chrome-sheened
- Mobile orb sizes at <=560px differ from the specified responsive table, using 32/28/24/20/16/14% instead of 36/30/26/22/18/16%
- The hue-drift keyframes hard-code desktop blur and contrast values, overriding the specified mobile filter values during animation

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | The central bloom is visibly wrong for the requested liquid-metal aesthetic: it shows saturated yellow, red, and white neon regions rather than a unified warm chrome metaball surface. | Screenshot: the bloom behind the heading is a high-saturation yellow/red/white shape with separate visually distinct zon |
| medium | The bloom overwhelms and competes with the hero text instead of supporting it. | Screenshot: the brightest white and red bloom sits directly behind the eyebrow and h1, reducing the expensive, controlle |
| medium | Orb fallback positioning is not implemented in CSS as required. | The .orb rules set left:50% and top:50% but no base x/y transforms; the only offsets are computed in JS as baseXPct/base |
| medium | An extra animated effect violates the stated motion restriction. | The footer dot uses animation: pulse 2.4s ease-in-out infinite, while the brief permits the chrome bloom motion and grai |
| low | The hue animation defeats the mobile filter tuning. | @keyframes hue-drift always uses filter: blur(28px) contrast(18), including on mobile where the brief requires 22/16 or  |

##### Data Tide — `data-tide`

**Verdict:** `confirmed` · **confidence:** high · **aesthetic score:** 8/10 · **tokens:** 26,792

> The implementation is a near-literal transcription of the brief: seeded field math, envelope, stagger table, glass border mask, ticker recurrence, and breakpoint token overrides all match line-for-line. Only trivial deviations exist (resize redraw gating, overeager menu close handlers), and the visual composition cannot be independently confirmed since no screenshot was actually evaluated.

**Requirements confirmed met**

- Single self-contained index.html, correct title and lang, Google Fonts as only network request
- Full token table on :root with all specified values
- Seeded mulberry32(20260114), 40 ribbon records, 12 rnd() calls in exact order, pre-built stroke strings
- DPR cap at 2 plus 3.4M pixel clamp, setTransform to CSS px, 150ms debounced resize + orientationchange
- Surge envelope: 6.0s period, Gaussian sigma 0.085W, env 0.30 + 2.30g, two-pass stroke with teal hot highlight and clamped window
- Deterministic 48-sample prefill from the same rnd() stream; ticker every 1200ms with exact delta/sub formulas and sparkline geometry (x=j*480/47, y=50-clamp*44)
- Glass panel: mask-composite 1px gradient border, ::after sheen, backdrop-filter, three-node wrap/float/glass transform separation
- Stagger table matches exactly (in-scale/in-soft alternation on pills, in-pop badge, in-mask h1 lines, 1.25s lede, 1.15s panel, in-stat footer)
- Desktop lock at >=901px (height:100%, overflow:hidden) plus max-height token overrides; scrolling permitted only <=900px
- Mobile menu at z-index:90 with Escape, link-click, and >=901px-resize close; aria-expanded flips
- Reduced-motion: static frame at cx=0.5W, animations killed, ticker/sparkline continue, rAF only counts frames
- Effects list pushed in required order with conditional panel-tilt and tide-canvas-fallback substitution
- Zero console output, no forbidden libraries/CDNs, damped tilt clamped at 2deg gated on hover:fine and !reduce

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| low | resize() only redraws immediately under reduced-motion; in normal mode a resize leaves the field stale until the next throttled rAF tick (up to 15.5ms) — brief section 8 says resize should 'draw(reduce) once' unconditionally | scheduleResize(): 'sizeCanvas(); if (reduce) draw(true);' — draw omitted when not reduce |
| low | Escape keydown always calls closeMenu even when the menu is already closed, and resize listener closes menu at >=901px on every resize event rather than only on transition — harmless but sloppier than specified behavior implies | document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeMenu(); }) |
| low | Screenshot could not be visually inspected (no image input available), so rendered composition, scrim coverage, and ribbon rendering could only be verified from code | review performed on source only |

##### Echo — `echo`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 8/10 · **tokens:** 36,641

> A highly faithful implementation that nails the sonar scope, motion choreography, copy, and token system — the missing 901–1279px breakpoint is the one concrete gap, causing a wider copy column and larger padding at common laptop widths. Premium look with one structural omission.

**Requirements confirmed met**

- Full sonar canvas: graticule blit, 4 ping rings with pk^0.82 exponent, 8 trail buckets, leading edge + tip dot, contact glow+core, edge fade, vignette
- Graticule: 6 range rings, 36 bearing ticks (major every 30°), 4 labels at R+26px, offscreen canvas blitted once per frame
- 30 contacts via mulberry32 seed 20260214, wrap-aware ignition, 2.6s decay, 64×64 glow sprite + core circle
- Grain element with inline SVG feTurbulence data-URI, 0.9s steps(4), correct jitter translates
- Layer stack z-indices correct: canvas 0, scrim 1, page 2, grain 5
- Token table :root defaults match exactly
- Header composition: brand SVG, blinking cursor, 3 nav links with marker on platform, CTA
- Hero: chip, h1 with em on Sound, lead, two buttons, readout with accent values and opt span
- Footer: copyright, beacon with 7px marker, exactly 3 links
- Button styles: primary gradient, ghost, sm, active/focus-visible
- Motion stagger table: all 15 elements with correct modifiers and delays
- Named keyframes: in-fade, in-soft, in-mask, in-chip, in-pop, in-read, blink, pulse, grain
- Copy text is exact and specific throughout (no filler)
- Reduced motion: frozen frame at bearing 042°, pk=[0.18,0.42,0.66,0.90], life=0.55, frames=1
- Canvas fallback: .no-canvas class + repeating-radial-gradient
- Entrance fallback: two nested rAFs then .is-in sweep
- Mobile menu: burger, overlay, Escape/link/resize close handlers
- Telemetry hook exact shape; effects pushed in specified order
- DPR caps: 2 desktop, 1.5 mobile; setTransform applied
- Per-frame budget ≤78 primitives; zero ctx.filter/shadowBlur
- Responsive overrides present for >=1600, >=1920, 1280-1599, max-height 850/720, <=900, <=560
- Contact count scales: 30/22/16 at correct breakpoints
- Graticule labels drop to 000/180 only at <=560px

**Requirements not met**

- 901–1279px breakpoint token overrides entirely absent — no @media (min-width:901px) and (max-width:1279px) rule exists
- Menu adds visibility:hidden and a visibility transition not specified in the brief

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Missing 901–1279px breakpoint: at 1024px width, --copy-max stays 560px (should be 460px), --header-x/--hero-x stay 40px (should be 32px), --nav-h stays 38px (should be 34px). Copy column extends ~140px further into the scope area than designed. | No @media (min-width:901px) and (max-width:1279px) block in CSS; brief table specifies --h1:48px --nav-h:34px --header-x |
| low | Menu panel uses visibility:hidden with a visibility transition delay not in the brief, which slightly alters the specified transition property list | transition:transform 0.45s var(--ease-out), visibility 0s 0.45s — brief specifies only transition: transform 0.45s var(- |

##### Filament — `filament`

**Verdict:** `unparsed` · **confidence:** low · **aesthetic score:** —/10 · **tokens:** 0

> 

##### Fringe — `fringe`

**Verdict:** `unparsed` · **confidence:** low · **aesthetic score:** —/10 · **tokens:** 0

> 

##### Grid Collapse — `grid-collapse`

**Verdict:** `confirmed` · **confidence:** high · **aesthetic score:** 7/10 · **tokens:** 22,522

> The page renders exactly as briefed: black terminal frame, converging accent grid at cy=42%, correctly staggered terminal-chip header and masked hero, with the exact required copy and no layout breakage in the 1024x640 capture. Only real deviations are reduced-motion details (the rAF loop halts, and the mobile overlay menu degrades to a static block under the footer), none of which affect the default desktop composition.

**Requirements confirmed met**

- Single self-contained index.html, no frameworks, no external media (SVG data-URI grain only)
- Layer stack correct: canvas z0, scrim z1, .page z2, .scanline z3, .grain z4
- Header composition: chevron brand + blinking _ cursor, 4 ./-prefixed nav links, accent chip CTA '$ npx vector init'
- Hero left-aligned and vertically centred with prompt / two masked H1 lines / output line
- Exact copy reproduced: prompt, 'Ship to the grid.' / 'Collapse the distance.' with mono accent <em>distance</em>, [ok] output line
- Footer: © 2026 Vector Systems, status pixel + 'status: all systems nominal', github/x/irc
- Canvas projection maths (cx=w/2, cy=h*0.42, f=h*0.9, zNear 0.6, zFar 80, N=26, 60 exponential segments, step 1.14, speed 0.55) implemented as specified
- 8 alpha buckets with single beginPath per level; radial distance mask + vignette drawn after grid
- Scanline CSS (1px, 4s linear, gradient + box-shadow) matches spec exactly
- Entrance stagger table implemented with correct modifiers and --d values; in-fade/in-soft/in-mask/in-chip/in-type keyframes verbatim
- Responsive token overrides for 1600/1920/1280-1599/901-1279/max-height 850/720/900/560 all present and correct
- Mobile: burger, full-viewport overlay menu, Escape/link/resize close, CTA relocated into menu
- Failure guards: black-first rule + body inline style, .is-in fallback, .no-canvas CSS grid, reduced-motion rules, no console calls

**Requirements not met**

- Reduced-motion: the rAF chain is terminated after the single static frame (if (!reduced) requestAnimationFrame(loop)), whereas the brief requires the loop to keep running with speed = 0
- Reduced-motion: the mobile .menu is forced to visibility:visible/position:static/transform:none, turning the overlay into an in-flow block rendered below the footer on <=900px

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Reduced-motion mobile menu becomes a static in-flow section appended under the footer instead of an overlay | @media (prefers-reduced-motion: reduce){ .menu{ visibility:visible; transform:none; position:static; background:none; .. |
| low | Reduced-motion canvas stops animating entirely rather than running a static loop | if (!reduced) { requestAnimationFrame(loop); } combined with a separate one-shot paint(0) |
| low | Frame counter increments twice on the reduced-motion path | loop() paints and increments, then the reduced block runs paint(0) and increments __DEMO__.frames again |
| low | Longitudinal polyline drops one segment at every alpha-bucket transition (moveTo instead of lineTo), leaving sub-pixel gaps in the rails | if (lvl !== prevBucket) { ...; paths[lvl].push(0, sx, sy); prevBucket = lvl; } else { paths[lvl].push(1, sx, sy); } |
| low | Rung alpha is quantised with the rail denominator 0.34 although rung peak alpha is 0.30, so rungs land in a coarser bucket than specified | lvl = Math.round(alpha * (BUCKETS - 1) / 0.34) applied to alpha = 0.30 * Math.pow(1 - ze / zFar, 1.5) |

##### Halide — `halide`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 6/10 · **tokens:** 23,269

> The page has the right content structure and a recognizable dark photographic landing-page composition, but the optical effect is compromised by oversized glowing dust blobs and mis-centered bloom layers. It looks competent, not blank or broken, but it does not faithfully deliver the brief's precise 'one light behind one lens' cinematic optical stack.

**Requirements confirmed met**

- Single cinematic viewport composition at desktop with header, hero, and three-stat footer visible
- Required Halide copy is present and specific
- Header navigation, CTA, hero chip, two headline lines, lead, two buttons, and three stats are present
- Procedural optical stack is present: iris SVG, conic ring, bloom, fringe, dust canvas, grain
- Desktop screenshot shows no scrollbars or horizontal overflow

**Requirements not met**

- Dust motes are not implemented as tiny 0.6px–2.2px arcs; they render as large glowing blobs across the page
- Bloom and bloom-core are mis-centered in CSS and do not sit cleanly behind the lens axis
- The requested single visual idea is weakened: the iris/lens is dim and visually secondary to scattered glow blobs
- Canvas dust implementation violates the specified exact fill style and primitive budget behavior
- Optical centering uses negative margins instead of the specified translate centering in several layers

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | Dust motes render as oversized glowing orbs instead of tiny rising dust particles | Screenshot shows many large soft circular blobs, some tens of pixels wide; JS builds gradients with `var R = (30 + m.r * |
| high | Canvas dust does not follow the brief's exact per-mote paint style | Brief requires `fillStyle 'rgba(255,206,152,' + alpha + ')'` and radius 0.6px–2.2px; generated code uses cached radial g |
| high | Bloom layers are mathematically mis-centered relative to the iris | `.bloom` sets `left:50%`, `margin-left:calc(var(--iris) * -0.775)`, and also `transform:translate(-50%,-50%)`; this doub |
| medium | Bloom-core has the same double-centering error | `.bloom-core` uses `margin-left:calc(var(--iris) * -0.25); margin-top:calc(var(--iris) * -0.25); transform:translate(-50 |
| medium | The lens is visually too subdued compared with the accidental dust glow field | In the 1024x640 screenshot the central iris is dark and low-contrast while the page is dominated by large scattered warm |
| medium | The requested bloom behind the optic is not visibly centered behind the iris | Screenshot shows no strong warm radial bloom centered on the iris; the brightest glow is distributed as separate blobs a |
| low | Optical stage centering does not use the specified transform method | Brief specifies `.iris-stage ... transform:translate(-50%,-50%)`; generated CSS uses `margin-left:calc(var(--iris) / -2) |
| low | Mobile menu default CSS differs from specified display behavior | Brief specifies `.menu { display:flex; ... transform: translateY(-100%) }`; generated CSS sets `.menu{ display:none; ... |

##### Headlight — `headlight`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 5/10 · **tokens:** 21,308

> Composition, copy, tokens, and z-index stack are mostly correct, but the particle group split (60/27.9/12.1 amber/red/blue instead of 74.3/27.9/12.1) and the unrelated DOM wrappers + duplicate IDs are clear spec violations. The screenshot reveals a visually weak trail field concentrated in the top-left rather than the described long-exposure road surface, with an unintended dark band cutting across the lower copy.

**Requirements confirmed met**

- Document lang, title, and viewport meta correct
- All required copy strings present verbatim (eyebrow, h1, paragraph, status, footer, CTA)
- Single h1 with required text and styling tokens
- CTA cluster with primary pill button and quiet link
- Two radial glow layers with correct colors, sizes, positions, and 70px blur
- Canvas backdrop with inset:-12px and CSS blur(0.4px)
- Vignette and grain layers present at correct z-indexes
- Footer shows required left/right text strings
- Readability scrim implemented as gradient on .site-shell::before
- System font stack used, no Google Fonts request
- Header brand 'NOCTURNE' with letter-spacing 0.24em and nav links to #service/#safety
- Reduced-motion fallback implemented with static seeded frame
- Telemetry hook with name, ready, frames, effects, errors fields
- Canvas DPR handling with cap and 2.5M pixel budget

**Requirements not met**

- Particle counts wrong: brief requires 39 red + 17 blue + 104 amber = 160 total, but implementation uses 39 red + 17 blue + 84 amber = 140 total with `index < 39 ? 'red' : index < 56 ? 'blue' : 'amber'`
- Tone-mapping wrong: brief says 74.3% amber / 27.9% red / 12.1% blue, implementation produces 60% amber / 27.9% red / 12.1% blue
- Hue ranges wrong: brief says sodium 18–42deg, brake red 358–8deg (wrapping), headlight blue 204–222deg; implementation uses 358–368 / 204–222 / 18–42 which collapses the percentage signs into numeric degree ranges (e.g. `358 + random() * 10` produces 358–368, not 358–8 wrap)
- Excess DOM wrappers: brief requires the exposure wash to be inside .canvas-wrap; implementation wraps canvas in two additional divs (.canvas-inner, .canvas-drift) plus the wash, adding opacity-fading overlays not in the brief
- Body still overflows horizontally on small viewports because html/body do not enforce `overflow-x: hidden` in the base styles (only inside `@media (max-width: 900px)`); brief requires it always
- Per-frame draw operations exceed budget: brief allows ≤420 (140 updates + 140 current stamps + 140 previous stamps + 1 fade + 1 composite); implementation uses globalAlpha + 6 path commands + 3 property writes per particle, which inflates the per-frame draw call count and likely violates the cost budget
- Brief specifies 'Every particle must leave a 6px to 34px trail by stamping points'; implementation draws only a single line per particle with no multi-stamp trail
- Status strip is rendered inside the .hero-copy block (and uses `id="safety"`) instead of being placed above the CTA cluster or directly below the paragraph as a sibling; this collapses the layout structure
- CTA cluster and footer share z-index logic poorly: footer is z-index:1 while site-shell is z-index:4, so footer sits below the shell's ::before scrim and may be visually subdued beyond spec
- Exposure ramp default state is wrong: brief says exposure wash defaults to opacity:0 then ramps to 1; implementation declares `opacity:1` on `.exposure-wash` and animates from 0→1 with `backwards` fill mode, so on first paint the wash is hidden (correct behavior) but the final opacity is back to 1 (correct). However the canvas-inner also animates `opacity` from 0→1 separately, causing double fade not specified in the brief
- Pointer parallax uses `event.clientX / width * 2 - 1` but width is 0 at startup before resize runs, so first pointer event after load gets NaN; brief calls for clamping [-1,1] which fails on the first frame
- Brief mandates 'exactly one visible h1' and a dedicated `<main>` with `id="service"`; implementation reuses `#service` on the status strip inside main, creating duplicate IDs
- Quiet link underline offset is `5px`, correct, but `text-decoration:underline` is applied at all states including hover which loses the offset on hover (the brief requires the offset to persist)
- Brand link `href="#service"` is wrong: brief requires it to be a home link, but pointing to #service (same as 'The service') creates a duplicate navigation target. Spec only mandates aria-label 'Nocturne home', not a particular href, so this is a soft miss

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Duplicate `id="service"` on <main> and `id="safety"` is placed inside hero-copy on the status strip, breaking the navigation anchors | <main id="service" class="hero" ...><div class="hero-copy">...<div id="safety" class="status-strip" ... |
| high | Particle group split is wrong: amber group only gets indices 56..139 (84 particles) instead of the required 104 | const group = index < 39 ? "red" : index < 56 ? "blue" : "amber"; produces 39 red + 17 blue + 84 amber |
| medium | Sodium hue range should be 18–42deg but brief also restricts brake red to 358–8deg (wrapping); code generates 358–368 instead of 358–8 modulo wrap | group === "red" ? 358 + random() * 10 : group === "blue" ? 204 + random() * 18 : 18 + random() * 24 |
| low | Implementation wraps the canvas in two extra divs (.canvas-inner, .canvas-drift) plus an exposure wash, none of which are specified in the brief | <div class="canvas-inner"><div class="canvas-drift"><canvas id="traffic-canvas"></canvas><div class="exposure-wash"></di |
| low | Status strip is a child of .hero-copy and uses role="status" which would announce the whole strip to screen readers, while the brief describes a decorative timing line | <div id="safety" class="status-strip" role="status"> |
| low | Body baseline lacks `overflow-x: hidden` outside the media query; only added via `@media (max-width: 900px)` | body { ... } (no overflow-x) then @media (max-width: 900px) html,body,.site-shell { overflow-x: hidden; } |
| low | Footer z-index 1 sits below the page shell (z-index 4) and its scrim, so the footer is drawn under the readability overlay | .site-footer { ... z-index: 1; } |
| high | Screenshot shows the entire visual weight of the trail field clustered in the top-left quadrant with the lower-right and lower-center nearly empty, contradicting the brief's 'darkest quadrant is lower-left' and 'biased toward y between 4% and 62%' | Screenshot at 1024x640: traffic-light trails concentrated upper-left, lower third mostly empty except for a few stray am |
| medium | Screenshot shows the .vignette darkening the bottom-center heavily while the required readability scrim on .site-shell::before is also darkening that same area, producing a visible dark band that crops through the paragraph and status strip | Visible dark band runs horizontally across the page just above the status strip in the rendered image |
| low | Type ramp at 1024px renders the h1 at roughly 70–80px (between the clamp minimums) and looks noticeably smaller than the brief's intended editorial display weight at this width | Screenshot: 'Take the long way home.' occupies roughly 55% of viewport width; the brief expects clamp(54px, 7.2vw, 128px |

##### Lattice — `lattice`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 7/10 · **tokens:** 22,026

> The implementation faithfully delivers the structural brief — typography, layout, tokens, telemetry, motion choreography, and failure guards are all present and correctly wired. Visually it lands in the right neighborhood but the depth fade and horizon glow read weakly in the screenshot, leaving the canvas looking like a uniformly dense cube tangle rather than a clearly architected gyroid with crisp near edges and dissolved far edges.

**Requirements confirmed met**

- Single self-contained index.html with no external media
- Google Fonts loaded with Inter and IBM Plex Mono
- Telemetry hook with correct fields (name, ready, frames, effects, errors)
- Three effects pushed in correct order
- Gyroid Newton projection with analytic gradient and displacement clamp
- 12 depth buckets with preallocated Uint16Array buffers and cached strokeStyle strings
- Horizon glow band and 1px core line built from cached gradients
- Vignette radial gradient drawn last
- Canvas resolution trick with dpr capped at 2 / 1.5 and setTransform
- Grain texture via inline SVG feTurbulence data URI with stepped animation
- Brand mark SVG path matches brief exactly
- Nav with 4 mono links, numerals in .num, word/nav hover color transition
- Header CTA ghost-style button with correct hover state
- Hero eyebrow with in-type reveal and exact copy
- Two-line H1, .em styled mono accent for 'unit cell'
- Lead paragraph with exact copy and max-width:520px
- Spec line with .hi accent on 'G-surface' and .opt span at <=560px
- Two actions: btn--primary with gradient + inset highlight, btn--ghost with subtle bg
- Footer with copyright, centered SEM batch with pip, three mono links
- Viewport lock at >=901px (html/body overflow:hidden, page height:100dvh)
- Mobile burger at <=900px and full-screen menu overlay with backdrop blur
- Reduced motion fallback that freezes t at 7.5s and hides grain/blink
- Entrance fallback via two nested rAFs + getAnimations check + .is-in sweep
- Canvas fallback grid + horizon line via .no-canvas class

**Requirements not met**

- Canvas center at desktop is cx = w * 0.635, but rendered lattice looks centered slightly right-of-center (around ~0.62 visually fine)
- Rendered lattice occupies a noticeably larger share of the viewport than the designed 62% — at 1024x640 the wireframe appears to span ~80% of viewport width/height
- Horizon glow band and 1px core line are essentially invisible in the screenshot — core line cannot be seen at all, band is barely detectable
- Depth fade does not read clearly: far geometry dissolves but the bulk of the mesh reads as a uniformly dense, near-opaque tangle rather than a sparse architected surface with selective crisp near edges
- Spec line `G-surface · Si–O system · ρ* 0.42 g/cm³ · E*/E_s 3.1` renders as monospace but the in-text stylized Greek/sub characters (ρ*) are using plain ASCII p* with a star, not the actual ρ character (the brief says 'ρ*' which is acceptable as text, but it is followed by a plain ' g' that reads as '0.42 g/cm³' — the 'g' should be italicized or rendered as g for grams; brief copy uses the unicode ρ so partial)
- Footer pip is not visibly glowing in the screenshot (only the 7px square is seen, no halo)
- Header CTA appears far to the right at 1024px (visually fine, but the right alignment pushes it slightly off-center relative to the grid)
- Footer has 4 line items rendered side-by-side at 1024px, but the footer should align footer-left flush-left, footer-center physically centered, footer-right flush-right — the layout looks acceptable but the middle item is slightly offset

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Lattice wireframe reads as a dense opaque cube-like tangle rather than a clearly architected gyroid minimal surface | Screenshot: the structure occupies most of the right half of the viewport and individual gyroid saddles are not legible; |
| medium | Horizon glow band and 1px core line are not visible in the rendered page | Screenshot shows no detectable soft horizontal band around y=cy and no 1px line crossing the lattice |
| low | Vignette appears too strong, washing the canvas edges to near-black and partially clipping the lattice's left/back faces | Screenshot edges (especially bottom and top corners) are nearly pure black; lattice wireframe fades into the vignette ag |
| low | Footer status pip lacks the expected halo glow | Screenshot shows a flat 7px square in the center footer line; box-shadow:0 0 8px var(--accent-dim) appears to render wit |
| low | Greek ρ character in spec line is rendered as plain ASCII 'p' (the brief uses the actual ρ glyph, but the source code uses 'p*') | HTML spec line: `ρ* 0.42 g/cm³` uses U+03C1 (ρ) which is correct in source — actually verified the source uses 'ρ' so th |

##### Margin — `margin`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 5/10 · **tokens:** 30,611

> The page has the correct copy, palette, and procedural ingredients, but the defining desktop composition is wrong: the message and garment columns are in the wrong positions and the 1024px view is visibly clipped. The canvas also ignores the required static low-cost lattice and instead adds conspicuous animated texture that makes the result look like an unrefined AI mockup.

**Requirements confirmed met**

- The page uses the specified title, language, semantic landmarks, and one h1.
- The visible copy is specific and matches the brief.
- The desktop presentation uses the intended bone, ink, muted dye, editorial palette.
- The page includes procedural SVG garment plates, CSS weave layers, fades, counter-scroll animations, and focus styling.
- The 390px, 768px, and 1440px compositions avoid horizontal overflow according to the supplied harness.

**Requirements not met**

- The desktop grid does not place the center message between the two garment columns because the DOM/grid item order is wrong.
- The ambient canvas is not the required static two-pass lattice; it adds extra fibers and a continuously repainted moving mark.
- The 901px–1023px layout does not reliably keep both 280px columns visible alongside the center panel.
- The required column article ordering is not satisfied for the left column: it repeats SS / 01 through SS / 06 rather than using the required different authored order.
- The specified static canvas opacity values are changed from 0.018/0.012 to 0.045/0.03, with additional much darker marks.
- The canvas is repainted every animation frame, contradicting the requirement to redraw it only on resize.

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | The primary composition is structurally misordered: the center message renders in the left grid column, the left garment track renders in the center, and the right track renders on the right. | In .hero, .center-message is the first grid item, followed by .mobile-columns with display: contents; the screenshot sho |
| high | The 1024px screenshot visibly clips the intended composition and loses the left garment column. | At 1024px the compact grid requires roughly 1018px for columns and gaps before the 64px hero padding, while the screensh |
| medium | The ambient backdrop is visibly a dotted/fiber pattern rather than the specified subtle two-pass 3px lattice. | drawWeave() adds a fiberRow/fiberColumn loop with repeated 5x2 and 2x5 rectangles and uses rgba(26,24,21,0.16); repaintW |
| medium | The canvas animation violates the requested motion coupling and performance choreography. | frame() calls repaintWeaveMark(time) and schedules itself every frame, while the brief requires the canvas to redraw onl |
| medium | The left column does not use a different authored plate order from the right column. | The left track's authored six are SS / 01 through SS / 06 in order, while the brief explicitly requires different author |
| high | The screenshot reads as a broken/default generated composition rather than a deliberate three-column marketplace scene. | The headline occupies a narrow left strip, the central garment is disconnected from the message, and the right card is p |

##### Monolith Type — `monolith-type`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 7/10 · **tokens:** 21,602

> The composition, copy, token system, and procedural backdrop are faithfully implemented and the screenshot shows a convincing metallic extruded wordmark with the requested chrome. The main substantive defect is that the per-letter cascade animation is applied to extrusion-layer letters (which sit behind the top-face and are mostly hidden) rather than to the visible top-face letters, weakening the requested letter-by-letter entrance. Secondary issues are a mis-centered stage-grid background that prevents the 96px horizontal drift from being visible and a small transform/keyframe mismatch on the specular mask.

**Requirements confirmed met**

- Single h1 with aria-label='MONOLITH'
- 12 extrusion spans with data-depth 12..1 plus top-face
- Each extrusion has 8 letter spans M O N O L I T H
- Specular mask overlay with duplicated letters and sweep animation
- Reflection div with flipped/transformed text and floor-glow
- Procedural backdrop (stage-field, stage-grid, stage-noise) with feTurbulence SVG
- Hero copy text matches brief exactly
- Footer metrics: 01 Variable wordmarks / 02 Optical correction / 03 UI type systems
- Header has brand mark SVG, three nav links, Request specimen CTA
- Mobile burger menu with aria-expanded/aria-label toggling
- Token table in :root with required values
- Desktop lock: html, body height 100%, overflow hidden at >=901px
- Pill component with .pill::before shine and hover transform
- Inter + Instrument Serif via Google Fonts preconnect
- prefers-reduced-motion handling with .specular-mask display:none
- window.__DEMO__ telemetry with effects and error listener
- animationend adds .is-in class to .appear and .letter

**Requirements not met**

- Specular mask transform starts at translateX(-72%) but @keyframes specular-sweep keyframes go from -76% to 76% — initial transform not matching the keyframe start exactly
- .top-face::after is supposed to be inside the text via background-clip:text but the rule sets color:transparent on the pseudo while the parent is also color:transparent; the bevel strip may not render as intended on a transparent parent
- Reflection z-index:1 but reflection div is OUTSIDE h1.monolith-stack in the DOM; brief places it inside .wordmark-scene which is fine, but reflection does not duplicate the 12 extrusion layers (brief only requires top-face duplicate, so this is actually correct)
- Header padding uses padding-top only (var(--header-y) var(--header-x) 0) but the brief specifies padding var(--header-y) var(--header-x) 0 — this matches, however the desktop lock does not include the height lock padding for chip rendering
- Grid-drift keyframes use background-position but the .stage-grid already has background-position set — animation overrides it; this works but the 96px 96px shift in BOTH axes may cause visible jumpiness vs the requested 96px on both axes (correct per spec)
- letter:nth-child(1) targets first letter of first extrusion span (M of depth 12), not letters within the top-face — so the in-letter cascade applies to the BACK extrusion letters (which are dark/hidden behind the top-face) rather than visible letters; the top-face letters use class .in-letter but rely on :nth-child for delay, meaning all extrusion letters cascade with the same delays as top-face — wasted/incorrect cascade
- .stage-grid background-position keyframe goes from 'center calc(50% + 8px)' to 'calc(50% + 96px) calc(50% + 104px)' which is a 96px shift in both axes; but 104-8=96, so this is correct
- Reflection opacity is 0.28 default and 0.20 at <=720px height — but on a 1024x640 viewport the desktop default 0.28 applies; per the screenshot the reflection appears very faint, which matches the brief

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | Letter cascade animation targets extrusion letter spans (behind top-face) rather than visible top-face letters, so the requested per-letter cascade is effectively invisible | .letter:nth-child(N){animation-delay:.44s...} and the visible top-face letters have class 'in-letter' but no per-child d |
| medium | Stage grid background-size is 96px but background-position goes from 'center calc(50% + 8px)' — using 'center' as first value means the grid is centered horizontally with a vertical offset; this means grid-drift horizontal motion starts from a computed 'center' not from a deterministic pixel, causing the horizontal drift to be 0px (since center is auto-centered) | @keyframes grid-drift{from{background-position:center calc(50% + 8px)}to{background-position:calc(50% + 96px) calc(50% + |
| low | Specular mask initial transform translateX(-72%) does not match the keyframe start at translateX(-76%) — for the 1.2s delay the element sits at -72% before animation begins, then jumps to -76% when animation starts | .specular-mask{transform:translateX(-72%)} and @keyframes specular-sweep{0%{transform:translateX(-76%)...} |
| low | Reflection uses raw <span> children for letters but the brief asked for the reflection to duplicate the top-face MONOLITH with the same per-letter class; the reflection here has no .letter class on its spans, so any reflection-only styling (e.g. background-clip on individual letters) would not apply | <div class="reflection..."...><span>M</span><span>O</span>... — no class='letter' on these spans |
| low | Mobile menu panel has top:calc(var(--header-y) + var(--header-h) + 14px) but the brief only requires it to be 'a dark glass sheet' — position is implementation detail; however the panel lacks an explicit max-height and could overflow the viewport on small phones with long content | .mobile-menu-panel{position:fixed;z-index:80;left:0;right:0;top:calc(var(--header-y) + var(--header-h) + 14px);...} |
| low | Screenshot shows the wordmark with visible staircase extrusion, top-face gradient, and faint reflection — composition matches the brief; chip and footer render correctly. The specular sweep is not visible in the static screenshot but the element is present in DOM | 1024x640 screenshot inspection: chip 'VARIABLE TYPE SYSTEMS / 2026' present, extruded MONOLITH with metallic top face, f |

##### Nebula — `nebula`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 6/10 · **tokens:** 21,422

> Composition, copy, tokens, motion choreography and responsive table are implemented faithfully and the page reads as a polished serif-driven observatory hero — but the cumulative canvas-plus-CSS scrim stack crushes the nebula's chromatic target, leaving the backdrop looking flat and the star field under-served. The two-rAF fallback is also structurally off-spec because the loop is started unconditionally outside the fallback path.

**Requirements confirmed met**

- Document title 'NEBULA — Deep Space Observatory' set
- lang='en' and viewport meta present
- Single h1 with 'NEBULA<br><span>IN THE DARK</span>' markup
- Semantic header/nav/main/footer landmarks
- Full token table implemented exactly as specified
- Five cloud layers with correct octaves, base frequencies, amplitude, and palette arrays
- 240 stars split into 72/112/56 depth groups with seeded properties
- OffscreenCanvas with detached fallback for cloud generation
- Layered canvas draw order: bg fill → 5 clouds → stars → scrim → inner border
- Cloud drift periods 74/91/113/137/157 s with translation ≤18px/12px and scale 1.00–1.025
- Star drift periods 62s/88s/131s with twinkle periods 3.8s/5.1s/7.4s
- Telemetry object with ready, frames, effects, errors populated
- Effects pushed as 'precomputed-nebula', 'depth-stars', 'camera-drift'
- nebulaFade/nebulaRise keyframes with exact durations and delays (80/180/300/420/460/620/700 ms)
- Exact copy: 'DEEP SPACE OBSERVATORY / 01', lede, footer strings
- Primary/secondary anchor hover states match brief gradients and shadows
- Responsive breakpoints at 900px, 560px, 720px height, 600px height implemented
- prefers-reduced-motion block sets opacity:1!important and disables animations
- Visible :focus-visible outline 3px var(--accent-bright) with 4px offset

**Requirements not met**

- Nebula visual target is very dim in the rendered output — violet core, cyan lower-left fringe, and warm rose right fringe are barely perceptible against the dark background
- Stars appear sparse in the screenshot relative to the stated 'crisp white-violet stars' target, partially obscured by stacked scrim layers
- Two-rAF fallback is non-strict: the rAF loop is started immediately at the end of the script AND a separate double-rAF fallback exists, rather than the loop starting only inside the fallback as the brief specifies

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Rendered nebula is washed out — the specified violet core, cyan fringe and rose fringe are visually faint | Screenshot shows a near-monochrome dark indigo background with only a faint violet haze at the top; no discernible cyan  |
| medium | CSS scrim stack (vignette + readability-scrim + content-scrim-accent) is layered on top of the canvas-drawn scrim, compounding darkening and further suppressing nebula contrast | .backdrop-vignette, .readability-scrim, .content-scrim-accent all use rgba(3,4,12,*) stops combined with the JS canvas s |
| low | rAF loop is unconditionally scheduled outside the two-rAF fallback, breaking the brief's prescribed flow where the loop starts inside the fallback when frames==0 | Final lines: `if (!reduced) raf = requestAnimationFrame(loop);` runs alongside the nested double-rAF block that also con |
| medium | Star count visible in the rendered frame is sparse and lacks the 'crisp white-violet' punch the brief calls for | Screenshot shows roughly a dozen discernible stars across 1024x640; near-group 4px drift is overshadowed by darkening la |
| low | Redundant `animation: none;` declaration in :hover rules | .button-primary:hover and .button-secondary:hover both set `animation: none;` despite no animation being applied to begi |

##### Prism — `prism`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 7/10 · **tokens:** 12,642

> The rendered page broadly resembles the requested PRISM landing page, but several exact implementation requirements were ignored. The biggest failures are the illegal per-frame canvas repainting, the shortened incoming beam, and structural deviations from the specified SVG and animation behavior.

**Requirements confirmed met**

- The page renders as a single cinematic landing page with copy on the left and the prism/spectrum scene to the right.
- The visible copy matches the requested PRISM text and is not placeholder filler.
- The header, navigation, hero copy, CTA, and footer are visually present in the expected locations.
- The scene uses procedural canvas/CSS/SVG visuals rather than image media.
- The screenshot shows no obvious horizontal overflow or clipped primary content at 1024x640.

**Requirements not met**

- The incoming beam is visually a short stub near the prism, not a thin white beam entering from the left as described.
- The exact canvas technique is not followed: the canvas is modified every animation frame despite the brief requiring draw exactly once per size and never per frame.
- The exact required JS was not inserted; extra live canvas mutation variables and per-frame fillRect logic were added.
- The SVG prism structure does not match the brief: the specular polyline is placed in a separate svg.specular-svg instead of the specified polyline.specular over the prism structure.
- The fanOut animation ends all wedges at opacity 0.88, overriding the seven distinct wedge opacity tokens after animation.
- The beam width token is effectively ignored by clamping it to calc(var(--prism-w) + 24px), producing a much shorter beam than the specified --beam-w behavior.
- Footer contents are wrapped in div elements rather than being the specified left and right text nodes.
- The body::after vignette is assigned z-index:1, competing with the bg-drift layer instead of being cleanly represented as the described backdrop vignette layer.

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Incoming beam is mis-sized and visually fails the requested left-entry beam. | CSS: .beam { left: 0; width: min(var(--beam-w), calc(var(--prism-w) + 24px)); } Screenshot shows only a short white line |
| high | Canvas is repainted inside the hot rAF loop, directly violating the static grain requirement. | JS loop contains liveContext.fillRect(liveSeed % liveWidth, (liveSeed >>> 8) % liveHeight, 2, 2); Brief required: Draw e |
| high | Generated script is not the exact requested script. | Generated JS adds liveContext/liveWidth/liveHeight/liveSeed state and per-frame canvas writes not present in the specifi |
| medium | Specular edge implementation does not match the requested SVG structure. | Generated HTML uses <svg class="specular-svg"> containing <polyline class="specular"> after a separate <svg class="prism |
| medium | Wedge opacity tokens are defeated by the animation final state. | @keyframes fanOut { ... to { opacity:0.88; ... } } applies to all seven wedges with animation-fill-mode: both, overridin |
| low | The spectrum reads as blurred colored rays rather than seven crisp dispersion wedges. | Screenshot shows soft horizontal/diagonal blurred bands; CSS uses thin divs with height var(--wedge-h) and blur filters, |
| low | Layer stack is not implemented exactly for the vignette/backdrop. | body::after has z-index: 1 while .bg-drift also has z-index: 1; the brief separately specified #grain at z-index 0 and b |
| low | Footer markup does not match the requested text-node structure. | Generated footer contains <div>© 2025 PRISM Optics. All rights reserved.</div> and <div>Precision · Dispersion · Clarity |

##### Signal Room — `signal-room`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 8/10 · **tokens:** 27,457

> Faithful, near-complete implementation that satisfies the cinematic-room composition, responsive token table, telemetry contract, motion choreography, and accessibility rules, with only minor cosmetic deviations (shorter brand SVG stroke heights and a slightly off-canvas reflection opacity). Composition reads as premium with a well-centered hero panel, glass buttons, subtle volumetric ambience, and visible audio bars — minor shortcoming, not refuted.

**Requirements confirmed met**

- Document title 'Signal Room — Audio AI for Live Work' and lang=en
- Single file ~25KB, well under 90KB
- All :root tokens defined per brief
- First CSS rule is html,body background guard; body has inline background
- Backdrop layer stack with correct z-indices (0,1,2,3,4,5,6,8)
- Four light shafts with exact positions, widths, transforms, gradients, animations and durations
- Rear-haze, floor-glow with breathing animation, room-lines perspective grid, SVG grain
- Canvas#audio-bars with 64/52/44 bars at correct breakpoints
- Bar sine formula, envelope, laneBoost, clamp(0.10,0.96) match spec
- Bar gradient stops rgba(210,250,255,0.94)/(119,232,255,0.70)/(61,102,190,0.24) at 0/42/100%
- DPR 1.75 desktop / 1.5 mobile; setTransform and resize via single queued rAF
- Telemetry hook window.__DEMO__ with name 'signal-room', ready/frames/effects/errors
- Effects array pushed in exact order: volumetric-light-shafts, floor-glow, audio-bars-canvas, grain-texture, mobile-menu
- Window error listener pushes to errors array
- Stagger table delays exactly match spec (0.06, 0.14, 0.20, 0.26, 0.32, 0.34, 0.48, 0.55, 0.62, 0.69, 0.76, 0.83, 1.00, 1.14, 1.22, 1.30, 1.40, 1.50)
- One h1 'Hear the work before it slips.' wrapped in word spans
- Lead paragraph copy is verbatim from brief
- Chip 'REAL-TIME AUDIO AI', primary 'Start with Signal', ghost 'View security model'
- Header CTA 'Hear a demo' as anchor pill
- Three footer metrics with correct span/text content
- Real header/nav/main/footer landmarks
- Mobile burger with aria-label, aria-expanded, aria-controls, three 16px bars
- Mobile panel with three nav links plus CTA, aria-hidden toggling, Escape closes
- Glass-signal pill/button treatment with 112deg glint, hover translateY -1px
- Primary button gradient #d2faff→#77e8ff→#76a8ff and hover variant
- Focus-visible outlines var(--focus-w) solid var(--focus)
- ::selection background rgba(119,232,255,0.30)
- All eight responsive breakpoints (1600, 1920, 1280-1599, 901-1279, <=900, <=560, height<=850, height<=720)
- Two-rAF animation fallback that adds .is-in when getAnimations missing or all finished
- Reduced motion CSS disables animation and freezes shaft base transforms
- Reduced motion JS draws one static frame at t=2.4 then stops
- Footer bottom scrim above bars

**Requirements not met**

- SVG brand mark signal stroke heights: actual 4, 10, 6 instead of spec 6, 12, 8
- Reflection color is rgba(119,232,255,0.12) with globalAlpha 0.46 (effective ~0.055) instead of spec rgba(119,232,255,0.06) directly

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| low | Brand SVG signal strokes are shorter than spec — actual path lengths 4, 10, 6 vs required 6, 12, 8 | <path d="M7 13V9M11 16V6M15 14V8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/> |
| low | Reflection fill uses rgba(119,232,255,0.12) plus globalAlpha 0.46 (effective ≈0.055) instead of direct rgba(119,232,255,0.06) | glowCtx.globalAlpha=.46;glowCtx.fillStyle="rgba(119,232,255,0.12)"; |
| low | Volumetric light shafts render subtly in the viewport at 1024x640 even though CSS opacity values match the brief | Visual inspection of screenshot — shafts are perceptible but understated |
| low | hero-actions has no explicit width:100% on mobile, so buttons rely on flex-wrap without container width | CSS only sets display:flex; gap:12px; flex-wrap:wrap; justify-content:center |

##### Slipstream — `slipstream`

**Verdict:** `unparsed` · **confidence:** low · **aesthetic score:** —/10 · **tokens:** 0

> 

##### Smolder — `smolder`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 6/10 · **tokens:** 13,583

> The page hits the general mood and restraint, but the desktop composition misses the main spatial requirement: the paragraph intrudes too far into the right side instead of preserving an empty half-frame. Under the hood, the scroll technique also does not match the brief's exact method, so this is not a faithful implementation.

**Requirements confirmed met**

- Single-screen editorial composition with warm-black gradient backdrop
- Exact hero copy and eyebrow copy are present
- Exactly one h1 used as the paragraph
- Bottom navigation line is fixed to the viewport bottom
- No extra sections, cards, images, or decorative media were added
- Typography generally follows the requested serif/sans split
- Footer nav uses the requested link text and helper label

**Requirements not met**

- Hero does not leave the right half empty at desktop size
- Scroll-mapping technique does not match the brief's exact implementation
- Cached paragraph position is not actually used for progress calculation
- Paragraph rect is read outside the rAF loop on scroll events
- Reduced-motion behavior conflicts with the brief's stated static readable state
- Load animation is triggered via :has() on the body instead of a direct JS-added class approach described in the brief

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | Hero paragraph occupies too much horizontal space; the right half is not kept empty | In the 1024x640 screenshot the two-line paragraph stretches far into the right side, leaving only a narrow empty strip.  |
| medium | Opening paragraph is rendered extremely dim in the captured composition | The screenshot shows the h1 nearly disappearing into the background at top-of-page. While the base words begin at 0.14 o |
| high | Scroll progress is not calculated from window.scrollY and cached paragraph travel range as specified | JS uses `const progress = clamp((viewportHeight * 0.34 - rect.top) / cachedTravel, 0, 1);` and never uses `cachedTop` af |
| medium | Paragraph rect is read outside the animation frame loop on scroll | The brief required the paragraph document position to be cached at startup and on resize, with one live container rect r |
| medium | Reduced-motion implementation contradicts the requested static readable state | The CSS says `.base-word { opacity: 1 !important; }`, but the JS still runs and writes per-word opacities because `updat |
| low | Entrance animation wiring does not follow the stated failure-guard pattern | The brief said to apply entrance animation 'through a class added by JavaScript'; this build instead relies on `body:has |

##### Solstice — `solstice`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 7/10 · **tokens:** 22,352

> The page captures the requested visual language and most visible copy, but multiple named rendering techniques and semantic composition requirements are only approximated. The supplied screenshot is polished enough to pass as a landing page, yet the oversized card and simplified glow/reflection system prevent it from being a faithful implementation.

**Requirements confirmed met**

- Rendered desktop composition has the requested left hero copy, CTA row, right telemetry card, atmospheric backdrop, horizon, and footer rail
- Visible copy matches the specified SOLSTICE brief, including the lede, CTA labels, telemetry values, footer metadata, and availability pill
- The screenshot shows the intended dawn palette, star field, sun arc marker, horizon line, and glass instrument-card treatment
- The generated environment contains 24 stars, 9 clouds, a horizon SVG, particle canvas, solar-system elements, vignette, and grain layer
- The solar cycle, clock, phase thresholds, and sun trajectory are substantially implemented
- Named entry keyframes enter-up, enter-right, reveal-card, and drift-cloud are present
- Responsive rules for tablet, mobile, and short desktop viewports are present

**Requirements not met**

- The hero copy, telemetry cluster, primary actions, and status rail are not implemented as semantic section elements; they are divs or a nav
- The required desktop header nav gap is 8px, but the default CSS uses 24px
- The upper glow is not the required blurred absolutely positioned ellipse; .solar-glow is a full-viewport element with no blur filter or ellipse geometry
- The upper glow color is always emitted with alpha 0.98 instead of interpolating dawn 0.88, noon 0.98, and dusk 0.82
- The sun reflection is a CSS ellipse with box-shadow, not a canvas reflection composed from three concentric translucent ellipses with the specified blur representation
- The canvas backing resolution uses devicePixelRatio clamped from 1 to 2 rather than always sizing from cssWidth*2 and cssHeight*2 as required for smaller viewports
- paletteAt returns the reflection color as a CSS string instead of retaining the required RGB channel array representation
- The runtime performs additional per-frame root custom-property writes for --sun-x and --glow-x, and transforms three solar elements rather than adhering to the specified write budget
- The responsive short-height overrides do not implement the required internal scrolling guard when hero content exceeds 600px
- The status rail is a nav rather than the requested semantic status-rail section
- The visible 1024x640 composition has no GRID ONLINE status pill because the implementation hides it for all 901–1100px widths, although the screenshot viewport is otherwise desktop-like

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | The atmospheric glow implementation is visibly and structurally wrong: the screenshot shows a broad diffuse wash, while the brief requires a distinct 70px-equivalent blurred ellipse centered at the sun. | The runtime sets .solar-glow to width:100vw and height:100vh, but never sets filter:blur(38px), border-radius:50%, or el |
| high | The reflection technique does not match the brief. | The code creates one .sun-reflection div with background:currentColor and box-shadow; no canvas reflection or three conc |
| medium | At the supplied 1024x640 screenshot, the telemetry card is oversized and visually dominates the right side, with its bottom nearly colliding with the footer region. | The card occupies approximately x=672–981 and y=101–540 in the screenshot; the short-height rule increases telemetry row |
| medium | The screenshot's footer and horizon are visually crowded: the horizon crosses directly through the CTA/card region and the footer begins only about 140px below it. | At 1024x640, the hard horizon is around y=439 while the footer border is around y=580, leaving a shallow lower field and |
| low | The implementation looks like a competent generic AI landing page rather than a fully resolved cinematic system because several required atmospheric details are approximated with simple CSS defaults. | The sun uses simple white box-shadow styling, the reflection is a single div, and the glow is a full-screen radial backg |

##### Tally — `tally`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 7/10 · **tokens:** 20,839

> The page gets the broad Northlight departure-board composition right, but several of the brief’s defining canvas and motion techniques are not implemented exactly. The screenshot is usable, but the hero is poorly separated from the brightest canvas cluster and the short-height layout feels cramped.

**Requirements confirmed met**

- Desktop composition uses the required fixed header, fixed hero, fixed footer, full-bleed canvas, veil, and event line stack.
- The visible copy is specific to Northlight and mostly matches the required wording.
- The header sailing table is present at the top right with the required rows and amber final status.
- The hero column contains the required eyebrow, h1, paragraph, two actions, and harbour signal row.
- The footer metadata rail is thin and anchored to the bottom rather than rendered as a card.
- The screenshot shows the intended monochrome/mint/amber harbour-display visual language rather than generic stock imagery.

**Requirements not met**

- At 1024×640 the hero copy is laid directly over a very bright mint dot cluster, reducing legibility and undermining the requested cinematic departure-display composition.
- The canvas bloom pass is not implemented as the specified direct second full-lattice pass on the main context; it draws bloom circles to an offscreen canvas and then blurs the drawn image.
- The bloom alpha calculation is wrong for lit mint dots: it uses rowAlpha * waveEase * 0.34 instead of multiplying the dot’s live alpha by exactly 0.34.
- The generated canvas loop does not reset ctx.filter to "none" before the first pass each frame, contrary to the exact script/technique requirement.
- The load wipe does not implement the specified row visibility rule and 10-unit feather; it uses a simple per-row alpha clamp based on revealY - row.
- The CSS keyframe amber-column uses a 50% midpoint fade, not the requested opacity 0 to 1 to 0 over 1200ms with steps timing as a hard event pulse.
- The status row is visually too close to the footer rail at the tested short desktop height, making the lower-left composition cramped.
- Several sizes, colours, and timings are introduced as additional custom properties beyond the required token table rather than using only the specified design tokens.

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Hero title and paragraph sit on top of a high-intensity mint canvas blob in the screenshot, so the main message is visually contaminated by the backdrop instead of reading cleanly. | Screenshot at 1024×640 shows the large mint dot mass directly behind “Know when / the water / opens.” and the paragraph. |
| high | Canvas bloom technique deviates from the brief: the second pass is rendered into bloomCanvas and composited with drawImage, not drawn as the required second full-lattice pass with blurred arcs on the main context. | Script creates `const bloomCanvas = document.createElement("canvas")` and draws bloom arcs with `bloomCtx`, then calls ` |
| high | Bloom alpha is not the required live dot alpha multiplied by 0.34. | Script sets `bloomAlphas[i] = rowAlpha * waveEase * 0.34;` instead of using `(0.52 + 0.48 * energy) * waveEase * rowAlph |
| medium | First canvas pass does not explicitly reset ctx.filter to none each frame before drawing the lattice. | In `drawFrame`, before the first pass it sets `ctx.globalCompositeOperation`, `ctx.globalAlpha`, and `ctx.fillStyle`, bu |
| medium | Load wipe row activation is simplified and does not match the specified feathered reveal boundary. | Script computes `rowAlphas[y]` from `revealY - y`; the brief required each row visible when revealY is at least row-1 wi |
| medium | Amber event line keyframe is not a hard steps pulse as specified. | `@keyframes amber-column` uses `0%`, `50%`, and `100%`; the animation rule uses `steps(1,end)`, but the midpoint is not  |
| low | Footer/status area is cramped in the actual 1024×640 rendering. | Screenshot shows the harbour signal row only just above the footer border, with the lower composition compressed. |

##### Tessellate — `tessellate`

**Verdict:** `partial` · **confidence:** medium · **aesthetic score:** 7/10 · **tokens:** 9,860

> Code is a faithful, nearly byte-exact implementation of the brief's structure, tokens, keyframes, breakpoints, and JS telemetry; the only concrete deviation is the triangle pattern alpha assignment. The screenshot could not be inspected, so the rendered composition itself remains unverified.

**Requirements confirmed met**

- Document title, lang='en', viewport meta correct
- Token table fully declared in :root with all required variables
- Backdrop SVG with 3 patterns (#pat-tri, #pat-hex, #pat-herr), mask with exactly 6 shapes (2 polygon, 2 path, 1 circle, 1 rect), 3 cross-fading rects in masked group
- viewBox 0 0 1440 900 with preserveAspectRatio xMidYMid slice; no blur anywhere
- Layer stack z-indexes 0/1/2/3/10 as specified
- Header/nav links Work/Studio/Contact with text accessible names
- Hero copy exact: h1 'TESSELLATE', subtitle sentence, readout span
- Footer left '© 2024 Tessellate Studio' mono 0.7rem, right .pill button 'Pause Motion'
- All fadeUp delays 0.2/0.4/0.6/0.8s with fill-mode both
- Named keyframes match brief exactly (maskRotate, maskScale, crossFadeTri/Hex/Herr, fadeUp)
- All 4 responsive breakpoint blocks present with correct token overrides
- prefers-reduced-motion block matches brief (rect-hex/herr hidden, rect-tri opacity 1, static mask transform)
- JS telemetry hook byte-for-byte faithful to section J
- Google Fonts preconnect + Space Grotesk 700 / JetBrains Mono 400 with fallback stacks

**Requirements not met**

- Pattern fill alphas deviate: brief requires triangle paths filled rgba(192,132,252,0.15) AND rgba(192,132,252,0.05); implementation uses fill 0.05 with 0.15 only as stroke color
- Screenshot could not be inspected — rendered composition unverifiable

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Cannot evaluate rendered composition: screenshot not viewable in this environment; no image-based issues could be confirmed or ruled out | System reminder: the current model does not support images |
| low | Triangle pattern fills do not use the two specified flat-alpha fills (0.15 and 0.05); 0.15 is applied as stroke instead of fill | #pat-tri: fill="rgba(192,132,252,0.05)" stroke="rgba(192,132,252,0.15)" |
| low | Header uses justify-content: space-between but contains only the nav, so the brief's space-between behavior is inert (no left-side element); screenshot may show nav oddly left-anchored against an empty right side | header { justify-content: space-between; } with only <nav> as child |

##### Thermal — `thermal`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 7/10 · **tokens:** 22,940

> Most of the page composition is on-brief and the copy is specific, not filler. The major acceptance failure is the hottest-cell instrumentation: the marker and HUD do not agree with the actual rendered heat field in the screenshot.

**Requirements confirmed met**

- Single-frame desktop composition with full-bleed procedural heat canvas
- Required header / hero / footer structure is present in the rendered composition
- Brand mark, four-item nav, and header ghost CTA match the briefed content
- Hero copy matches the specified Thermal messaging and formatting
- HUD panel includes hottest-cell label, live value, stats, legend strip, and sampling footer
- Footer contains the specified copyright, centre status line, and exactly three links
- Color language broadly matches the requested cool-edge / violet / magenta / white-hot ramp
- Grid hairlines and heavier periodic guides are visibly present over the heat field
- Industrial mono/sans pairing and chip-style buttons are implemented

**Requirements not met**

- Visible hottest-cell marker does not appear to identify the actual hottest visible cell
- Crosshair/hotspot effect is visually weak and reads as detached from the heat maxima
- The screenshoted HUD temperature conflicts with the brightest visible heat core

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | Hottest-cell crosshair appears on the wrong location | HUD reads "R25 · C46 · 620°C", and the visible pink crosshair sits near the lower-right hotspot, while the brightest whi |
| high | Readout-to-image mismatch makes the instrument HUD look untrustworthy | The panel claims a max of 620°C at the lower-right region, but that region is not rendered as the hottest area; the cent |
| medium | Hotspot marker is too inconspicuous relative to the briefed cinematic instrument marker | In the screenshot the marker reduces to a small plus and does not clearly read as a crosshair with pulsing ring on the a |

##### Undertow — `undertow`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 6/10 · **tokens:** 19,769

> The copy block and general dark premium styling are in place, but the page misses the main visual requirement: there is no convincing off-centre drain or readable teal vortex anchoring the composition. It looks competent but generic, and several exact motion and particle implementation requirements were not followed.

**Requirements confirmed met**

- single-viewport dark editorial landing page structure is present
- left-aligned hero block occupies the calmer left side of the viewport
- header uses restrained navigation with wordmark left, nav centered, CTA right
- hero copy matches the specified headline and paragraph text
- proof strip exists with the three requested claims
- canvas, grain, vignette, and dark gradient backdrop layers are present
- overall palette stays near-black with teal accents
- footer is minimal and visually subdued

**Requirements not met**

- visual centre is not a clearly legible off-centre black drain at 66% / 51%
- teal particle acceleration around the drain is not visibly established in the rendered composition
- left-side footer alignment does not match the required inset padding
- exact footer layout from the brief is not honored in CSS
- the required exact JavaScript implementation was not used
- responsive particle-count table is not fully implemented
- several motion and particle-behavior details differ from the brief

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| high | The central drain, which was supposed to be the visual centrepiece, is effectively missing in the rendered image. | Brief: “The visual centre ... is an off-centre black drain at 66% horizontal and 51% vertical, surrounded by teal partic |
| high | The vortex field does not read as an approximately 900-particle cinematic swirl concentrated around the drain. | Screenshot shows sparse, barely perceptible speckling rather than a readable vortex with teal acceleration. The intended |
| medium | Footer horizontal placement is wrong; the left edge is flush to the viewport instead of padded to page inset. | CSS uses `.site-footer { inset: auto var(--page-pad-x) 28px 0; }` while the brief required `inset:auto var(--page-pad-x) |
| medium | The exact JS contract in the design brief was not followed; the generated script materially changes the particle implementation. | Brief said “Use this exact script at the end of body.” Actual script changes `getContext` options, changes `glowCtx.setT |
| medium | Responsive particle counts do not match the brief’s override table. | Script uses only `420 / 580 / 720 / 900`. Brief additionally required `760` at `min-width:901px and max-height:820px` an |
| medium | The glow canvas scaling implementation does not match the requested technique. | Brief required the offscreen canvas to use a 0.5 scale multiplier relative to visible backing dimensions and the provide |
| low | The footer center operational-status treatment is visually weak and not centered as a distinct middle element in the screenshot. | Brief required a three-column footer with the center as a 6px teal status dot. In the screenshot the middle area reads a |
| medium | The page reads more like a generic dark SaaS hero than the specified cinematic product statement built around a drain/vortex phenomenon. | The screenshot is dominated by a standard left-copy/right-empty composition. The unique centerpiece—the off-centre drain |

##### Upslope — `upslope`

**Verdict:** `partial` · **confidence:** high · **aesthetic score:** 7/10 · **tokens:** 27,586

> The page nails the cinematic single-slide composition, copy, tokens, animation choreography, telemetry, responsive tables, and reduced-motion fallback. The two real defects are visibility failures: the y-axis title and Q1 '24 label both sit inside the chart-stage's left bleed zone (left:-5vw) and are clipped off-screen on desktop, leaving the y-axis unlabelled and the x-axis starting at Q2 '24 in the rendered output.

**Requirements confirmed met**

- Document title is 'Moraine — Upslope' and lang='en' set
- Exactly one h1 with exact required copy
- header/main/footer landmarks present with correct contents
- Three radial gradients and one linear wash on .slide-backdrop with exact rgba values
- 14 dust points at exact x/y coordinates with correct colors and 2x2px sizing
- Vertical rail at 5vw with 20% white opacity from header to bottom
- SVG viewBox 0 0 1200 620 with preserveAspectRatio none and overflow visible
- Chart-stage positioned at left:-5vw, width:110vw, top:38vh, height:62vh
- Initial cubic path matches the brief verbatim
- Area fill gradient matches: #5B2BD9 0% 0.22 / #8D4DE4 48% 0.11 / #FF6FB5 100% 0
- Visible path 4px stroke with horizontal indigo-to-pink gradient
- Ghost path 24px stroke at rgba(255,255,255,0.09)
- Marker halo 100x100, center dot 10x10 with blue gradient
- 8 x-axis ticks at x=0,150,300,450,600,750,900,1050 with correct Q1'24-Q4'25 labels
- Crosshair 2px vertical 40px tick from marker center
- Hero copy: eyebrow, h1, deck, meta with exact copy and spacing
- Footer copy exact: 'MORAINE / A VENTURE-RESEARCH HOUSE' and 'ONE CURVE AT A TIME'
- Inquiry link 'Request the full note' with underline and focus ring
- CSS custom properties on :root match token table exactly
- Two-rAF fallback before entrance timeline
- Telemetry hook window.__DEMO__ with name 'upslope', frames, effects, errors
- Error listener pushes to errors array
- prefers-reduced-motion forces opacity:1, animation-duration:1ms
- Responsive breakpoints at 390/768/901/1440/1920px and height overrides at 600/700px
- Hover redraw handler changes path data, label text, marker/crosshair origins once

**Requirements not met**

- Y-axis title 'MARKET VALUE / USD' is positioned at SVG x=34 but the chart-stage is offset left:-5vw, mapping x=34 to approximately viewport x=-19px at 1024px width — the text is rendered fully off-screen on the left
- Q1 '24 tick label at SVG x=0 with text-anchor:middle is positioned at viewport x=-5vw (approx -51px at 1024px width), so it is clipped off the left edge of the viewport — screenshot shows Q2 '24 as the leftmost visible label
- Marker caption color is #A6AAB5 rather than the palette --muted #8A8F9C used elsewhere; minor inconsistency

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| medium | Y-axis title rendered off-screen left due to chart-stage left:-5vw offset conflicting with x=34 position | <text x="34" y="250" transform="rotate(-90 34 250)">MARKET VALUE / USD</text> inside SVG with .chart-stage { left: -5vw; |
| medium | Q1 '24 tick label clipped off left viewport edge; screenshot confirms Q2 '24 is leftmost | <text class="axis-label" x="0" y="548" text-anchor="middle">Q1 '24</text> — at chart-stage left:-5vw the center of this  |
| low | rAF loop performs far more than 2 style writes per frame (2 dashoffsets + area + 8 ticks×2 + marker×2 + crosshair×2 = ~20 writes once elapsed passes 1600ms), contradicting the 'no more than 2 style writes per frame' budget | animate() body sets ghost/visible/area/ticks[0..7]/marker/crosshair in a single callback |
| low | Marker caption uses custom fill #A6AAB5 instead of the design-system --muted #8A8F9C | <text class="sector-caption" x="874" y="218" fill="#A6AAB5" |

##### Vellum — `vellum`

**Verdict:** `confirmed` · **confidence:** high · **aesthetic score:** 9/10 · **tokens:** 29,750

> A high-fidelity, character-perfect implementation of the Vellum brief: paper backdrop, hairline grid, registration marks, down-sampled canvas, oxide accent on outlives, and the bleed-mask h1 with correct per-glyph stagger all land exactly as specified. Only nitpicks are layout-density (CTA crowding the right edge, specimen mono row breaking) and the grain being nearly invisible at this size — none break the design.

**Requirements confirmed met**

- Exactly one h1 with aria-label='Print that outlives us.' and two .line blocks
- Glyphs are inline-block .ltr spans; outlives uses ltr--spot (oxide red)
- Ink-bleed reveal via registered --bleed custom property driving radial mask-image
- Per-glyph --ox/--oy cycling (six-origin) resetting per line
- Stagger delays for line 1 (0.46 + i*0.034) and line 2 (0.62 + i*0.030 + 0.22 if spot) implemented exactly
- Canvas bloom rendered at downsampled store (innerWidth*0.28 / innerHeight*0.28), no dpr, single 30px blur
- Six blooms (4 ink, 2 oxide) with correct bx/by/r/a/P/phase/ax/ay parameters, single clearRect + 6 drawImage
- Reduced r * min(iw,ih) size and pulsing s = s0 * (1 + 0.12*sin(t*w3))
- Hairline grid via repeating-linear-gradients with radial mask fade
- Four registration marks at inset:26px in each corner via 4 background-image SVGs
- Layer stack matches: paper z0, canvas z1, rules z2, sheen z3, vign z4, page z10, grain z40
- All token values, responsive breakpoint tables (>=1920, >=1600, 1280-1599, 901-1279, max-height 850/720, <=900, <=560)
- Squared buttons with correct hover/active states and shadow
- Mobile menu overlay with transform/visibility transition, backdrop-filter blur(14px)
- Failure guards: paper-first, resting opacity 1, two-rAF entrance fallback, canvas fallback, prefers-reduced-motion reset
- Footer with 3 meta items and 3 links exactly as specified
- Telemetry hook with window.__DEMO__, ready, frames, effects, errors pushed in correct order
- Mobile burger toggle, Escape key, link click, and resize all close the menu

**Issues raised**

| Severity | Issue | Evidence |
|---|---|---|
| low | Header CTA 'REQUEST A PROOF' sits hard against the right edge with the box border visually touching the screenshot frame | At 1024px, --header-x reduces to 32px (901-1279 breakpoint); the long button 'Request a proof' hugs the right margin wit |
| low | Specimen row 'Cotton · 600 gsm' wraps to two lines at 1024px viewport | spec-sm line wraps 'Cotton · 600' then 'gsm' inside the 244px aside column — minor aesthetic break, not incorrect per sp |
| low | Top-right registration mark is visible bleeding through/around the header CTA button (z-index layering: marks z2 behind header z30, but the accent-wash CTA background is mostly transparent so the mark reads through) | Screenshot shows a small crosshair-like shape adjacent to the right of the header CTA in the top-right corner |
| low | Grain overlay (--grain-op 0.11) is barely perceptible at 1024x640; relies heavily on the muted film-grain SVG working in browsers | No obvious film grain texture visible in the screenshot — likely just under-subtle, not a bug |

---

*Generated 2026-10-05T15:16:34.131Z by `tools/reports.mjs`. Raw data:
[`data/crosscheck.json`](../data/crosscheck.json).*

---