Analog Voice-to-Offer Studio for Creators

Build a high-fidelity responsive sales experience for PitchPop, a voice-note-to-offer workspace used by one-person creator businesses. The user is a ceramics teacher who can explain an offer naturally but loses momentum when writing and formatting a sales page. The first viewport must prove one job: a spoken idea becomes a credible, publishable offer without erasing the founder's voice.

Compose the experience as a full-bleed tactile workbench rather than a conventional marketing hero. Place one physical recorder chassis on a paper-and-steel desk, one transcript surface, and one long thermal receipt that becomes the offer. Do not use a split hero, dashboard sidebar, floating card grid, phone mockup, generic gradient, or decorative AI glow. The recorder, transcript, receipt, price, and publish control must read as one connected instrument.

Use this exact product content in the demonstrated state: PitchPop; Say it once. Sell it in your own voice.; Hold to record; Weekend Mug Sprint; A two-day guided studio sprint with a supply list, kiln timing, and a gentle critique.; $149; 3 audience criteria matched; Publish preview. Do not invent testimonials, customer counts, conversion lifts, revenue claims, or audience-fit percentages.

Art direction: warm paper #f2efe8, graphite #171715, tomato #e9563d, cobalt #1757b8, and steel #8c8a84. Use a bold grotesk display face, neutral sans for controls, and mono for transcript and receipt details. Favor square corners, printed rules, tactile switches, registration marks, restrained shadows, and visibly crafted spacing. Product UI and receipt text must remain semantic HTML; if a desk or recorder image is used, it must be an original generated raster with blank areas reserved for the live interface.

The signature interaction is a deterministic five-second recording-to-publish sequence. Activating Hold to record starts a waveform during 0–1.2 seconds; transcript phrases resolve and underline during 1.2–2.4 seconds; the Weekend Mug Sprint receipt typesets during 2.4–4.0 seconds; during 4.0–5.0 seconds the $149 price, three audience criteria, and Publish preview success settle. The action must be repeatable and must finish in a stable generated state.

Implement distinct idle, recording, processing, generated, publish-success, focus, and error states. Make the main action keyboard operable, expose live status through an aria-live region, retain a visible focus ring, and never communicate status by color alone. Mark the settled document element with data-preview-ready and the interaction trigger with data-preview-action.

At desktop, art-direct the full workbench inside a 16:10 composition. Below 720px, stack recorder, transcript, and receipt in that task order; keep the record/publish action reachable without horizontal scrolling and preserve readable receipt text at 320px. With prefers-reduced-motion or Save-Data, show the completed offer poster immediately, disable decorative motion, and keep record/publish controls usable.

Return one complete standalone responsive HTML document with internal CSS and JavaScript. Use no framework, external runtime, lorem ipsum, placeholder image box, SVG mockup, copyrighted logo, or explanatory text outside the designed product. Include realistic loading and error feedback and one unobtrusive source-prompt link.