feat: reels-grade kinetic templates + premiere-style timeline merge#20
Merged
feat: reels-grade kinetic templates + premiere-style timeline merge#20
Conversation
Three connected upgrades in service of cinematic retention:
1) **Three new templates** (`packages/core/src/script/templates/kinetic.ts`)
- `hook-vhs-rip` — VHS / broadcast-intercept opener with chromatic
RGB split title, scanlines, jitter, blinking dot meta tags. Built
for s01 scroll-stoppers. Title capped at ≤6 words.
- `kinetic-words` — word-by-word reveal where the closing word lands
heavier (italic + chromatic shadow). 3–6 word array, hard-capped.
Adds zoom-burst photo entry, scale-impact on emphasis word, and an
optional camera shake (`shake: true` default) timed to the punch.
- `editorial-serif` — pure-typography breath scene: hairline rule
with dot terminator + script-italic phrase. Light/dark variants.
2) **Premiere-style timeline lanes**
- Runtime: `data-track-index` falls back to `0` (was per-DOM-index),
so all clips without an explicit lane consolidate onto track 0
instead of exploding into N rows for N scenes.
- Assembler: every voiceover audio element now carries
`data-track-index="1"` + `data-timeline-group="voiceover"` +
`data-timeline-label="Voiceover"`. Two persistent overlay
placeholders (`hf-track-music`, `hf-track-sfx`) ship in every
assembled HTML, anchoring an empty Music lane (track 2) and SFX
lane (track 3) so the studio always shows them ready to fill.
- Studio: `TimelineElement.label` plumbed through and rendered on
the clip face when present, so empty lanes read as MUSIC / SFX
instead of "DIV".
3) **`hook-bigtext` letter-dropout fix**
- Cascade switched from `tl.to` to `tl.fromTo` so initial state
survives any seek order. Final-state `set` clamped to inside the
scene window. CSS `@keyframes` safety net flips every letter to
`opacity: 1` 50ms before scene end. Title gets `pre-wrap` +
`break-word`; words get `nowrap` so individual letters can't wrap
to a hidden line.
4) **Timeline rows flicker / vanish fix**
- ResizeObserver no longer disconnects + recreates on same-element
re-attach (the parent re-render race). Initial width read sync
via `getBoundingClientRect()` to skip the `viewportWidth=0` flash.
RO callback skips no-op deltas. `effectiveDuration` extracted to
pure helper `computeEffectiveTimelineDuration` and now filters
non-finite ends so a single Infinity-end clip from a loop-inflated
GSAP timeline can't poison the max and collapse the track width
to zero. 4 regression tests added.
5) **Visual director + planner**
- Director: directs `imageId` for `hook-vhs-rip` / `kinetic-words`
scenes via `treatment: null`, so the planner's chosen template
stays in place and the photo flows in via `ctx.image`. Rule 9
forbids attaching images to `editorial-serif` (typography only).
- Assembler: any template can now resolve `props.imageId` from the
manifest into `ctx.image`, not just `image-scene`.
- Playbook: explicit on-screen-text budgets per template
(≤8 / ≤6 / 3–6 / ≤4 words) with examples of how to compress a
long narration sentence into a punch headline. Three new entries
in the visual treatment matrix.
- Atmosphere defaults: `hook-vhs-rip` / `kinetic-words` /
`editorial-serif` ship with `studio-flat` so the templates'
own dense visual layer carries the scene.
Tests: 687 core + 226 studio passing. Lint, format, typecheck clean.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This was referenced Apr 27, 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
packages/core/src/script/templates/kinetic.ts—hook-vhs-rip(chromatic VHS opener, ≤5-word title),kinetic-words(word-by-word reveal with scale-impact + camera shake on the punch word, 3–6 words hard-capped),editorial-serif(hairline + script-italic breath scene). Playbook now ships per-template on-screen-text budgets so the planner stops cramming sentences into kinetic slots.data-timeline-groupso it generalises to any future lane.hook-bigtextletter dropouts (cascade nowfromTo+ CSS keyframe safety net +nowrapper word), Timeline rows flickering / vanishing (RO race + finite-end filter for loop-inflated GSAP timelines).Test plan
computeEffectiveTimelineDurationandderiveTimelineLaneLabel)🤖 Generated with Claude Code