Repository navigation
Research: Remotion video rendering with sample Governor's Address - #28
Merged
Merged
Conversation
Commits the sample Remotion render (1.2 MB MP4, 8s @ 1920×1080) plus two preview frames so the output is inspectable in the PR without running a local render. https://claude.ai/code/session_01SBzsoYx5dRDnwDuTmJJUda
Adds § 04 "The Address" section between Reserves and Schedule, featuring the rendered Remotion MP4 with a paper-palette video frame (corner marks, click-to-play overlay, archival caption) and a metadata ledger. Nav updated in both desktop header and mobile menu. Playwright coverage added for the new section. Video and poster ship from public/video/ so Vite bundles them into dist/ for the GitHub Pages deploy. https://claude.ai/code/session_01SBzsoYx5dRDnwDuTmJJUda
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
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
Research spike exploring Remotion for generating short institutional video clips in the Banco·Bral aesthetic (Governor's addresses, mint-process loops, annual-report bumpers).
remotion/with its ownpackage.json, React 19 + Remotion 4.0.380. Does not affect the main Vue build, site bundle, or deploy pipeline.GovernorsAddress— 8s @ 30fps, 1920×1080, pulls live figures fromsrc/data/stats.jsonand uses Treasury-palette tokens so rendered clips stay visually in sync with the site.remotion/out/governors-address.mp4(1.2 MB) plus two preview stills (title card, reserve stats).What the clip does
00:00–00:02— Spinning engraved seal, "Banco·Bral" in Instrument Serif, "Established MMXXIV · Purity 98.2".00:02–00:04— Orange "QUARTERLY ADDRESS" stamp, "Q2 · MMXXVI" headline, "Reserve Disclosure" subtitle.00:04–00:06.5— Animated counters: circulating (585 BRAL), can reserve (2093), purity (98.2%).00:06.5–00:08— Audit stamp "AUDITED · 2026.03.14", auditor E. Sørensen, fade out.Paper-grid background, corner registration marks, subtle film grain, matching the brutalist-monospace tone of the rest of the site.
How to render locally
Verdict
Remotion is a reasonable fit for one or two set-piece videos (hero bumper, quarterly address) — it's overkill as a general animation layer. For tickers, coin spins, and palette transitions, SVG + CSS inside Vue remains lighter and sharper. The toolchain is heavy (headless Chrome + FFmpeg) and React-based, so it runs as an offline build step, not a runtime integration.
Test plan
remotion/out/governors-address.mp4in the PR diff or clone locally — confirm it plays and matches the stills.remotion/out/governors-address.png(Q2 · MMXXVI title card) andremotion/out/stage3.png(reserve stats) inline.cd remotion && npm install && npm run renderreproduces the same MP4.npm run dev,npm test) is unaffected — no changes tosrc/,package.json, or Playwright config.https://claude.ai/code/session_01SBzsoYx5dRDnwDuTmJJUda