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; Sample voice note; No microphone or publishing connection; Draft ready; Edit draft; Preview offer; Local preview only. Nothing has been published. 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. Align the live receipt text and controls inside the physical paper edges at both 960×600 and 1440×900; do not let copy drift over the printer chassis or off the paper. At mobile widths, remove the busy desk photo behind the heading and use clean paper with the same typography. Keep every edit and preview control at least 44px high. 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 sample-to-draft sequence. The record control plays a fixed sample transcript; label it Sample voice note and do not request microphone access or imply transcription is connected. Activating it starts a waveform during 0–1.2 seconds; transcript phrases resolve during 1.2–2.4 seconds; the Weekend Mug Sprint draft typesets during 2.4–4.0 seconds; during 4.0–5.0 seconds the $149 price and Draft ready state settle. Finishing the sequence must NEVER publish or mark the offer published. It creates a local draft and enables two real actions: Edit draft and Preview offer.

Make the draft useful after the animation. Edit draft opens a native, closable dialog with labeled offer-name, offer-description, and price-in-USD fields prefilled from the current draft. Use 1–50 characters for name, 1–160 characters for description, and a numeric price from $1 to $10,000 with at most two decimals. Validate trimmed names/descriptions and finite prices with specific inline errors; keep invalid typed values visible. Saving updates the receipt and displayed price from one draft object and returns to Draft ready, clearing any earlier preview-success state. Cancel and Escape discard unsaved changes and restore focus to Edit draft. Use no contenteditable surface, alert dialog, backend, or persisted personal data.

Preview offer is a separate explicit user action available only for a complete draft. It marks the receipt Local preview and announces Local preview only. Nothing has been published. Do not send a request, claim to create a public page, invent matched audience criteria, or display a Published badge. Repeating the sample resets the default offer and clears every previous edit/preview/error; ignore repeated triggers while a sequence is running. Escape during capture stops the sequence with an explanatory status and a usable retry control. Support idle, recording, processing, draft-ready, editing, invalid-draft, local-preview, stopped, visible-focus, and reduced-motion states. Announce material state changes with aria-live and preserve all task meaning without color.

Mark the settled document with data-preview-ready, the sample trigger with data-preview-action, and set data-preview-action-complete only once the full draft is ready. Under reduced motion or Save-Data, show the same complete draft immediately without publishing it; edit, validate, cancel, and preview must still work. The sample and all editing remain local to the page.

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 sample/edit/preview actions reachable without horizontal scrolling and preserve readable receipt text at 320px. With prefers-reduced-motion or Save-Data, show the completed editable draft immediately, disable decorative motion, and keep sample/edit/preview 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.