// Fourth Wall — landing page // Reuses the real app screens (screens.jsx) inside real iOS frames (ios-frame.jsx) // and the shared tokens/primitives (components.jsx). No redrawn mockups. const SAMPLE_JD = "Senior Product Manager — Stripe\n\nStripe is looking for a Senior PM to join the Billing team. You'll partner with engineering, design, and go-to-market to ship the next generation of subscription tooling.\n\nWhat you'll do:\n• Own the roadmap for a high-impact billing surface used by hundreds of thousands of businesses.\n• Write specs that engineering and design can run with.\n• Talk to customers — small startups, mid-market, and enterprise — and turn what you hear into product decisions."; const HEADLINES = { avoiding: ['The sixty-second video', "you've been avoiding for three weeks."], wall: ['Break the fourth wall.', 'One quiet line at a time.'], easier: ['Recording your intro video', 'has never been easier.'] }; // ───────────────────────── Showcase phone ───────────────────────── // Renders a REAL app screen inside a REAL iOS frame, scaled to `width`. function ShowcasePhone({ screen, width = 300, prefill = false }) { const scale = width / 390; const H = 830 * scale; const go = React.useCallback(() => {}, []); // no-op nav in the showcase const [jdText, setJdText] = React.useState(prefill ? SAMPLE_JD : ''); const [tone, setTone] = React.useState('Warm professional'); const [currentLine, setCurrentLine] = React.useState(3); const [lineStates, setLineStates] = React.useState( () => ['recorded', 'recorded', 'idle', 'idle', 'idle', 'idle', 'idle'] ); const [selfHidden, setSelfHidden] = React.useState(false); const [isRecording, setIsRecording] = React.useState(false); const [recordSecs, setRecordSecs] = React.useState(0); let content; switch (screen) { case 'home': content = ;break; case 'paste': content = ;break; case 'script': content = ;break; case 'warmup': content = ;break; case 'record': content = ; break; case 'link': content = ;break; default: content = ; } return (
{content}
); } // Phone with a small playbill caption beneath it function CaptionedPhone({ screen, width, prefill, code, caption }) { return (
{(code || caption) &&
{code && {code}} {caption && {caption} }
}
); } // ───────────────────────── Waitlist form ───────────────────────── function WaitlistForm({ accent, btnFg = fwTokens.paper, dark = false, compact = false }) { const [email, setEmail] = React.useState(''); const [done, setDone] = React.useState(() => { try {return !!localStorage.getItem('fw_waitlist');} catch (e) {return false;} }); const [submitting, setSubmitting] = React.useState(false); const onSubmit = async (e) => { e.preventDefault(); const val = email.trim(); if (!val || !/.+@.+\..+/.test(val)) return; setSubmitting(true); try { const res = await fetch('/api/waitlist', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: val }), }); if (res.ok || res.status === 409) { try { localStorage.setItem('fw_waitlist', val); } catch (_) {} setDone(true); } } catch (_) {} setSubmitting(false); }; const fg = dark ? fwTokens.paper : fwTokens.ink; const sub = dark ? 'rgba(253,246,227,0.62)' : fwTokens.mute; const fieldBg = dark ? 'rgba(253,246,227,0.06)' : fwTokens.paper2; const border = dark ? 'rgba(253,246,227,0.28)' : fwTokens.ink; if (done) { return (
You're on the list.

We'll write once — a single, quiet email the week it opens. Nothing before then.

); } return (
setEmail(e.target.value)} placeholder="your@email.com" aria-label="Email address" style={{ flex: 1, minWidth: 200, appearance: 'none', padding: '15px 16px', background: fieldBg, border: `1px solid ${dark ? 'rgba(253,246,227,0.22)' : fwTokens.rule}`, borderRadius: 2, color: fg, fontFamily: fwTokens.sans, fontSize: 15.5, outline: 'none' }} />

No spam, no countdown timers. One email the week it opens.

); } // ───────────────────────── Section heading (playbill) ───────────────────────── function PlaybillHead({ num, kicker, children }) { return (
{num} {kicker}

