Home / Ops / More in this area

Affirmology Demo Site, Video Restyle Plan and Asset Audit (v1)

Updated Jun 28, 2026 · Affirmology_DemoSite_VideoRestyle_Plan_v1.md

Affirmology Demo Site, Video Restyle Plan and Asset Audit (v1)

Goal: replace the hand-drawn vector and canvas graphics in the demo experience with our real cinematic video, so the whole flow (soul-song loading, the playing audio, the bridge into the investor video) feels gold and alive. Audited the site and our asset pool. No em dashes anywhere.

The current demo flow (what plays, in order)

1. affirmology-site/primer.html ("Your Soul Song") - the LOADING and intro while the audio generates. Polls /api/status/JOB, then sends the user to result. THE PROBLEM IS HERE: it draws a constellation and astrolabe with inline SVG strokes plus a canvas star-field and CSS keyframes. That is the "horrible vector graphics."
2. affirmology-site/result.html - the soul-song PLAYER (the audio plays here).
3. affirmology-site/whatsinstore.html ("What's In Store") - the POST-audio transition. It already embeds ten short videos and equalizer bars, then leads onward.
4. The investor video.

What we already have to work with (no generation needed)

Astrolabe / orrery motion (the in-app player look): - affirmology-app/assets/orrery-loop.mp4 (the exact in-app astrolabe player loop) - Brand/animations/Atlas_Orrery_Loop_v1.mp4, _Loop_v2.mp4, _FullLoop_a.mp4, _FullLoop_b.mp4, _Continuous_a.mp4, _Continuous_b.mp4, _Boomerang_v1.mp4 Cosmic beds and brand motion: - VideoEditKit/grand_bridge/cosmos_travel_bed_10s.mp4, soul_formation_3d_v1.mp4, hero_person_formation_10s.mp4, hero_constellation_lightup_v3.mp4, hero_lightup_SLOW.mp4 - Title reveal: grand_bridge/affirmology_NAMEMORPH_GOLD_buildON.mp4, overlay_soulsong_subtitle.mov Gold info animations (8 to 15s each), in Brand/photos/video/: - cover-a-soul-song.mp4, plate-systems-to-audio.mp4, plate-sky-calendar.mp4, Affirmology_CouncilConstellation_v1.mp4, plate-use-case-constellation.mp4, plate-product-pipeline.mp4, plate-future-walk-into-light.mp4 Stills that can drive a slow push (Ken Burns) if needed: plate-heart-coherence-listening.png, plate-problem-affirmation-deflect.png, plate-two-worlds-labeled.png, the cover plates.

LOCKED FLOW (2026-06-28, supersedes the old loader plan below)

The demo experience is now one clean arc. FEEL it, RECEIVE yours, UNDERSTAND it. 1. Link to the demo. Sign in + NDA. Enter blueprint info (name, birth date, time, place). 2. Generation begins. EASING-IN TRAILER (8 to 12s), then the Joe and Monika EXPERIENCE FILM plays while the audio generates. (Lengths line up: gen ~2 min, film ~3:40, so the audio is always ready before the film ends.) This is the priming, emotional, not a lecture. 3. "Yours is ready." card, then BEGIN. 4. Their SACRED AUDIO plays with the in-app astrolabe (orrery) visual, exactly like the product. 5. The "what it is" sequence: the cosmos + title reveal, then the FIVE-SYSTEMS EXPLAINER (taught now that they have felt it), then what is in store, then it hands to the investor video. The experience film replaces the abstract loader entirely. The big cosmos-and-title reveal lives at step 5 (and in the investor film), not in the loader, so it lands once.

UPDATED FILE: Jeff re-cut the experience film. Current master on disk: Affirmology Experience Video.mp4 (project root) and CLAUDE OUTPUTS/Affirmology/Affirmology_VideoEditKit/v7_current_cut.mp4. Jeff to confirm/drop the final version to use; link it here once dropped.

The restyle, page by page

