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.

The restyle, page by page

primer.html (loading and intro)

Replace the SVG astrolabe and canvas stars with a full-bleed looping video background, the gold typed lines staying on top. Layer: - Base bed: cosmos_travel_bed_10s.mp4 (loop), with a subtle gold vignette. - Center motif: one orrery loop (orrery-loop.mp4 or Atlas_Orrery_Loop_v2.mp4) turning slowly while it loads, which also previews the in-app astrolabe. - As generation completes, cross to hero_constellation_lightup_v3.mp4 for the "it is ready" moment, then the BEGIN button. Keep the existing typed copy and the end card; only swap the visual layer from vector to video.

result.html (the soul-song playing)

Per your note, the in-app astrolabe should play 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. This makes the demo feel like the real product.

whatsinstore.html (the bridge into the investor video)

Restyle the ten clips to our gold motion. A short, beautiful montage of: cover-a-soul-song.mp4 (the soul song), plate-use-case-constellation.mp4 (a day with it), Affirmology_CouncilConstellation_v1.mp4 (your guides), plate-sky-calendar.mp4 (the sky), plate-future-walk-into-light.mp4 (becoming), each with one short gold caption. Optionally end on the title reveal, then auto-advance 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: 1. demo-heart-coherence-people.mp4 - real, warm people slipping into heart coherence with headphones, gold light, emerald tone, soft and human. (We have the stylized gold still, not real people in motion.) 2. demo-affirmation-deflect.mp4 - the affirmation bouncing off the guarded mind, then later slipping through (animate the existing plate-problem-affirmation-deflect.png concept). 3. demo-glowing-astrology-wheel.mp4 - a lush glowing zodiac wheel turning, distinct from the orrery, for variety (the plate-sky-calendar animation may already cover this). To keep the demo a touch different from the investor video, lean on the orrery loops and the heart-coherence and zodiac-wheel pieces here, and reserve the bridge and council heroes for the investor film. In practice, reuse is fine.

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

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.