); }; ``` The gradient, grid, rings, and progress bar remain behind every scene. Their movement comes from the current frame. The grid translates using a repeating calculation, and the large ring slowly scales. The progress bar uses `(frame + 1) / 900`, so it reaches full width on the last frame, 899. The denominator is deliberately tied to this video's fixed duration. If you change the composition length, update it too, or derive it from `useVideoConfig()`. Append the brand overlay: ```tsx const Brand = () => { const sq = useSquare(); const frame = useCurrentFrame(); const chapter = frame < 180 ? "THE V4 BREAKDOWN" : frame < 420 ? "SECURITY DEFAULTS" : frame < 540 ? "QUERY DEPTH" : frame < 720 ? "FRAMEWORK ADAPTERS" : "THE FULL GUIDE"; return ( <>

Build with Matija.

V4 CANARY

{chapter} buildwithmatija.com

); }; ``` The chapter labels switch at the same frame boundaries we will use for the scenes. The logo, canary badge, chapter label, and website address stay visible across the whole timeline. We will place `Background` and `Brand` outside the sequences. They therefore receive the composition's frame, while the scene components inside a sequence receive a local frame. That lets the background stay continuous while each scene starts its own entrance at zero. ## 5. Build the five scenes Continue appending these blocks to `src/Payload4Teaser.tsx`. We are now composing the shared primitives into the exact content shown in the video. ### Scene 1: title and hook Append the opening scene: ```tsx const Hook = ({ title }: { title: string }) => { const sq = useSquare(); const separator = title.indexOf(":"); const headline = separator < 0 ? title : title.slice(0, separator); const subtitle = separator < 0 ? "Breaking Changes & Canary Deep Dive" : title.slice(separator + 1).trim(); return (

ARCHITECTURE / MIGRATION / WHAT’S NEXT

{headline.replace(" 4.0", "")}
4.0 THE NEXT CHAPTER

{subtitle}

{[ "Node 24", "Next.js 16", "TanStack Start", "overrideAccess: false", ].map((tag, i) => ( {tag} ))}

A closer look at the defaults that change your code.

); }; ``` The title is split at its first colon. The first part becomes the headline, and the rest becomes the subtitle. The highlighted `4.0` and the supporting labels are specific to this example. The tags use delays of `32 + i * 8` frames, so each starts eight frames after the previous tag. At 60 fps that spacing is about 0.13 seconds. The animation stays deterministic because the delay comes from the array index. ### Scene 2: compare access defaults Append the comparison card and its scene: ```tsx const AccessCard = ({ v4 }: { v4: boolean }) => { const sq = useSquare(); const frame = useCurrentFrame(); const color = v4 ? C.green : C.red; const draw = interpolate(frame, [v4 ? 58 : 25, v4 ? 100 : 67], [0, 1], clamp); return (

PAYLOAD {v4 ? "4" : "3"}

{sq ? ( overrideAccess: {v4 ? "false" : "true"} ) : ( )}

{v4 ? ( ) : ( )}

{v4 ? "RULES EVALUATED" : "RULES BYPASSED"}

{v4 ? "Access enforced by default" : "Implicit superadmin"}

{!sq && (

overrideAccess: {v4 ? "false" : "true"}

)}

{v4 ? "Allow · Filter · Deny" : "Collection access checks skipped"}

); }; const Access = () => { const sq = useSquare(); const frame = useCurrentFrame(); return ( Same Local API query. Different default.} > The rules now apply.

payload.find({"{"} collection:{" "} 'orders' {"}"}) // overrideAccess omitted

No user? Public access rules apply.

); }; ``` The two cards share one component. The `v4` flag changes the labels, colors, icons, and connector timing. For the animated SVG line, `pathLength={1}` normalizes the path length and `strokeDashoffset={1 - draw}` reveals it as `draw` moves toward 1. The square layout stacks the cards and moves the access-default text into each header. That removes repeated detail from the taller layout and keeps room for the query, heading, and footer. Simply changing the canvas size would not make the landscape scene fit. The scene lasts 240 frames, which is four seconds. Its card entrances use local frame values, so their delays are measured from the start of this scene, not from frame zero of the full video. The example's message distinguishes access checks being evaluated from a request being granted. The green card still lists Allow, Filter, and Deny; the diagram should not imply that evaluating rules always allows access. ### Scene 3: relationship depth Append the relationship row and the depth scene: ```tsx const RelationshipRow = ({ v4 }: { v4: boolean }) => { const sq = useSquare(); const frame = useCurrentFrame(); const draw = interpolate(frame, [v4 ? 25 : 8, v4 ? 65 : 42], [0, 1], clamp); const labels = ["Post", "Author", v4 ? "Avatar ID" : "Avatar document"]; const icons = [ , , , ]; return (

PAYLOAD {v4 ? "4" : "3"}{" "} {" "} / DEFAULT DEPTH: {v4 ? "1" : "2"}

{labels.map((label, i) => (

{i > 0 && ( )}

{icons[i]} {label}

))}

); }; const Depth = () => ( Default depth: 2{" "} → 1

Need the avatar document? Set{" "} depth: 2.

); ``` This scene uses two rows to compare the diagrams. The last node is a populated document in one row and an ID in the other. Dashed styling carries that distinction even without relying on color. The node contents are React components, including Lucide SVG icons. The connectors are SVG paths. Remotion can animate them because their visible properties are calculated from frames, just like the earlier HTML cards. `Scene duration={120}` keeps this scene's entrance and exit aligned with its two-second sequence. The second row and explanatory note arrive later through `Pop` delays. ### Scene 4: framework adapters and the shared core Append the framework scene: ```tsx const Frameworks = () => { const sq = useSquare(); const frame = useCurrentFrame(); const progress = interpolate(frame, [25, 72], [0, 1], clamp); return ( Two paths. One core.

{[false, true].map((tanstack) => (

{tanstack ? : } {tanstack ? "TanStack Start" : "Next.js"}

{tanstack ? "Vite / Router" : "App Router / RSC"}

{tanstack ? "Experimental canary" : "Established adapter"}

))}

Payload 4 Core

Local API · Collections · Auth · Database adapters

Zero Sass. Pure CSS variables.

Semantic tokens for the refreshed admin.

); }; ``` Both framework cards point toward one Payload core. The Next.js path is solid, while the TanStack Start card and path retain the example's experimental-canary styling. The solid connector uses the same normalized path-length technique as the access cards. The dashed connector fades in through `opacity={progress}`. The SVG view box provides a shared coordinate system while its rendered width follows the composition. The scene is ordinary React composition: two cards, a connector diagram, a core card, and an admin-style note. The motion is concentrated in entrances and connector reveals, making the content easier to read during its three seconds on screen. ### Scene 5: hold the call to action Append the closing scene: ```tsx const CTA = ({ slug }: { slug: string }) => { const sq = useSquare(); const frame = useCurrentFrame(); return (

YOUR NEXT MIGRATION STARTS HERE

Read the full guide
& migration
breakdown.

buildwithmatija.com /blog/{slug}

Matija Žiberna

Build with Matija

); }; ``` The closing URL uses the `slug` prop. Its square variant puts the path on a second line and wraps the heading deliberately. The portrait uses Remotion's `Img` component with `staticFile()`, and the fixed display dimensions keep the surrounding layout stable. `Scene hold` keeps the completed CTA at full opacity. Its small scale change settles during the first 48 frames, leaving time to read the URL before the video ends. ## 6. Assemble the timeline Append the final exported component. This completes `src/Payload4Teaser.tsx`: ```tsx export const Payload4Teaser = ({ title, slug }: TeaserProps) => ( ); ``` The order of the layers matters: font coordination first, then the background, then the timed scenes, then branding above them. Here is the full frame budget: | Scene | Start frame | Duration | Last frame | Time interval | | --- | ---: | ---: | ---: | --- | | Hook and title | 0 | 180 | 179 | 0–3 seconds | | Access defaults | 180 | 240 | 419 | 3–7 seconds | | Relationship depth | 420 | 120 | 539 | 7–9 seconds | | Frameworks and admin | 540 | 180 | 719 | 9–12 seconds | | Call to action | 720 | 180 | 899 | 12–15 seconds | A sequence's `durationInFrames` is a count. The first scene includes frames 0 through 179; frame 180 belongs to the next scene. These five intervals cover all 900 frames without a gap or overlap. Inside ``, `useCurrentFrame()` returns 0 at composition frame 180, 1 at frame 181, and so on. That is why the access cards can use small delays such as 12 and 42: they are relative to that scene. [See sequence timing](https://www.remotion.dev/docs/sequence). The background and brand are outside those sequences and keep the global frame number. Moving them inside a scene would reset their timing when the scene starts. A sequence also controls when its children appear. You do not need to hide every scene manually with conditions; the sequence supplies the visibility window and shifted timeline. ## 7. Preview the result in Studio Check TypeScript and start Studio: ```bash npx tsc --noEmit pnpm start ``` Open `http://localhost:3100` and select `Payload4Teaser`. Play the composition, then switch to `Payload4Square`. If the port is busy, use: ```bash pnpm exec remotion studio src/index.ts --port=3103 ``` Use representative frames to inspect each scene: 150, 340, 490, 660, and 850. Also inspect both sides of every boundary: 179/180, 419/420, 539/540, and 719/720. Check the opening frame 0 and the final frame 899. At each stop, check whether headings fit, connectors point to the intended nodes, and the persistent footer stays clear. Preview the square composition around social-feed display sizes as well as at full resolution. Large export dimensions do not guarantee readable text on a phone. You can save an individual frame for a closer look: ```bash pnpm exec remotion still src/index.ts Payload4Square out/check-square-access.png --frame=340 ``` Do not judge a composition only by one attractive poster. The frame before a scene change and the first frame after it reveal timing mistakes that a settled frame can hide. ## 8. Render MP4, WebM, and posters The scripts in `package.json` already specify the entrypoint, composition ID, and output filename. Run them from the example project: ```bash pnpm render:landscape pnpm render:square pnpm render:webm pnpm poster:landscape pnpm poster:square ``` The first render may download Chrome Headless Shell. Let that finish before diagnosing a slow first export as an animation problem. [See the rendering walkthrough](https://www.remotion.dev/docs/render). The MP4 scripts use H.264, `yuv420p`, CRF 18, and BT.709 color space. PNG frame capture avoids introducing JPEG artifacts before encoding around text and thin diagram strokes. `--concurrency=4` is the reference setting; reduce it if your machine struggles with memory. The WebM script uses VP9 at a target bitrate of 6 Mbps. [See the CLI options](https://www.remotion.dev/docs/cli/render). Posters come from frame 150, 2.5 seconds into the composition, when the opening scene has settled. You can choose another frame by changing `--frame` in the poster scripts. Expect these outputs: | Output | Canvas | Purpose | | --- | --- | --- | | `out/payload-4-0-teaser.mp4` | 1920×1080 | Landscape H.264 video | | `out/payload-4-0-square.mp4` | 1080×1080 | Square H.264 video | | `out/payload-4-0-teaser.webm` | 1920×1080 | Landscape VP9 alternative | | `out/payload-4-0-poster.png` | 1920×1080 | Landscape poster | | `out/payload-4-0-square-poster.png` | 1080×1080 | Square poster | Both video compositions are 15 seconds at 60 fps. This example has no audio track; silent playback is expected. Here is the square reference export for comparison:

