Header 04 Pixa

The exact prompt

ADAPT THIS JIRO 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".

Acceptance criteria (15)

1. the section's own structure is present (headings, cards, panels as the brief describes)
2. exactly one <h1> and real header/main/footer landmarks
3. no external media: no img src, no video, no remote URL
4. no horizontal overflow at 390 / 768 / 1440
5. prefers-reduced-motion leaves the page static and readable
6. window.__DEMO__.ready becomes true within 5s
7. window.__DEMO__.frames advances (>= 20 frames in 1.2s)
8. window.__DEMO__.errors is empty
9. zero console errors and zero page errors
10. zero failed network requests
11. exactly one <h1> with non-empty text
12. header, main, footer landmarks present
13. no horizontal overflow at 390 / 768 / 1440 widths
14. no horizontal overflow after 2s of animation
15. prefers-reduced-motion: reduce leaves the page usable and errors empty