{children}

); } // ───────────────────────── The page ───────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "headline": "avoiding", "heroScreen": "record", "accent": "curtain", "texture": true } /*EDITMODE-END*/; function LandingPage() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const accent = t.accent === 'curtain' ? fwTokens.oxblood : fwTokens.ink; const hl = HEADLINES[t.headline] || HEADLINES.avoiding; const [isMobile, setIsMobile] = React.useState(() => window.innerWidth <= 560); React.useEffect(() => { const mq = window.matchMedia('(max-width: 560px)'); const handler = (e) => setIsMobile(e.matches); mq.addEventListener('change', handler); return () => mq.removeEventListener('change', handler); }, []); const scrollToForm = () => { const el = document.getElementById('get-access'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 40, behavior: 'smooth' }); }; const pageBg = t.texture ? 'radial-gradient(circle at 18% 8%, rgba(0,0,0,0.013), transparent 42%), radial-gradient(circle at 82% 88%, rgba(0,0,0,0.016), transparent 52%)' : 'none'; return (
{/* ===== Top bar ===== */}
Fourth Wall
How it works Privacy policy
{/* ===== Hero ===== */}
{/* left — promise + form */}
Now in private beta

{hl[0]}
{hl[1]}

Fourth Wall is a calm, deliberate way to record the introduction video you keep putting off. Paste the job you're applying for, and it writes you a script. Then it walks you through it one line at a time — a breath before you start, and no such thing as a perfect take.

{/* right — the real app */}
{/* ===== Quiet manifesto band ===== */}

It isn't a video editor. It isn't an AI app. It's the steady friend who sits with you while you do the thing you've been dreading — and then quietly hands you something you're proud to send.

{/* ===== How it works ===== */}
From a job posting to a video you'd actually send.
{[ { n: '01', title: 'Paste the job', body: "Drop in the posting you're applying for. We use it to draft your script — and nowhere else." }, { n: '02', title: 'Get a script', body: "Opening, middle, close. Edit any line, change the tone, regenerate a section. The words stay yours." }, { n: '03', title: 'Record one line', body: "A teleprompter, your script, and a record button. Hide your own face if it helps. No perfect take." }, { n: '04', title: 'Send a private link', body: "We stitch the takes, trim the pauses, and hand you a link only your recipient can open." }]. map((step) =>
{step.n} {step.title}

{step.body}

)}
{/* ===== Founder note ===== */}
A note Why I built this?

I've lost count of how many job applications I didn't finish because of a simple phrase: submit a 60-second introduction video.

It sounds simple. It never is. I'd open the camera, freeze, close the app, and tell myself I'd do it tomorrow. And on the days I actually pushed through — the takes that made it — I'd spend hours getting to something that felt mediocre at best. All that effort, all that dread, for a video I wasn't even proud of.

Every tool I tried was built for someone else. Content creators. Marketers. People who wanted to be on camera. Nobody had built anything for someone who just wanted to get through the application and move on with their life.

So I built it myself.

This app doesn't try to make you a better presenter. It doesn't give you ring lights or editing timelines. It just quietly takes the camera pressure away — so the hardest part of the video stops being you, and starts being nothing at all.

It's built by one person, slowly, on purpose. If you've ever closed a job application because of a video requirement, this was made for you.

Paul Peria
{/* ===== Privacy ===== */}
Your video stays yours.
{[ { t: 'A link, not a feed.', m: 'One recipient · no algorithm', b: 'A finished video becomes a private link you send to exactly one person. There is no public profile, no comments, no recommendation engine — and never will be.' }, { t: 'Your takes never leave the room.', m: 'RECORDED HERE · SEEN BY ONE', b: "The outtakes, the bad ones, the thirty-seventh attempt — none of it is stored, reviewed, or seen by anyone. Only the take you choose to send ever leaves." }, { t: 'Delete everything in one tap.', m: 'Your account · your call', b: 'Your takes, your scripts, your finished videos — all of it leaves with you, completely, the moment you decide to go.' }]. map((row, i) =>
{row.t} {row.m}

{row.b}

)}
{/* ===== Closing CTA (dark) ===== */}

When it opens, you'll be the first to know.

We're letting people in a few at a time, so the first sessions feel calm and unhurried. Leave your email and we'll save you a place.

{/* ===== Colophon ===== */}

Fourth Wall is in its early days, and being built one careful piece at a time. What you see here is a work in progress — some of the design and the way things work are likely to change before it opens.

Fourth Wall · 2026 The script · the warmup · the take Private beta
); } const _fwRoot = ReactDOM.createRoot(document.getElementById('root')); _fwRoot.render();