Conversation
GUIDE.md says a card is done when it 'lints clean, previews correctly in the
Studio, and has a rendered preview MP4 + poster', and that 'the preview script
is added once the first real card exists (so it's tested against something
real)'. Both styles have real cards; the script was never added.
npm run preview:cards -- 02-kallaway
npm run preview:cards -- 02-kallaway --card kallaway.t1.section.ascend
npm run preview:cards -- 01-vox-explainer --seconds 3
Three things it has to work around, all noted in the file:
- The CLI renders a project directory, not a loose file, so each card is
copied into a scratch project under tmp/ with its tokens.css beside it.
- tier2 cards are transparent overlays and would preview as black, so they
render over a neutral backdrop that exists only in the preview.
- MP4 loops go to renders/previews/<style>/, not next to the posters:
check-kit.mjs rejects loose media in the distribution, and both renders/
and tmp/ are already gitignored. Posters stay with the style, which
matches GUIDE ('any original preview posters' are committed).
Poster is grabbed after the entrance settles rather than at frame 1, so it
shows the card instead of its first frame of animation.
Tested on both shipped styles, tier1 and tier2. Requires FFmpeg 7+, the same
floor the cut scripts already need.
Co-Authored-By: Claude Opus 5 <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.
What
Adds
npm run preview:cards, which renders the per-card preview loop and poster thatstyle-library/GUIDE.mdalready requires.GUIDE defines a card as done when it "lints clean, previews correctly in the Studio, and has a rendered preview MP4 + poster", and its Previews section says:
Both shipped styles have real cards — 406 of them — and the script was never added, so no style currently has the previews GUIDE treats as part of "done".
Usage
--cardrenders one card, which makes a 300-card style testable without rendering all of it.Three things it works around
The CLI renders a project directory, not a loose file. Each card is copied into a scratch project under
tmp/with itstokens.cssbeside it, and the../../tokens.csshref is rewritten to match.tier2 cards are transparent overlays and would preview as a black frame. They render over a neutral backdrop that exists only inside the scratch copy — the card itself is never modified.
MP4 loops go to
renders/previews/<style>/, not next to the posters. Writing them beside the posters takesnpm run checkfrom 0 errors to 3, becausecheck-kit.mjsflags loose media in the distribution.renders/andtmp/are both already in.gitignore, so this needs no ignore changes. Posters stay with the style, matching GUIDE's note that "any original preview posters" are committed while the loops are regenerable.One small deviation from GUIDE worth flagging: it says to grab frame 1 as the poster. Frame 1 is the first frame of the entrance animation, which on most cards is empty or mid-transition. This takes the poster after the entrance settles instead, so the poster shows the card.
Tested
Both shipped styles, tier1 and tier2:
kallaway.t1.section.ascend— 7.4s source, loop + posterkallaway.t2.lower-third.avatar— 7.0s source, loop + poster, correct over the backdropRequires FFmpeg 7+ — the same floor
cut-silencesandcut-mistakesalready need. No new dependencies.