Create Flexible Multi-Scene Video Template System
Agent
Codex
Model
GPT-5.4
Shared
Mar 9, 3:41 PM
Messages2,410
Downloads38
I’ve confirmed the repo is already a small Remotion template, so I’m reading the current composition and the existing spec next. After that I’ll turn your scene ideas into a stable prop shape and wire it into code rather than keeping this abstract.
The current component interprets horizontal spacing oddly, so I’m fixing the dot pattern itself to use direct spacing values and then setting the demo background to 20 x 20 with higher opacity.
The demo dot grid now uses direct 20 x 20 spacing with stronger dots. I’m running typecheck once so this doesn’t accidentally break the reusable pattern component.
The demo-scene dot grid is now stronger and truly 20 x 20.
I updated src/DotPattern.tsx so columnWidth maps directly to horizontal spacing, and in src/FeatureVideo.tsx I set the demo background to columnWidth={20}, rowHeight={20}, and dotOpacity={0.32}.
Verified with bun run check. Refresh Studio to see the tighter, darker grid.
Using remotion-best-practices for this timing change. I’m updating the template so title-card duration is derived from text length by default, while still allowing explicit per-card overrides in the spec.
I’ve got the timing model open. I’m adding explicit title-duration overrides to the schema and moving the default title-card timing to a character-count formula in the template.
The schema and timing logic are in. I’m running typecheck now so the new optional override fields are verified end to end.
Title-card duration is now character-based by default, with explicit overrides available.
I updated src/template.ts so title screens use a computed duration based on title.trim().length, clamped to a sensible range, instead of fixed intro/key-point timing. If you want to override that, you can now use:
headlineDurationInSec on the top-level spectitleDurationInSec on each keyPoints[] itemThose fields are added in src/types.ts, and I updated the docs/scaffold in README.md and scripts/new-spec.ts.
Verified with bun run check.
Using remotion-best-practices for this visual tweak. I’m reducing the dot grid strength slightly on demo scenes.
Made the demo-scene dots a touch lighter in src/FeatureVideo.tsx by reducing dotOpacity from 0.32 to 0.28.
I didn’t rerun typecheck because this is a one-line visual tweak and the last bun run check was clean.
Using remotion-best-practices for this motion tweak. I’m updating the title-card animation so it lifts upward during the fade-out instead of only fading.
I found the title scene timing. I’m adding an outro lift tied to the last few frames so the title moves up as it fades, without changing the existing entrance.
The title outro lift is in. I’m running a quick typecheck so this stays a clean animation-only change.
The title cards now translate upward as they fade out. I added an outro lift in src/FeatureVideo.tsx so the title moves up 18px over the last 6 frames, and the body copy follows the same upward motion.
Verified with bun run check. Refresh Studio to see the updated title exit.
Using remotion-best-practices for this timing tweak. I’m reducing the title-to-demo overlap so the title gets a brief head start on its fade-out before the video begins fading in.
The overlap is shorter now, so the title starts fading out before the next demo fades in. I’m running typecheck once to keep the timing change verified.
I shortened the title-to-demo overlap in src/template.ts from 6 frames to 4, so the title now gets a small head start on fading out before the video begins fading in.
Verified with bun run check. Refresh Studio and the transition should feel a little less simultaneous.
Using remotion-best-practices for this timing tweak. I’m tightening just the title fade-out and demo fade-in timings, without speeding up the other fades in the template.
The per-scene fade timing is in. I’m running typecheck now to catch any cleanup needed from the old shared opacity variable.
I tightened those transition edges in src/FeatureVideo.tsx: title cards now fade out over 5 frames, and demo scenes fade in over 6 frames. The rest of the fade behavior stays the same.
Verified with bun run check. Refresh Studio and the text-to-video handoff should feel a touch quicker.
Using remotion-best-practices for this motion tweak. I’m increasing the demo outro scale-down so the video recedes a bit more as it fades.
The outro scale is currently very mild. I’m pushing that endpoint down a bit further.
Scaled the demo frame down more on fade-out in src/FeatureVideo.tsx. It now eases to 0.92x instead of 0.96x over the outro.
I didn’t rerun typecheck because this is a one-line animation tweak and the last bun run check was clean.
Using remotion-best-practices for this motion tweak. I’m changing the demo outro scale target from 0.92 to 0.94.
Set the demo outro scale target to 0.94 in src/FeatureVideo.tsx.
I didn’t rerun typecheck because this is a one-line animation tweak and the last bun run check was clean.
Using remotion-best-practices for this motion tweak. I’m checking the current demo-background mask first, then I’ll animate the dot grid so it reveals and disappears from the center instead of staying static.
I’m handling this in the demo background itself: removing the static center-fade mask and replacing it with a radial reveal mask that grows from the center on intro and collapses back to the center on outro.
The dot grid now has a center-based reveal/outro path in the demo background. I’m running typecheck to make sure the new prop path and mask styles are clean.
The dot pattern now fades in and out from the middle on demo scenes.
I changed src/FeatureVideo.tsx so the demo background uses a radial reveal mask driven by frame timing: it expands from the center on intro and collapses back to the center on outro. I also removed the old static center-fade behavior from how the demo background was using DotPattern, so the effect is now temporal rather than just a fixed mask.
Verified with bun run check. Refresh Studio to see the centered dot-grid reveal.
Using remotion-best-practices for this motion tweak. I’m reworking the demo dot-grid mask so intro reveal comes from the outside inward, outro disappears from the center outward, and the static center radial fade stays in place underneath.
The demo background now keeps the static center fade and uses a separate animated radial cover for the intro/outro directionality. I’m running typecheck to make sure the updated mask/overlay path is clean.
Changed the demo dot-grid motion in src/FeatureVideo.tsx so it now:
I did that by restoring the permanent center fade on DotPattern, then adding a separate animated radial background overlay on top that shrinks on intro and expands on outro.
Verified with bun run check. Refresh Studio to see the updated dot-grid transition.
Using remotion-best-practices for this motion tweak. I’m slowing and delaying the demo dot-grid intro reveal, and I’ll give it an ease-out curve so it feels less abrupt.
The dot-grid intro reveal is now delayed and eased out. I’m running typecheck once to make sure the Easing import and updated interpolation are clean.
Typecheck is still finishing; I’m polling once so I can confirm it’s clean.
The demo dot-grid intro now starts later, runs a bit slower, and eases out. I updated src/FeatureVideo.tsx so the intro cover animation starts at frame 4, finishes at frame 16, and uses Easing.out(Easing.cubic).
Verified with bun run check. Refresh Studio to see the softer dot-grid reveal.
Using remotion-best-practices for this motion tweak. I’m changing the demo dot-grid transition so both the intro and outro animate from the center outward, while keeping the static center fade underneath.
I’m flipping the intro overlay so the visible area expands outward from the center, while keeping the outro as a center-origin wipe and leaving the static middle radial fade intact.
The intro/outro overlays are separated now: intro reveals outward from center, outro collapses from center outward, and the static middle fade stays underneath. I’m running typecheck to keep it clean.
Changed the demo dot-grid motion in src/FeatureVideo.tsx so it now fades in from the center outward and fades out from the center outward as well, while keeping the static radial fade in the middle.
Verified with bun run check. Refresh Studio to see the updated dot-grid timing.
Using remotion-best-practices for this motion tweak. I’m slowing the demo dot-grid radial animation a bit by stretching the intro and outro timing windows.
Slowed the demo dot-grid radial animation in src/FeatureVideo.tsx. The intro now runs from frame 4 to 20, and the outro now takes 8 frames instead of 6.
I didn’t rerun typecheck because this is a small timing-only tweak and the last bun run check was clean.
Using remotion-best-practices for this timing tweak. I’m reducing the intro delay on the demo dot-grid animation while stretching the reveal so it starts sooner but unfolds more slowly.
The dot-grid intro now starts earlier and runs longer. I’m doing a quick typecheck so this stays a clean timing-only change.
Adjusted the demo dot-grid intro in src/FeatureVideo.tsx so it starts sooner and moves slower. It now begins at frame 2 instead of 4, and runs through frame 22 instead of 20.
Verified with bun run check.
Studio is running at http://localhost:3010. I left it up so you can scrub the composition directly.
This is the current look using the placeholder sample render at out/instant-feature-videos-placeholder.mp4. The demo scenes are placeholders right now because the sample spec has empty src values.
If you want, I can next drop in one real spec plus real MP4 paths so the preview stops showing placeholders.
Using remotion-best-practices for this timing tweak. I’m stretching the demo dot-grid intro again so it unfolds more slowly.
Slowed the demo dot-grid intro again in src/FeatureVideo.tsx by extending it from frame 2 to frame 26.
I didn’t rerun typecheck because this is a one-line timing tweak and the last bun run check was clean.
Using remotion-best-practices for this timing tweak. I’m setting the demo dot-grid intro reveal to end at frame 20.
Set the demo dot-grid intro reveal to run from frame 2 to frame 20 in src/FeatureVideo.tsx.
I didn’t rerun typecheck because this is a one-line timing tweak and the last bun run check was clean.
Using remotion-best-practices for this timing tweak. I’m removing the intro delay so the demo dot-grid reveal starts immediately, while keeping the current overall speed.
Removed the intro delay from the demo dot-grid reveal in src/FeatureVideo.tsx. It now runs from frame 0 to frame 20.
I didn’t rerun typecheck because this is a one-line timing tweak and the last bun run check was clean.
Using remotion-best-practices for this timing tweak. I’m stretching the demo dot-grid intro reveal to 50 frames.
Set the demo dot-grid intro reveal to 50 frames in src/FeatureVideo.tsx.
I didn’t rerun typecheck because this is a one-line timing tweak and the last bun run check was clean.
Using remotion-best-practices for this timing tweak. I’m changing the demo dot-grid intro reveal from 50 to 40 frames.
Set the demo dot-grid intro reveal to 40 frames in src/FeatureVideo.tsx.
I didn’t rerun typecheck because this is a one-line timing tweak and the last bun run check was clean.
Using remotion-best-practices for this timing tweak. I’m changing the demo dot-grid intro reveal from 40 to 30 frames.
Set the demo dot-grid intro reveal to 30 frames in src/FeatureVideo.tsx.
I didn’t rerun typecheck because this is a one-line timing tweak and the last bun run check was clean.
Using remotion-best-practices for this timing tweak. I’m changing the demo dot-grid intro reveal from 30 to 25 frames.
Set the demo dot-grid intro reveal to 25 frames in src/FeatureVideo.tsx.
I didn’t rerun typecheck because this is a one-line timing tweak and the last bun run check was clean.
I’m changing the timing model so clip scenes fall back to defaults only when there’s no media, and otherwise use the actual source duration. First I’m checking what metadata APIs are already available in this Remotion version so I can wire it into calculateMetadata instead of hardcoding more timing.
Using remotion-best-practices for this motion pass. I’m tightening the shared transition timings across title fades, demo fades, and demo outro so the whole template moves a bit quicker without changing its structure.
I’m tightening the shared numbers rather than changing the feel of individual scenes separately. That should give you a faster overall template without making one transition feel out of place.
The template timing is tightened across the board now. I’m running typecheck once so the refactor stays clean.
I sped up the transitions a bit across the template.
In src/FeatureVideo.tsx, I tightened the default fade-in/out timings, shortened the title body fade-in, reduced the title reveal shift timing, made the dot-grid intro/outro a bit quicker, shortened the demo fade-in, and made the demo outro start/finish a bit faster. In src/template.ts, I also reduced the title-to-demo overlap from 4 frames to 3.
Verified with bun run check. Refresh Studio and the whole sequence should feel a little snappier.
Using remotion-best-practices for this timing tweak. I’m slowing just the demo dot-grid fade timing slightly without touching the other transitions.
Slowed the demo dot-grid fade slightly in src/FeatureVideo.tsx. The intro reveal now runs to frame 26 instead of 22, and the outro now uses 8 frames instead of 7.
I didn’t rerun typecheck because this is a small timing-only tweak and the last bun run check was clean.
Yes.
The local design tokens in src/globals.css define both:
:root for light mode:root.dark for dark modeIt also includes the Tailwind v4 custom variant:
So the project does support dark mode at the token level. Right now, though, this video template is effectively rendering in the light palette unless you add a dark class at the top-level composition/root wrapper or switch the variables another way.
Using remotion-best-practices for this theme pass. I’m switching the composition into the dark token set properly, then I’ll adjust the demo background texture so it still reads on the dark surface.
I found the main blocker: the tokens only switch on :root.dark, so adding a dark class to the composition wouldn’t actually change variables today. I’m fixing the token scope and then forcing this composition into dark mode, plus making the demo dot grid readable on the dark surface.
The composition is now explicitly on the dark token set, and the demo dot grid is switched to a lighter treatment so it still shows up. I’m running typecheck to make sure the theme changes didn’t introduce anything incidental.
The current video is now dark mode.
I updated src/globals.css so the dark token set applies to a .dark container, and I set the composition root in src/FeatureVideo.tsx to className="dark ...". I also changed the demo-scene dot grid to a lighter white treatment so it remains visible on the dark background.
Verified with bun run check. Refresh Studio and the current composition should render in dark mode.
Using remotion-best-practices for this theme revert. I’m switching the composition back to the light palette and restoring the darker dot-grid treatment for the light background.
Switched the current composition back to the light theme in src/FeatureVideo.tsx and restored the darker black dot-grid treatment for the white background.
I didn’t rerun typecheck because this is a small class/color revert and the last bun run check was clean.
Using remotion-best-practices for this timing tweak. I’m making the demo fade-in a bit faster and tightening the title fade-out slightly more so the handoff feels crisper.
Made the handoff faster in src/FeatureVideo.tsx: title cards now fade out over 3 frames instead of 4, and demo scenes fade in over 4 frames instead of 5.
I didn’t rerun typecheck because this is a small timing-only change and the last bun run check was clean.
I’m checking the Remotion entrypoints and template/spec wiring to trace where the currently previewed video is actually defined.
I found the wiring. There isn’t a dedicated videos/ folder with per-video implementations; the current output is a single generic template plus a spec/default-props source. I’m opening the concrete defaults now so I can point you to the exact files.
In this repo, the “current video” is not defined as a standalone folder/component per campaign. It’s split across:
So right now the “implementation of a specific video” is mostly the defaultSpec object in src/Root.tsx, plus any .md spec under specs.
The render flow is:
So if you were expecting a structure like videos/my-launch/..., that does not exist yet. The current architecture is more like:
src/ = reusable template systemspecs/*.md = specific video content instancespublic/clips/... = source media assetsIf you want, I can refactor this into a clearer structure like videos/<slug>/spec.md + videos/<slug>/clips/ so each video instance feels self-contained.
Yes.
specs/*.md is effectively the content doc for each video:
The template code in src/FeatureVideo.tsx and src/template.ts is the reusable renderer. The spec file supplies the per-video content.
So the intended model is:
Right now Studio also has a hardcoded defaultSpec in src/Root.tsx, which is basically a preview/default example of one of those docs.
I’m using remotion-best-practices here because this is a Remotion scene/rendering change. I’m checking the current demo background implementation and then I’ll swap the dot-grid layer for the provided MP4.
I found two viable paths: browser-side metadata via @remotion/media-utils, or cross-environment parsing via the newer media parser. I’m checking how calculateMetadata is expected to run in this Remotion version before I pick one, because the right fix is to compute scene durations there once, not inside render-time React code.
I’ve confirmed the dot background is still wired globally in this repo’s FeatureVideo. I’m reading the demo scene section so I can replace only the video-scene background with the MP4 rather than changing title cards.