Meng To turns screen recordings into Fable 5 landing-page prompts

• MengTo's workflow note says the Fable 5 build combined screen recording to prompt, video generation, and an extremely detailed prompt covering scroll interactions, libraries, and story flow.
• MengTo's KOISEI prompt specified the stack, asset URLs, color tokens, type scale, scroll films, shaders, responsive behavior, and an acceptance checklist.
• MengTo's process reply framed the sequence as brief to prompt to HTML to iterations, while MengTo's prompt tuning reply moved assets, source references, and prompt details ahead of final-output iteration.
• viktoroddy's Fable vs Opus post paired the same prompt-heavy landing-page format with a scroll-driven hero built from React, TypeScript, Vite, Tailwind, GSAP, and HLS.js.

The KOISEI prompt gets production-minded fast: MengTo's master prompt names three.js r160+, GSAP ScrollTrigger, Lenis, scroll-scrubbed videos, shader transitions, and a 60fps M1 acceptance bar. The source material was mixed-media, since MengTo's workflow note combined screen recording to prompt, video generation, and a section-by-section Fable 5 brief. A separate example from viktoroddy's Fable vs Opus clip points to the same format showing up as prompt products via MotionSites.

The attached 104-second demo in MengTo's Space Coffee post shows an interactive Space Coffee landing page generated from a prompt, including animations and a Book a Table interaction.

A later reply from MengTo's screen recording reply compressed the workflow to screen recording to a super detailed prompt, starting from a shorter prompt. In MengTo's workflow note, the longer version adds video generation and a Fable 5 prompt that specifies every scroll interaction, the libraries to use, and the storytelling flow section by section.

MengTo's tool reply said the prompt could be tried in Codex or Claude Code too. The interesting shift is portability: the artifact is the spec, not the generated page.

The KOISEI prompt reads like a compact creative director, motion designer, and front-end tech lead in one file. MengTo's inspiration reply says the build was inspired by the linked Reddit thread.

The prompt breaks the landing page into production constraints:

• Stack: Vanilla HTML/CSS/JS or Vite, three.js r160+, GSAP 3 plus ScrollTrigger, Lenis, scroll-scrubbed videos, no UI frameworks.
• Assets: exact URLs for hero river, koi river, temple canal, kimono lane, lantern water, night lantern, optional hero video, and two 12-second scroll films.
• Design system: CSS color tokens, Cormorant Garamond, Space Grotesk, Noto Serif JP, grain, paper vignette, and mat borders.
• Sections: loader, fixed nav, hero, manifesto, scroll film, horizontal gallery, day-to-night transition, night film, and footer.
• Motion: masked line rises, pinned scrubs, custom cursor states, mouse-reactive petals, ripple shader, noise-threshold dissolve, and mobile reduced-motion behavior.
• Performance: one shared WebGLRenderer, devicePixelRatio capped at 1.75, offscreen rAF pausing, lazy texture decode, and an M1 60fps acceptance target.

MengTo's technique reply called the prompt “seriously long” but said the technique was the part to adapt to a brand.

MengTo described the workflow as a token-control problem as much as a design problem.

• MengTo's process reply gives the sequence: brief to prompt to HTML to iterations.
• MengTo's HTML timing reply says going to HTML too early costs more tokens.
• MengTo's prompt tuning reply puts assets, source references, and prompt details before final-output iteration.
• MengTo's agent-cost reply says one detailed prompt was cheaper than sending an agent into multiple-prompt rabbit holes, and that Sonnet or Opus would not match the details.
• MengTo's Aura reply says Aura handled a single-prompt detailed landing page without the same costly agent loop.

That is the sharpest workflow detail in the thread: prompt refinement replaces page refinement until the spec is dense enough to run.

trq212 brought the same pattern from another angle: better Fable prompts came from discovering their own unknowns before asking for the finished artifact.

In trq212's AIE follow-up, they said an AIE discussion with @geoffreylitt helped refine the method and add quizzes. The same thread points to HTML artifacts used for finding unknowns, and trq212's linked-post reply shows the review loop around those artifacts, with a reader catch and a public thanks.

For creators, that puts research, quiz-making, and artifact critique inside the prompting process instead of before it.

viktoroddy's comparison framed the build as Fable one-shot versus Opus one-shot, then published the underlying prompt.

The prompt is a reusable scroll-hero recipe:

• App stack: React, TypeScript, Vite, Tailwind CSS v4.
• Video: fixed fullscreen background video, manually scrubbed by scroll, with requestAnimationFrame interpolation and a !video.seeking guard.
• Typography: floating text split into characters, animated out through GSAP ScrollTrigger.
• Navigation: pill nav with logo spin, hover fill, duplicate-label slide animation, ScrollToPlugin links, and mobile hamburger behavior.
• Second section: a glass panel slides up from below and tilts with mouse parallax.
• Dependencies: React 19, GSAP, HLS.js, Tailwind Vite tooling, lucide-react, motion, and react-router-dom.

The linked MotionSites prompt hub packages that style as a library of premium hero prompts and landing-page blocks, which makes the prompt itself feel closer to a design asset than a chat transcript.