feat(videos): real LDVP gifs + narration-synced highlight + auto-fit stat#451
Merged
Merged
Conversation
…stat
Three template-level fixes that apply to every program, not just chc:
1. Cycle steps use the real Learn/Deliver/Verify/Pay animated gifs.
Pulled the four marketing gifs from connect.dimagi.com's prelogin
surface (the same ones on the homepage) into
public/cycle/{learn,deliver,verify,pay}.gif and replaced the
placeholder numbered circles in CycleStep with <Gif> from
@remotion/gif (4.0.460, matching the renderer's Remotion version).
The accent-color ring around the gif still grows and intensifies
when a step is highlighted.
2. Cycle highlight walks at the narration's keyword positions.
The old behaviour split the cycle beat into four equal quarters
regardless of when the voiceover actually said each word. The new
Cycle component parses spec.narration.by_beat.cycle, finds the
word index of "learn"/"deliver"/"verif"/"paid" (stem-matched, so
"verified" hits, "payment" doesn't), and uses those normalized
positions as the highlight transitions. Falls back to even
quarters if any keyword is missing or out of order.
For the chc spec ("Connect runs a cycle: workers LEARN the
protocol, DELIVER care in homes, evidence is VERIFIED through the
app, then they are PAID."), word positions land at 27%, 41%, 68%,
100% — meaningfully different from 25/50/75/100.
3. StatCard auto-fits the headline number to the frame.
The old fixed 280px overflowed for "1,000,000+" (11 chars) — the
"1," at the left and "+" at the right got clipped off the canvas.
Now the size is computed from the string length using an
empirically-measured 0.75em-per-glyph constant: 2200 / chars,
clamped to [120, 280]. Short values like "80%" stay punchy at the
280 cap; "1,000,000+" lands at 200px with breathing room. Also
added whiteSpace: nowrap so the commas aren't treated as
line-break opportunities and a max-width on the wrapper.
All three changes were eyeball-verified by extracting frames from a
chc/run-001 render at t=4.5s (Learn), 6.5s (Deliver), 9s (Verify),
11s (Pay) and 25s (headline stat).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This was referenced May 18, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Three template-level fixes that land for every program (chc, mbw, kangaroo-mother-care, …) — not just one spec:
connect.dimagi.com's prelogin surface, used in place of the placeholder numbered circles. Animated via@remotion/gifso each frame composites into the rendered mp4.spec.narration.by_beat.cycle, find word index of "learn"/"deliver"/"verif"/"paid" (stem-matched), use those normalized positions. Falls back to even quarters when any keyword is missing or out of order. For chc, positions land at 27/41/68/100% — meaningfully different from 25/50/75/100."1,000,000+"past the 1920px canvas —"1,"and"+"clipped off the edges. Now2200 / charsclamped to [120, 280] withwhiteSpace: nowrap. Empirically tuned to 0.75em-per-glyph at fontWeight 800.Verification
Eyeball-checked frames extracted from a fresh chc/run-001 render:
🤖 Generated with Claude Code