primer.html (loading and intro) - NOW THE EASING-IN + THE EXPERIENCE FILM

The abstract vector/loader is retired. Structure of primer.html: 1. EASING-IN TRAILER (the little movie-trailer beat). After they submit their blueprint: cut to black, a beat of near silence, then quiet gold type fades up on black, one line at a time, cinematic and slow: - "Your blueprint is being read." (hold) - "Take a breath." (hold, more black and silence) - "While it loads, watch this." then a tappable BEGIN, a soft swell, and fade into the film. Keep it 8 to 12 seconds. Black, silence, restraint. Anticipation, not information. 2. THE FILM plays from that tap (see autoplay note). 3. When the film ends: one card "Yours is ready." then BEGIN into result.html. If generation runs longer than the film, hold a gentle orrery loop (affirmology-app/assets/orrery-loop.mp4) on that card until /api/status flips ready.

AUTOPLAY NOTE (answers "will it autoplay?"): browsers block sound-on autoplay without a user gesture. The submit click plus one tap on the easing-in card both count, so make the last line a tappable BEGIN. That tap lets the film play with sound immediately. Do NOT try to silently autoplay the film with audio on page load, it will be muted or blocked. The tap-to-start card is also better storytelling.

result.html (the soul-song playing)

The in-app astrolabe plays here while the demo audio plays, exactly like the app. Set the player background to affirmology-app/assets/orrery-loop.mp4 (or Atlas_Orrery_FullLoop_a.mp4) looping for the full duration of the audio, with the gold progress and play controls over it.

whatsinstore.html (the "what it is" sequence, post-audio)

Now this is where we TEACH, because they have felt it. Sequence: 1. The cosmos + title reveal (the NAMEMORPH title + soulsong subtitle), the brand landing. 2. THE FIVE-SYSTEMS EXPLAINER. One screen per system, a relevant moving visual behind each and one warm line of what it does for the person (typeset gold over the clip). Keep each 4 to 6 seconds: - Western astrology, a glowing zodiac wheel (plate-sky-calendar.mp4 or the to-generate demo-glowing-astrology-wheel.mp4): "Understand yourself, your nature, and the timing of your life." - Vedic astrology, the orrery (orrery-loop.mp4): "See your deeper path, and when things are meant to ripen." - Human Design, a bodygraph in space (to generate, demo-hd-bodygraph.mp4): "How your energy is designed to move through your body, unlike anyone else." - Gene Keys, a Gene Keys wheel in space (to generate, demo-genekeys-wheel.mp4): "Turn your wounds into your gifts, and unlock your path to abundance and purpose." - Numerology, a numbers/grid motif (the systems-to-audio clip can stand in, plate-systems-to-audio.mp4): "The core numbers you are here to live out." Then a unifying line over plate-systems-to-audio.mp4: "Five systems, one you, sung back as a song." 3. WHAT IS IN STORE, a short gold montage: plate-use-case-constellation.mp4 (a day with it), Affirmology_CouncilConstellation_v1.mp4 (your guides), plate-sky-calendar.mp4 (the sky as your calendar), plate-future-walk-into-light.mp4 (becoming), one short caption each. 4. Hands to the investor video.

What we should still generate (hand to the image/video chat)

These exist only as stills or not at all, and the demo wants them as moving footage. The in-space spinning-chart idea now lives in the FIVE-SYSTEMS EXPLAINER (step 5), one signature chart per system, each emerging from star-dust in space, slow reverent turn, gold on emerald: 1. demo-glowing-astrology-wheel.mp4 - a lush glowing Western zodiac wheel turning in space (the Western astrology screen). plate-sky-calendar.mp4 can stand in until generated. 2. demo-hd-bodygraph.mp4 - a glowing Human Design bodygraph in space, channels lighting up (the HD screen). 3. demo-genekeys-wheel.mp4 - a glowing Gene Keys wheel / 64-gate ring in space (the Gene Keys screen). 4. demo-heart-coherence-people.mp4 - real, warm people slipping into heart coherence with headphones, gold light, emerald tone, soft and human (optional, for the audio or what-is-in-store beats). 5. demo-affirmation-deflect.mp4 - the affirmation bouncing off the guarded mind, then slipping through (animate plate-problem-affirmation-deflect.png; optional here, mainly an investor-film beat). Prompts for the three chart-in-space clips should be added to Affirmology_Higgsfield_GenerationQueue_v1.md.

