Home / Video / Assets, Tooling, and Strategy

Session Handoff: Video + Demo-Web Build (portable continuity capsule)

Updated Jun 18, 2026 · Affirmology_SessionHandoff_VideoBuild_v1.md

Session Handoff: Video + Demo-Web Build (portable continuity capsule)

Purpose: paste-and-resume. With this file plus Affirmology_PROJECT_STATE.md, a brand-new session resumes the website-video and demo-web work with zero context loss. This is the bridge so we can start a fresh session (where the new taste skills are loaded) without losing anything. No em dashes anywhere.

Cloud status (2026-06-18): the Studio is LIVE on Render + R2

The Studio engine now runs in the cloud, full render pipeline proven (audio + PDF in R2). Service: https://affirmology-studio-api.onrender.com (private repo jeffparkerlove22/affirmology-studio, engine vendored code-only). Auth on; corpus + music bed pulled from R2 on boot. ONLY open piece for Jeff + Cowork: wire R2 public serving + media.affirmology.ai, then repoint studio.affirmology.ai to Render. Full detail in Affirmology_PROJECT_STATE.md section 19.

How to resume (new session, do this first)

1. Read Affirmology_PROJECT_STATE.md (the source of truth).
2. Read this file.
3. Verify the new taste skills loaded: try design-motion-principles and emil-design-eng. If present, use them on the film. design-motion-principles is also readable at CLAUDE/_SHARED/CLAUDE/design-motion-principles/.
4. Continue at "The active build" below. Files deliver as present_files cards, never by path. Jeff is the eyes (the sandbox cannot render a browser).

The active build: the cosmos primer (pre-audio loading film)

Direction LOCKED with Jeff. His exact feedback, build to all of it:

