Home / Ops / More in this area
Updated Jun 29, 2026 · Affirmology_EasingIn_Sequence_PasteCapsule.md
Paste this into the other chat.
AFFIRMOLOGY DEMO INTRO SEQUENCE (the easing-in into the film, then onward)
Goal: after a user submits their blueprint and the audio starts generating, ease them from a black screen into the Joe and Monika experience film with sound, then onward.
Flow, in order: 1. Cut to black, near silence. 2. Gold serif type fades up on black, one line at a time, slow and cinematic: "Your blueprint is being read." "Take a breath." "While it loads, watch this." 3. The last line resolves to a tappable BEGIN button (gold) with a small hint "tap to start with sound." 4. On tap, fade from black into the Joe and Monika film, playing with sound. 5. When the film ends, a single card: "Yours is ready." then a BEGIN button onward (to the audio player, or to the investor video).
The one critical detail: browsers block sound-on autoplay without a user gesture. The tap on BEGIN in step 3 is that gesture, so the film can play with audio immediately after. Do NOT try to silently autoplay the film with sound on page load, it will be muted or blocked. The tap is both the permission and better storytelling.
Style: deep emerald to black background, gold type (Cormorant Garamond serif for the lines, JetBrains Mono for the small hint), a faint starfield, soft gold dust, restraint. Black and silence carry the anticipation.
Timing: the easing-in card runs about 8 to 12 seconds. The film is about 3 minutes 40, generation is about 2 minutes, so the audio is always ready before the film ends, no spinner needed. If generation ever runs long, hold a gentle orrery loop on the "Yours is ready" card until status flips ready.
A complete, working single-file build of this already exists at Affirmology_PrimerIntro_EasingIn_v1.html (black trailer cards, tap-to-start, the film with sound, the ready card). Open it to copy the exact HTML, CSS, and JS.