The transition sequence, audited (length and existence)

Correction on the structure: the investor video OPENS on the Joe and Monika story (people, emotion), and the cosmos and title come later, as the bridge from the story into the pitch. So the demo does NOT hand into a cosmos open, it hands into a human story. That changes the recommendation, for the better. - The astrolabe playing during the demo audio (result.html) should run the FULL length of the audio, looped. That is the main "transition," and it should exist. - The post-audio bridge (whatsinstore) should be SHORT and should NOT reuse the big cosmos-and-title reveal, because that reveal belongs to the investor video's mid-film bridge. Reserve it there so the title moment lands once and lands hard. - So make the demo bridge a distinct, gentle 10 to 15 second beat using the orrery, the glowing zodiac wheel, and the heart-coherence people, resolving on a simple "the truth of you, sung back to you" card, then it hands into the investor video, whose human story open is a deliberate, welcome contrast to the cosmic demo. Cosmic to human is a good cut. - My pick: keep the short bridge, but built from the orrery and heart-coherence and zodiac pieces (not the cosmos-and-title), so the demo feels a touch different and the title reveal is saved for the film. We can also go even tighter (hold the orrery 2 to 3 seconds on the card, then the story) if you want minimal.

The 2-minute loader, epic without overlapping the investor video (SUPERSEDED 2026-06-28)

RETIRED. The loader is no longer an abstract anticipation ritual, it is the Joe and Monika experience film (see LOCKED FLOW above). Kept below only for the reasoning, which still informs the easing-in trailer and the five-systems explainer. The loader plays while the user's soul song generates (around 2 minutes). The trap is making it a mini pitch, which then repeats the investor video. The fix is to split the two by PURPOSE, so they share the visual world but never the content. - The loader is a first-person ANTICIPATION RITUAL, not a pitch. Its only job is to build reverent excitement for the song being made FOR THEM, right now. It is about the user and the moment, not the company. - Stage it to the real generation, so it feels true and earns the time: "Reading your Western chart" then "your Vedic chart" then "your Human Design" then "your Gene Keys" then "your numbers" then "Your council is composing" then "Voicing your song" then "Ready." The current primer already polls /api/status, so tie the stages to that and the wait never feels empty. - Visual emphasis that is DISTINCT from the investor video: the orrery and the chart wheels assembling, the five systems converging, the council composing (the council constellation turning), gold dust and god-rays. Reserve the Joe and Monika story, the problem and method and market beats, and the big cosmos-and-title reveal for the investor film. - Shared LANGUAGE, separate CONTENT: same gold on emerald, same orrery and constellation motifs, same type. That makes them feel like one brand. No shared sentences, no shared story beats, no repeated title reveal. That is what keeps it from feeling redundant when they watch the investor video next. - It also serves non-investors: anyone doing the demo gets a beautiful, personal "your song is being born" sequence, which primes the payoff when the soul song plays. - Length and looping: target the real generation time, loop the cosmic bed gracefully if it runs long, and land the BEGIN end card the moment it is ready. Do not hard-code 2 minutes.

Implementation note (for Code)

This is a web change, not a Palmier task. The fix is to swap the SVG/canvas blocks in primer.html, result.html, and whatsinstore.html for full-bleed looping <video> elements pointing at the assets above (host the mp4s alongside the pages or in the Cloudflare bucket), keeping the existing gold typography and buttons on top. The pages already use the brand palette and fonts, so only the visual layer changes.