feat(videos): cycle icons match connect.dimagi.com 'click a step' graphic#455
Merged
Conversation
…phic Earlier (#451) I grabbed the wrong assets — the prelogin homepage's animated marketing gifs (learn/deliver/verify/pay.gif), which were busy training-photo loops rather than the clean glyph icons on the "click a step to see its detail" graphic on the same homepage. Replace them with inline SVG glyphs that match the prelogin homepage exactly: - Learn: laptop / screen glyph, brand #16006D (deep navy) - Deliver: heart + cross (care), brand #5D70D2 (lavender blue) - Verify: shield + checkmark, brand #FC5F36 (orange) - Pay: $ sign, brand #1B998B (teal) Each step renders two states from the same SVG: active = filled circle in BRAND, glyph stroked in white passive = white circle outlined in BRAND, glyph stroked in BRAND Inlining the SVG path data (vs. loading from public/) means the renderer has zero asset-load risk for this template element — bake once, render everywhere. Also drops the @remotion/gif dep we no longer need. The narration-keyword sync from #451 is unchanged — for the chc spec ("Frontline Workers learn, deliver, verify — and get paid the moment delivery confirms.") the highlight walks Learn → Deliver → Verify → Pay in time with the words. Verified by frame extraction: - t=5s → Learn filled - t=7s → Verify filled (mid-beat, "verify" already past) - t=11s → Pay filled Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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
Earlier (#451) I grabbed the wrong cycle assets — the prelogin homepage's animated marketing gifs (busy training-photo loops), when the user was pointing at the clean glyph icons on the same homepage's "click a step to see its detail" graphic.
Fix: inline SVG glyphs matching that graphic exactly, with two visual states per step.
#16006D(deep navy)#5D70D2(lavender blue)#FC5F36(orange)#1B998B(teal)$Each step renders both states from the same SVG:
Inlining the SVG path data (vs. loading via
<Img>frompublic/) keeps zero asset-load risk for this template element. Also drops@remotion/gifwhich we no longer need.The narration-keyword sync from #451 is unchanged — for the chc spec the highlight walks
Learn → Deliver → Verify → Payin time with the words.Verified
Frame extraction from a fresh chc/run-001 render:
Level-1 QA probe still reports 14 ok / 0 warn / 0 fail.
🤖 Generated with Claude Code