If you have `ffprobe` installed, inspect the actual encoded media rather than relying only on composition settings: ```bash ffprobe -v error -select_streams v:0 -count_frames -show_entries stream=codec_name,width,height,r_frame_rate,nb_read_frames,pix_fmt,color_space:format=duration -of json out/payload-4-0-teaser.mp4 ``` For the landscape MP4, expect H.264, 1920×1080, `60/1` fps, 900 decoded frames, approximately 15 seconds, `yuv420p`, and `bt709`. Check the square file separately; it should report 1080×1080. Play the final files and seek into each scene. Studio confirms the React composition, while playback confirms the file you will actually share. ## 9. Adapt the example to your own content Start by changing the title and slug in both compositions. The title controls the opening heading and subtitle; the slug controls the closing article path. Then change the scene content, logo, portrait, and brand labels. There are several deliberate fixed values to revisit: - `Hook` always renders a highlighted `4.0`, and its tags refer to Payload's ecosystem. - `AccessCard`, `RelationshipRow`, and `Frameworks` contain example-specific diagrams and labels. - `Brand` contains fixed chapter boundaries and website text. - `Background` calculates progress against 900 frames. - `useSquare()` recognizes a square canvas. A vertical 1080×1920 composition needs its own layout decisions. Changing `defaultProps` alone does not turn this into a general-purpose video generator. To make it reusable across articles, extract the scene content into typed props after you have a second real example and know what varies. If you change the duration, update the composition, sequence starts and lengths, `Scene` durations, chapter thresholds, and progress denominator together. A duration change at only the root will either cut content short or leave extra time after the intended ending. Keep animated values derived from frames. If you add particles or randomly placed decorations, use Remotion's seeded `random()` rather than `Math.random()` so the placement is repeatable. [See deterministic randomness](https://www.remotion.dev/docs/random). ## 10. Troubleshoot the common failures ### A component or import cannot be found Make sure you copied every consecutive block into `src/Payload4Teaser.tsx`, including the imports at the top and exported component at the bottom. The blocks are parts of one file. Copying only an individual scene will leave its helpers undefined. Run `npx tsc --noEmit` from the example directory. If the error mentions `FontFace` or `document.fonts`, compare the TypeScript `lib` array with the configuration above. ### Utility classes have no effect Check that the component imports `./style.css`, that the stylesheet imports Tailwind, and that `remotion.config.ts` calls `enableTailwind`. Our layout mixes utility classes and inline styles; missing Tailwind can break flex layouts even while colors still appear correctly. ### Fonts fail to load or the render times out Check all five requested font filenames, their copied paths, and the spelling of `public/fonts`. Use Studio's browser console to look for failed asset requests. The font gate intentionally cancels on a loading error. A timeout can indicate work that never cleared its delay handle. Increasing the timeout does not repair a missing file or a stalled request. Trace the operation and make sure it either completes with `continueRender()` or fails with `cancelRender()`. [See render-delay troubleshooting](https://www.remotion.dev/docs/delay-render). ### Animation looks different after scrubbing Look for CSS keyframes, transitions, timers, or values calculated from wall-clock time. A composition must display the intended result when you jump straight to a frame. Calculate motion from `useCurrentFrame()` and keep your asset and input data stable. ### Square content clips or collides with the footer Inspect the entire scene's height, including headings, margins, query text, and notes. The reference square layout stacks access cards, tightens their spacing, and moves detail into their headers. Smaller fonts alone will not fix every layout problem. ### The final export is unreadable or fails Check available disk space and try reducing render concurrency. Inspect the actual output with a media player and `ffprobe`. A successful TypeScript check confirms types, not that the browser captured every frame correctly. ## Where to go after this tutorial You now have a concrete composition you can scrub, modify, and render. Try replacing the access comparison with a diagram from your own article while keeping the same timing and shared animation helpers. For a next project, the [Remotion Player](https://www.remotion.dev/docs/player) lets you embed a composition as an interactive preview in a React application. The [Node rendering API](https://www.remotion.dev/docs/renderer) and [Lambda documentation](https://www.remotion.dev/docs/lambda) cover automated exports when local rendering is no longer enough. Check the [current licensing terms](https://www.remotion.dev/docs/license) when planning how to use it in your organization. Build one clear scene, inspect its frames, and then extend the timeline. The same React composition skills carry through as the video grows.

{children}

{headline.replace(" 4.0", "")} 4.0 THE NEXT CHAPTER

Read the full guide & migration breakdown.

{headline.replace(" 4.0", "")}
4.0 THE NEXT CHAPTER

Read the full guide
& migration
breakdown.