• 3D WebGL cosmos. A 2001: A Space Odyssey quantum-leap flythrough. Mega cosmic movement, nebula in the brand greens and golds, camera always pushing forward through space. This is THE change that makes it cinematic. A dead gap is fine ONLY if it reads as "going deeper into the vortex."
• The natal chart hits EARLY, in the first two or three seconds, on "the sky made a shape." It draws its lines in and rotates slightly, with cool words popping. NO zodiac figures at the chart. Just nail the chart, its movement, its drawing, its slight rotation, plus the word stream.
• Zodiac constellation figures (the ram, the lion, the scales) move to LATER, near the end, as the resolve. Elegant gold line-art formed from real stars, built so any single one is easy to cut if it looks cheesy.
• Human Design: ABSTRACT. Just the correct center shapes (triangles, squares, the G diamond) in the correct layout, NO connecting lines. A few light up differently, in sequence. Keep it SHORT (Gene Keys is the more interesting one).
• Gene Keys: make it interesting. Animate the sequences. The Activation sequence (Life's Work, Evolution, Radiance, Purpose) glows in order, then the Venus sequence, then the Pearl sequence. Either on the full wheel, or swap to each sequence's four-node shape lighting up boom-boom-boom. Cooler text on the lines.
• Brain: DROP the skull and spine (Jeff: "looks horrible"). Build a genuinely cool glowing brain. Reference Jeff sent: a realistic glowing neural brain with a geometric low-poly halo (wrong colors, do it in gold/green). A neural particle cloud or glowing brain reads best. Keep it SHORT. Then show the truth "sticking and clicking," the absorption, visually.
• Text: smooth, varied, NOT harsh. Sometimes typewriter. Lines can come in white then brighten to gold, with sparkles, glistens, swooshes from the green nebula. Stagger multi-line text so the second line arrives a beat after the first, never both at once. Word-by-word blur-in (Emil's enter recipe: opacity 0 to 1, slight y, blur 6 to 8px to 0, smooth custom ease, never linear).
• Transitions: morph between scenes, fade in and out. A warp or star-streak at the bypass moment.
• Audio delivery beat: show the audio going into the ear, into the brain, down the spine, all glowing, a Vitruvian-man or meditating-with-the-cosmos figure, transcendent light in and out. Slick, not cheesy.
• Fill the gaps: there should always be either text or a compelling animation on screen. No dead empty stretches.

Tech approach: - One self-contained HTML file. Inline GSAP, Three.js, and the VO base64 (no CDN, so it can never break like the old CDN-GSAP did). - Grab the libraries: in a temp dir, npm i three@0.128.0 (it ships build/three.min.js, a UMD ~603KB) and npm i gsap@3 (dist/gsap.min.js ~73KB). Read those min files and inline them in <script> tags before the film script. - ONE GSAP master timeline, created paused, scrubbed by the audio clock: a rAF loop sets tl.time(vo.currentTime). This locks every visual to Lily's voice so nothing drifts. Cosmos speed/warp is a proxy variable tweened on the same timeline. - Apply design-motion-principles in audit mode and emil-design-eng easing. Custom curves, restraint, no linear. Include a prefers-reduced-motion fallback (mandatory). - The sandbox CANNOT render a browser, so it cannot self-verify. Build carefully, deliver, iterate with Jeff watching. - History: Affirmology_Primer_v6.html (in-place patch of the old file; Jeff: poor, abandon). Affirmology_Primer_B1.html (first from-scratch GSAP rewrite, audio-clocked; Jeff: right direction, still flat). Affirmology_Primer_B2.html BUILT 2026-06-17 (Claude Code) and SELF-TESTED with Playwright keyframe screenshots: Three.js flythrough cosmos (nebula in brand green/gold, camera always pushing forward, birth point ignites at 0s), natal chart draws in early (~2.6s) and rotates, abstract HD centers light in sequence (no lines), Gene Keys Activation/Venus/Pearl sequences glow in order with named nodes, glowing neural-particle brain (skull dropped) with firing lines + faint low-poly aura, warp star-streak at the bypass (45.8s), audio-into-body figure with soundwave + spine glow (68s), zodiac constellation line-figures resolve near the end (101s), staggered word-by-word blur-in white-to-gold text. Built template + builder at /tmp/affm_build/ (primer_b2.template.html -> build_primer.py inlines three.min.js 0.128 + gsap 3 + VO base64 -> the 2.99MB self-contained B2). Emil easing applied (expo.out enters, power2.in subtler/faster exits, never linear) and design-motion-principles AUDIT run: passed; the one fix was reduced-motion now calms the 3D cosmos (gentle drift, no warp/spin/parallax), not just the text. AWAITING Jeff's eyes for taste pass (the sandbox cannot watch it; refinements become new tasks). To rebuild after edits: edit the template, cd /tmp/affm_build && python3 build_primer.py, then node shoot.js <file> <outdir> "<comma times>" to re-screenshot.

The voiceovers (already generated, DO NOT regenerate)

ElevenLabs Lily, voice id pFZP5JQG7iQjIQuC4Bku, model eleven_multilingual_v2, voice_settings stability 0.45 / similarity 0.85 / style 0.15 / speaker_boost on / speed 0.7. Key is ELEVENLABS_API_KEY in affirmology-agent/.env (creator tier, ~85k chars spare). Generated through /v1/text-to-speech/{voice}/with-timestamps for word timings. Reachable from the Cowork sandbox via curl/urllib.

PRE-AUDIO: Affirmology_TrailerVO_Lily_synced_v2.mp3 (113.6s). Script is the Sol trailer script with the systems line reordered to match the visual order (astrology, HD, Gene Keys): "The stars that placed you. The centers that move you. The keys that code you." Plus two brand touches: "It guards the programming the world layered over you." (after "protects who it already thinks you are") and "A software update for your subconscious. The first step in becoming who you were written to be." (before "Your audio is almost ready"). Word anchors, seconds: 0.0 the night you were born; 8.3 that shape is you; 15.6 the stars that placed (ASTROLOGY in); 17.8 the centers that move (HUMAN DESIGN in); 19.9 the keys that code (GENE KEYS in); 22.4 so much to learn; 24.2 so little time; 26.8 the brain protects (BRAIN in); 30.5 it guards the programming; 34.6 maybe that is why the affirmations never worked; 45.8 what if you did not have to try (BYPASS turn); 49.4 hear it, feel it, become it; 65.2 it works on you; 68.0 your blueprint turned into sound (AUDIO delivery); 92.9 a software update for your subconscious; 96.5 the first step in becoming; 100.3 your audio is almost ready (BLOOM/end); 111.4 coming home to yourself. Ends 113.6.

POST-AUDIO: Affirmology_WhatsInStore_VO_Lily_v2.mp3 (71.3s). Refined use-cases plus the three-step plus the new closer. Word anchors, seconds: 0.0 that was one audio; 2.0 imagine the whole library; 5.65 only the beginning; 7.35 imagine one for every part of your life; 11.3 one to prime you before a breathwork or a sacred journey; 15.8 one for your morning walk, your run, the gym; 20.0 one to play as you fall asleep; 24.2 for your relationships; 25.9 your abundance; 27.7 the patterns you came here to heal; 30.9 understand your Gene Keys journey more deeply; 34.8 a new audio with every new moon; 40.2 a guide that knows your whole blueprint; 42.5 ready whenever you need it; 44.4 Astrology; ~45.5 Gene Keys; 46.8 Human Design; 48.6 Attune to you; 50.5 Know yourself; 52.1 Align to your blueprint; 54.0 Become who you were written to be; 57.1 One blueprint; 59.2 Many doors; 61.3 a lifetime of becoming; 64.0 Welcome home to who you already are; 68.2 Your soul song is just the beginning. Ends 71.3.

Open tasks (priority order)

1. B2 cosmos primer: BUILT + self-tested 2026-06-17 (see history line above). NEXT = Jeff watches it and gives the taste pass; refinements become new tasks. Likely candidates from the screenshots: push the brain silhouette a touch more brain-like, make the warp even punchier, and enrich the audio-delivery body figure.
2. Post-audio film Affirmology_WhatsInStore_v2.html to v3: swap in the v2 VO, apply the new lines, make audios plural, land the three-step as three staggered beats (Know yourself / Align to your blueprint / Become who you were written to be), closer "One blueprint. Many doors. A lifetime of becoming." into "Welcome home to who you already are." Keep it lean. Subtle equalizer pulse and a new-moon glyph only. Full before/after in Affirmology_WebVideo_Changes_BeforeAfter_v1.md.
3. Demo results page. PROGRESS 2026-06-17 (Claude Code): - (a) Safari SCROLL STALL: FIXED + proven in real WebKit. Root cause was in whatsinstore.html (the fused post-audio reel is where the report+downloads endcard actually lives, result.html redirects there on audio-end). Its body is position:fixed;overflow:hidden and the #cta endcard was a fixed overflow-y:auto container, which stalls iOS momentum scroll so the report below the buttons was unreachable. Fix: toEnd() now adds body.ended, and CSS body.ended{position:static;overflow:auto;height:auto} + body.ended #cta{position:relative;overflow:visible;min-height:100vh} switches to NATIVE document scroll. Verified with Playwright WebKit (iPhone viewport): page scrolls top-to-bottom, report reachable. Decorative star/aura layers stay fixed behind. - (c) DOWNLOAD BUTTONS: DONE. whatsinstore.html #dlAudio/#dlReport were already wired to the real WIS.audio_url/WIS.pdf_url from /api/status/{job}. result.html was the mock (txt blob + unwired audio); now real-first: download-report opens results.pdf_url (mock text only as fallback), download-audio opens results.audio_url, wired on both the renderReport (demo) and renderBlueprint (real) paths. Also hardened the result.html tap-to-begin .overlay to drop out of hit-testing after fade (visibility delayed transition). - (b) Rising + more Gene Keys + intro sentences: DONE 2026-06-17, as a SURFACING fix, not an engine change. Jeff's directive: the on-screen blueprint must be the SAME pool of data as the downloadable report, just a less-busy, smaller version. It already is by architecture: sacred_audio_report.py writes one *_SacredAudioReport_payload.json (the pool); the PDF renders it full; /api/status _read_blueprint reads that same payload. The gap was the on-screen showed too thin a slice. Verified the real Jeff payload already contains Rising (astrology: Sun/Moon/Rising/Midheaven/North Node), the 4 Gene Keys, and the what_paragraph intro. Fixes: (1) api.py _read_blueprint now also passes intro (what_paragraph) + throughlines from the same payload; (2) result.html renderBlueprint widened to Sun/Moon/Rising + all 4 Gene Keys + an intro sentence (was slice 0,2 = Sun/Moon only, Rising dropped); (3) result.html deliver() now prefers the real shared-pool blueprint and only falls back to the hardcoded mock with NO backend (kills the one path that could diverge from the PDF); (4) whatsinstore.html renderWisReport gained the intro line above (already showed Rising via slice 0,4). Verified with Playwright: result.html on-screen now shows Sun/Moon/Rising + 4 keys + HD + numerology + intro, all from the same pool. The LOCKED demo render path and the PDF generator were NOT changed (no audio/script impact). If Jeff later wants MORE keys than 4 in the pool itself (Venus/Pearl spheres), that is the one remaining engine enrichment in sacred_audio_report.py. - (d) EMAIL: still OFF, needs RESEND_API_KEY + FROM_EMAIL on the Cloudflare worker (task 4; outward-facing, get Jeff's go before enabling). - HELD: the index.html intake cosmos opening (item 4 below) is the "very short pre-animation," film-adjacent. Jeff paused all film work 2026-06-17 to figure out how to prompt the films better after the B2 iteration load. Do not build it until that direction lands.
4. Opening intake sequence (affirmology-site/index.html): transform the opening before the birth-info form, in the cosmos direction. Jeff wants this for the second version.
5. PDF overhaul, ALL of them: make every PDF premium with the new tooling. Business and financial docs (Affirmology_FriendsAndFamilyRound_v2, Affirmology_InvestorBrief, Affirmology_ExecSummary, Affirmology_TermSheet, the data-room one-pagers, and the North Star as a designed PDF) use react-pdf, or HTML to PDF with frontend-design + emil-design-eng + brand-design-md. The demo's Sacred Audio Report PDF (backend, weasyprint) gets the same premium pass. The standalone docs fit the Cowork lane; the backend report PDF fits the Claude Code lane.

Decisions locked this session (do not relitigate)

• Video tooling: build on-screen graphics in BOTH Remotion AND Hyperframes in parallel and A/B per need. GSAP for the live in-browser films. Three.js for the cosmos. Higgsfield generates footage for the investor film. Hyperframes (HeyGen, HTML+GSAP to video, agent-native) is a strong fit. Research: Affirmology_VideoAsCode_Research_v1.md. Map: Affirmology_VideoToolingPlan_v1.md. Mac render prereqs confirmed installed: Node v26, FFmpeg 8, Homebrew 6.
• Raise/capital: NOT raising millions, NOT courting VCs. Roughly $30k to $250k to break through, then profitable via ads, affiliates, events, product. Direct Wyoming LLC units are real ownership; distributions realistically 12 to 24 months out, NOT day one (Jeff was explicit). "Early is a steal" rests on the low entry valuation on a live product. Docs: Affirmology_NorthStar_v1.md (Jeff says still needs work), Affirmology_FriendsAndFamilyRound_v2.pdf (v2 supersedes v1), Affirmology_CashCowReturns_Note_v1.md, Affirmology_InvestorDataRoom_Blueprint_v1.md. Investor materials are LOWER priority than the video right now.
• Brand rules: no em dashes anywhere; "Subconscious Operating System" is the core frame; Sol = Soledad, never "Soul"; Joe Dispenza only as an external reference, never our method (use "heart coherence breath"); everything chart-driven; style shared, content never shared; deliver files as present_files cards.

Config note (the prompt-stalling fix)

Set auto mode in the USER settings only (~/.claude/settings.json; project and local settings ignore auto): {"permissions":{"defaultMode":"auto"}}, then restart Claude Code. Fallback: launch claude --permission-mode bypassPermissions, never with sudo or as root.

New capabilities (installed 2026-06-17)

• PDF generation, three premium routes: (1) react-pdf for designed business docs (real layout, tables, charts, fonts, clean page breaks: invoices, proposals, one-pagers, reports) works now; (2) Typst for long/dense TeX-grade docs, needs brew install typst once; (3) HTML to PDF, design a page with the design skills then render it for pixel-perfect brand/marketing PDFs. The old pdf skill still handles processing (extract/merge/split/forms/OCR). For our docs: react-pdf for business/financial, HTML to PDF for brand pieces.
• Web animation and beauty skills: ui-ux-pro-max (instant design system), frontend-design (anti generic-AI taste), emil-design-eng (premium polish and motion), design-motion-principles (build and audit animation), animation-components (anime.js, React Spring, Lottie), extended-3d-scroll (Lenis smooth scroll, Barba transitions), brand-design-md (exact tokens of 62 top brands), on top of GSAP and Three.js.
• Component MCPs (Claude Code): shadcn (pull components by natural language inside a project) and Magic UI (animated components). Run /mcp in Claude Code to confirm they are connected.

Hybrid workflow: Claude Code vs Cowork (segmentation)

Both read the same AFFIRMOLOGY folder and the same ~/.claude skills, so files and skills are shared. Division of labor: - CLAUDE CODE (heavy, Mac-powered, self-tests, deploys): build the cosmos film and the post-audio film (it can render and screenshot its own output to verify, the gap we cannot close in the sandbox); the demo-site redesign (result.html, intake, whatsinstore) and Cloudflare deploys; backend changes (Rising sign and more Gene Keys in the report generator, the Sacred Audio Report PDF overhaul, the Resend email worker); Remotion and Hyperframes renders. - COWORK (iterate, lighter, content): review what Claude Code built, watch the films, pick variations, drive small and medium refinements directly in the shared files; overhaul the standalone business and brand PDFs with react-pdf and HTML to PDF; copy, scripts, planning, research, investor docs. - SYNC RULE: whichever chat does heavy work updates this file and PROJECT_STATE at the end, so the other chat resumes cleanly.