` must be set to `none`.
+
+```tsx
+import { Sequence } from "remotion";
+import { ThreeCanvas } from "@remotion/three";
+
+const { width, height } = useVideoConfig();
+
+
+
+
+
+
+ ;
+```
diff --git a/.agents/skills/remotion-best-practices/rules/assets/charts-bar-chart.tsx b/.agents/skills/remotion-best-practices/rules/assets/charts-bar-chart.tsx
new file mode 100644
index 0000000..1313ebf
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/assets/charts-bar-chart.tsx
@@ -0,0 +1,173 @@
+import {loadFont} from '@remotion/google-fonts/Inter';
+import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
+
+const {fontFamily} = loadFont();
+
+const COLOR_BAR = '#D4AF37';
+const COLOR_TEXT = '#ffffff';
+const COLOR_MUTED = '#888888';
+const COLOR_BG = '#0a0a0a';
+const COLOR_AXIS = '#333333';
+
+// Ideal composition size: 1280x720
+
+const Title: React.FC<{children: React.ReactNode}> = ({children}) => (
+
+);
+
+const YAxis: React.FC<{steps: number[]; height: number}> = ({
+ steps,
+ height,
+}) => (
+
+ {steps
+ .slice()
+ .reverse()
+ .map((step) => (
+
+ {step.toLocaleString()}
+
+ ))}
+
+
+ {children}
+
+
+ {labels.map((label) => (
+
+ {label}
+
+ ))}
+
+
+ Gold Price 2024
+
+
+ d.month)}>
+ {data.map((item, i) => {
+ const progress = spring({
+ frame: frame - i * 5 - 10,
+ fps,
+ config: {damping: 18, stiffness: 80},
+ });
+
+ const barHeight =
+ ((item.price - minPrice) / priceRange) * chartHeight * progress;
+
+ return (
+
+
+
+ );
+};
diff --git a/.agents/skills/remotion-best-practices/rules/assets/text-animations-typewriter.tsx b/.agents/skills/remotion-best-practices/rules/assets/text-animations-typewriter.tsx
new file mode 100644
index 0000000..89f62ea
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/assets/text-animations-typewriter.tsx
@@ -0,0 +1,100 @@
+import {
+ AbsoluteFill,
+ interpolate,
+ useCurrentFrame,
+ useVideoConfig,
+} from 'remotion';
+
+const COLOR_BG = '#ffffff';
+const COLOR_TEXT = '#000000';
+const FULL_TEXT = 'From prompt to motion graphics. This is Remotion.';
+const PAUSE_AFTER = 'From prompt to motion graphics.';
+const FONT_SIZE = 72;
+const FONT_WEIGHT = 700;
+const CHAR_FRAMES = 2;
+const CURSOR_BLINK_FRAMES = 16;
+const PAUSE_SECONDS = 1;
+
+// Ideal composition size: 1280x720
+
+const getTypedText = ({
+ frame,
+ fullText,
+ pauseAfter,
+ charFrames,
+ pauseFrames,
+}: {
+ frame: number;
+ fullText: string;
+ pauseAfter: string;
+ charFrames: number;
+ pauseFrames: number;
+}): string => {
+ const pauseIndex = fullText.indexOf(pauseAfter);
+ const preLen =
+ pauseIndex >= 0 ? pauseIndex + pauseAfter.length : fullText.length;
+
+ let typedChars = 0;
+ if (frame < preLen * charFrames) {
+ typedChars = Math.floor(frame / charFrames);
+ } else if (frame < preLen * charFrames + pauseFrames) {
+ typedChars = preLen;
+ } else {
+ const postPhase = frame - preLen * charFrames - pauseFrames;
+ typedChars = Math.min(
+ fullText.length,
+ preLen + Math.floor(postPhase / charFrames),
+ );
+ }
+ return fullText.slice(0, typedChars);
+};
+
+const Cursor: React.FC<{
+ frame: number;
+ blinkFrames: number;
+ symbol?: string;
+}> = ({frame, blinkFrames, symbol = '\u258C'}) => {
+ const opacity = interpolate(
+ frame % blinkFrames,
+ [0, blinkFrames / 2, blinkFrames],
+ [1, 0, 1],
+ {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'},
+ );
+
+ return {symbol} ;
+};
+
+export const MyAnimation = () => {
+ const frame = useCurrentFrame();
+ const {fps} = useVideoConfig();
+
+ const pauseFrames = Math.round(fps * PAUSE_SECONDS);
+
+ const typedText = getTypedText({
+ frame,
+ fullText: FULL_TEXT,
+ pauseAfter: PAUSE_AFTER,
+ charFrames: CHAR_FRAMES,
+ pauseFrames,
+ });
+
+ return (
+
+
+ {typedText}
+
+
+ );
+};
diff --git a/.agents/skills/remotion-best-practices/rules/assets/text-animations-word-highlight.tsx b/.agents/skills/remotion-best-practices/rules/assets/text-animations-word-highlight.tsx
new file mode 100644
index 0000000..0aae3e2
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/assets/text-animations-word-highlight.tsx
@@ -0,0 +1,103 @@
+import {loadFont} from '@remotion/google-fonts/Inter';
+import React from 'react';
+import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
+
+/*
+ * Highlight a word in a sentence with a spring-animated wipe effect.
+ */
+
+// Ideal composition size: 1280x720
+
+const COLOR_BG = '#ffffff';
+const COLOR_TEXT = '#000000';
+const COLOR_HIGHLIGHT = '#A7C7E7';
+const FULL_TEXT = 'This is Remotion.';
+const HIGHLIGHT_WORD = 'Remotion';
+const FONT_SIZE = 72;
+const FONT_WEIGHT = 700;
+const HIGHLIGHT_START_FRAME = 30;
+const HIGHLIGHT_WIPE_DURATION = 18;
+
+const {fontFamily} = loadFont();
+
+const Highlight: React.FC<{
+ word: string;
+ color: string;
+ delay: number;
+ durationInFrames: number;
+}> = ({word, color, delay, durationInFrames}) => {
+ const frame = useCurrentFrame();
+ const {fps} = useVideoConfig();
+
+ const highlightProgress = spring({
+ fps,
+ frame,
+ config: {damping: 200},
+ delay,
+ durationInFrames,
+ });
+ const scaleX = Math.max(0, Math.min(1, highlightProgress));
+
+ return (
+
+ {word}
+
+ );
+};
+
+export const MyAnimation = () => {
+ const highlightIndex = FULL_TEXT.indexOf(HIGHLIGHT_WORD);
+ const hasHighlight = highlightIndex >= 0;
+ const preText = hasHighlight ? FULL_TEXT.slice(0, highlightIndex) : FULL_TEXT;
+ const postText = hasHighlight
+ ? FULL_TEXT.slice(highlightIndex + HIGHLIGHT_WORD.length)
+ : '';
+
+ return (
+
+
+ {hasHighlight ? (
+ <>
+ {preText}
+ {postText}
+
+ ) : (
+ {FULL_TEXT}
+ )}
+
+
+ );
+};
diff --git a/.agents/skills/remotion-best-practices/rules/audio-visualization.md b/.agents/skills/remotion-best-practices/rules/audio-visualization.md
new file mode 100644
index 0000000..733b0d3
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/audio-visualization.md
@@ -0,0 +1,198 @@
+---
+name: audio-visualization
+description: Audio visualization patterns - spectrum bars, waveforms, bass-reactive effects
+metadata:
+ tags: audio, visualization, spectrum, waveform, bass, music, audiogram, frequency
+---
+
+# Audio Visualization in Remotion
+
+## Prerequisites
+
+```bash
+npx remotion add @remotion/media-utils
+```
+
+## Loading Audio Data
+
+Use `useWindowedAudioData()` (https://www.remotion.dev/docs/use-windowed-audio-data) to load audio data:
+
+```tsx
+import { useWindowedAudioData } from "@remotion/media-utils";
+import { staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+
+const frame = useCurrentFrame();
+const { fps } = useVideoConfig();
+
+const { audioData, dataOffsetInSeconds } = useWindowedAudioData({
+ src: staticFile("podcast.wav"),
+ frame,
+ fps,
+ windowInSeconds: 30,
+});
+```
+
+## Spectrum Bar Visualization
+
+Use `visualizeAudio()` (https://www.remotion.dev/docs/visualize-audio) to get frequency data for bar charts:
+
+```tsx
+import { useWindowedAudioData, visualizeAudio } from "@remotion/media-utils";
+import { staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+
+const frame = useCurrentFrame();
+const { fps } = useVideoConfig();
+
+const { audioData, dataOffsetInSeconds } = useWindowedAudioData({
+ src: staticFile("music.mp3"),
+ frame,
+ fps,
+ windowInSeconds: 30,
+});
+
+if (!audioData) {
+ return null;
+}
+
+const frequencies = visualizeAudio({
+ fps,
+ frame,
+ audioData,
+ numberOfSamples: 256,
+ optimizeFor: "speed",
+ dataOffsetInSeconds,
+});
+
+return (
+
+ {frequencies.map((v, i) => (
+
+ ))}
+
` with offsets.
+
+## Waveform Visualization
+
+Use `visualizeAudioWaveform()` (https://www.remotion.dev/docs/media-utils/visualize-audio-waveform) with `createSmoothSvgPath()` (https://www.remotion.dev/docs/media-utils/create-smooth-svg-path) for oscilloscope-style displays:
+
+```tsx
+import {
+ createSmoothSvgPath,
+ useWindowedAudioData,
+ visualizeAudioWaveform,
+} from "@remotion/media-utils";
+import { staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+
+const frame = useCurrentFrame();
+const { width, fps } = useVideoConfig();
+const HEIGHT = 200;
+
+const { audioData, dataOffsetInSeconds } = useWindowedAudioData({
+ src: staticFile("voice.wav"),
+ frame,
+ fps,
+ windowInSeconds: 30,
+});
+
+if (!audioData) {
+ return null;
+}
+
+const waveform = visualizeAudioWaveform({
+ fps,
+ frame,
+ audioData,
+ numberOfSamples: 256,
+ windowInSeconds: 0.5,
+ dataOffsetInSeconds,
+});
+
+const path = createSmoothSvgPath({
+ points: waveform.map((y, i) => ({
+ x: (i / (waveform.length - 1)) * width,
+ y: HEIGHT / 2 + (y * HEIGHT) / 2,
+ })),
+});
+
+return (
+
+
+);
+```
+
+## Bass-Reactive Effects
+
+Extract low frequencies for beat-reactive animations:
+
+```tsx
+const frequencies = visualizeAudio({
+ fps,
+ frame,
+ audioData,
+ numberOfSamples: 128,
+ optimizeFor: "speed",
+ dataOffsetInSeconds,
+});
+
+const lowFrequencies = frequencies.slice(0, 32);
+const bassIntensity =
+ lowFrequencies.reduce((sum, v) => sum + v, 0) / lowFrequencies.length;
+
+const scale = 1 + bassIntensity * 0.5;
+const opacity = Math.min(0.6, bassIntensity * 0.8);
+```
+
+## Volume-Based Waveform
+
+Use `getWaveformPortion()` (https://www.remotion.dev/docs/get-waveform-portion) when you need simplified volume data instead of frequency spectrum:
+
+```tsx
+import { getWaveformPortion } from "@remotion/media-utils";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+
+const frame = useCurrentFrame();
+const { fps } = useVideoConfig();
+const currentTimeInSeconds = frame / fps;
+
+const waveform = getWaveformPortion({
+ audioData,
+ startTimeInSeconds: currentTimeInSeconds,
+ durationInSeconds: 5,
+ numberOfSamples: 50,
+});
+
+// Returns array of { index, amplitude } objects (amplitude: 0-1)
+waveform.map((bar) => (
+
+));
+```
+
+## Postprocessing
+
+Low frequencies naturally dominate. Apply logarithmic scaling for visual balance:
+
+```tsx
+const minDb = -100;
+const maxDb = -30;
+
+const scaled = frequencies.map((value) => {
+ const db = 20 * Math.log10(value);
+ return (db - minDb) / (maxDb - minDb);
+});
+```
diff --git a/.agents/skills/remotion-best-practices/rules/audio.md b/.agents/skills/remotion-best-practices/rules/audio.md
new file mode 100644
index 0000000..1097c70
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/audio.md
@@ -0,0 +1,169 @@
+---
+name: audio
+description: Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
+metadata:
+ tags: audio, media, trim, volume, speed, loop, pitch, mute, sound, sfx
+---
+
+# Using audio in Remotion
+
+## Prerequisites
+
+First, the @remotion/media package needs to be installed.
+If it is not installed, use the following command:
+
+```bash
+npx remotion add @remotion/media
+```
+
+## Importing Audio
+
+Use `` from `@remotion/media` to add audio to your composition.
+
+```tsx
+import { Audio } from "@remotion/media";
+import { staticFile } from "remotion";
+
+export const MyComposition = () => {
+ return ` components.
+
+## Trimming
+
+Use `trimBefore` and `trimAfter` to remove portions of the audio. Values are in frames.
+
+```tsx
+const { fps } = useVideoConfig();
+
+return (
+ ` to delay when it starts:
+
+```tsx
+import { Sequence, staticFile } from "remotion";
+import { Audio } from "@remotion/media";
+
+const { fps } = useVideoConfig();
+
+return (
+
+
+);
+```
+
+The audio will start playing after 1 second.
+
+## Volume
+
+Set a static volume (0 to 1):
+
+```tsx
+
+ interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
+ }
+ />
+);
+```
+
+The value of `f` starts at 0 when the audio begins to play, not the composition frame.
+
+## Muting
+
+Use `muted` to silence the audio. It can be set dynamically:
+
+```tsx
+const frame = useCurrentFrame();
+const { fps } = useVideoConfig();
+
+return (
+ = 2 * fps && frame <= 4 * fps} // Mute between 2s and 4s
+ />
+);
+```
+
+## Speed
+
+Use `playbackRate` to change the playback speed:
+
+```tsx
+ interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
+/>
+```
+
+## Pitch
+
+Use `toneFrequency` to adjust the pitch without affecting speed. Values range from 0.01 to 2:
+
+```tsx
+` to dynamically set duration, dimensions, and transform props before rendering.
+
+```tsx
+ = async ({
+ props,
+}) => {
+ const durationInSeconds = await getVideoDuration(props.videoSrc);
+
+ return {
+ durationInFrames: Math.ceil(durationInSeconds * 30),
+ };
+};
+```
+
+## Matching dimensions of a video
+
+Use the [`getVideoDimensions`](./get-video-dimensions.md) skill to get the video dimensions:
+
+```tsx
+import { CalculateMetadataFunction } from "remotion";
+import { getVideoDuration } from "./get-video-duration";
+import { getVideoDimensions } from "./get-video-dimensions";
+
+const calculateMetadata: CalculateMetadataFunction = async ({
+ props,
+}) => {
+ const dimensions = await getVideoDimensions(props.videoSrc);
+
+ return {
+ width: dimensions.width,
+ height: dimensions.height,
+ };
+};
+```
+
+## Setting duration based on multiple videos
+
+```tsx
+const calculateMetadata: CalculateMetadataFunction = async ({
+ props,
+}) => {
+ const metadataPromises = props.videos.map((video) =>
+ getVideoDuration(video.src),
+ );
+ const allMetadata = await Promise.all(metadataPromises);
+
+ const totalDuration = allMetadata.reduce(
+ (sum, durationInSeconds) => sum + durationInSeconds,
+ 0,
+ );
+
+ return {
+ durationInFrames: Math.ceil(totalDuration * 30),
+ };
+};
+```
+
+## Setting a default outName
+
+Set the default output filename based on props:
+
+```tsx
+const calculateMetadata: CalculateMetadataFunction = async ({
+ props,
+}) => {
+ return {
+ defaultOutName: `video-${props.id}`, // .mp4 is added automatically
+ };
+};
+```
+
+## Transforming props
+
+Fetch data or transform props before rendering:
+
+```tsx
+const calculateMetadata: CalculateMetadataFunction = async ({
+ props,
+ abortSignal,
+}) => {
+ const response = await fetch(props.dataUrl, { signal: abortSignal });
+ const data = await response.json();
+
+ return {
+ props: {
+ ...props,
+ fetchedData: data,
+ },
+ };
+};
+```
+
+The `abortSignal` cancels stale requests when props change in the Studio.
+
+## Return value
+
+All fields are optional. Returned values override the `` props:
+
+- `durationInFrames`: Number of frames
+- `width`: Composition width in pixels
+- `height`: Composition height in pixels
+- `fps`: Frames per second
+- `props`: Transformed props passed to the component
+- `defaultOutName`: Default output filename
+- `defaultCodec`: Default codec for rendering
diff --git a/.agents/skills/remotion-best-practices/rules/compositions.md b/.agents/skills/remotion-best-practices/rules/compositions.md
new file mode 100644
index 0000000..4f6b865
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/compositions.md
@@ -0,0 +1,133 @@
+---
+name: compositions
+description: Defining compositions, stills, folders, default props and dynamic metadata
+metadata:
+ tags: composition, still, folder, props, metadata
+---
+
+A `` defines the component, width, height, fps and duration of a renderable video.
+
+## Default Props
+
+Pass `defaultProps` to provide initial values for your component.
+Values must be JSON-serializable (`Date`, `Map`, `Set`, and `staticFile()` are supported).
+
+```tsx
+import { Composition } from "remotion";
+import { MyComposition, MyCompositionProps } from "./MyComposition";
+
+export const RemotionRoot = () => {
+ return (
+ ` to organize compositions in the sidebar.
+Folder names can only contain letters, numbers, and hyphens.
+
+```tsx
+import { Composition, Folder } from "remotion";
+
+export const RemotionRoot = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+};
+```
+
+## Stills
+
+Use `` for single-frame images. It does not require `durationInFrames` or `fps`.
+
+```tsx
+import { Still } from "remotion";
+import { Thumbnail } from "./Thumbnail";
+
+export const RemotionRoot = () => {
+ return (
+ ` component with a `width` and `height` prop to specify the size of the composition.
+
+```tsx
+
+
+
+
+```
diff --git a/.agents/skills/remotion-best-practices/rules/display-captions.md b/.agents/skills/remotion-best-practices/rules/display-captions.md
new file mode 100644
index 0000000..f9cb0f0
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/display-captions.md
@@ -0,0 +1,184 @@
+---
+name: display-captions
+description: Displaying captions in Remotion with TikTok-style pages and word highlighting
+metadata:
+ tags: captions, subtitles, display, tiktok, highlight
+---
+
+# Displaying captions in Remotion
+
+This guide explains how to display captions in Remotion, assuming you already have captions in the [`Caption`](https://www.remotion.dev/docs/captions/caption) format.
+
+## Prerequisites
+
+Read [Transcribing audio](transcribe-captions.md) for how to generate captions.
+
+First, the [`@remotion/captions`](https://www.remotion.dev/docs/captions) package needs to be installed.
+If it is not installed, use the following command:
+
+```bash
+npx remotion add @remotion/captions
+```
+
+## Fetching captions
+
+First, fetch your captions JSON file. Use [`useDelayRender()`](https://www.remotion.dev/docs/use-delay-render) to hold the render until the captions are loaded:
+
+```tsx
+import { useState, useEffect, useCallback } from "react";
+import { AbsoluteFill, staticFile, useDelayRender } from "remotion";
+import type { Caption } from "@remotion/captions";
+
+export const MyComponent: React.FC = () => {
+ const [captions, setCaptions] = useState(null);
+ const { delayRender, continueRender, cancelRender } = useDelayRender();
+ const [handle] = useState(() => delayRender());
+
+ const fetchCaptions = useCallback(async () => {
+ try {
+ // Assuming captions.json is in the public/ folder.
+ const response = await fetch(staticFile("captions123.json"));
+ const data = await response.json();
+ setCaptions(data);
+ continueRender(handle);
+ } catch (e) {
+ cancelRender(e);
+ }
+ }, [continueRender, cancelRender, handle]);
+
+ useEffect(() => {
+ fetchCaptions();
+ }, [fetchCaptions]);
+
+ if (!captions) {
+ return null;
+ }
+
+ return {/* Render captions here */} ;
+};
+```
+
+## Creating pages
+
+Use `createTikTokStyleCaptions()` to group captions into pages. The `combineTokensWithinMilliseconds` option controls how many words appear at once:
+
+```tsx
+import { useMemo } from "react";
+import { createTikTokStyleCaptions } from "@remotion/captions";
+import type { Caption } from "@remotion/captions";
+
+// How often captions should switch (in milliseconds)
+// Higher values = more words per page
+// Lower values = fewer words (more word-by-word)
+const SWITCH_CAPTIONS_EVERY_MS = 1200;
+
+const { pages } = useMemo(() => {
+ return createTikTokStyleCaptions({
+ captions,
+ combineTokensWithinMilliseconds: SWITCH_CAPTIONS_EVERY_MS,
+ });
+}, [captions]);
+```
+
+## Rendering with Sequences
+
+Map over the pages and render each one in a ``. Calculate the start frame and duration from the page timing:
+
+```tsx
+import { Sequence, useVideoConfig, AbsoluteFill } from "remotion";
+import type { TikTokPage } from "@remotion/captions";
+
+const CaptionedContent: React.FC = () => {
+ const { fps } = useVideoConfig();
+
+ return (
+
+ {pages.map((page, index) => {
+ const nextPage = pages[index + 1] ?? null;
+ const startFrame = (page.startMs / 1000) * fps;
+ const endFrame = Math.min(
+ nextPage ? (nextPage.startMs / 1000) * fps : Infinity,
+ startFrame + (SWITCH_CAPTIONS_EVERY_MS / 1000) * fps,
+ );
+ const durationInFrames = endFrame - startFrame;
+
+ if (durationInFrames <= 0) {
+ return null;
+ }
+
+ return (
+
+
+ );
+ })}
+
+ );
+};
+```
+
+## White-space preservation
+
+The captions are whitespace sensitive. You should include spaces in the `text` field before each word. Use `whiteSpace: "pre"` to preserve the whitespace in the captions.
+
+## Separate component for captions
+
+Put captioning logic in a separate component.
+Make a new file for it.
+
+## Word highlighting
+
+A caption page contains `tokens` which you can use to highlight the currently spoken word:
+
+```tsx
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
+import type { TikTokPage } from "@remotion/captions";
+
+const HIGHLIGHT_COLOR = "#39E508";
+
+const CaptionPage: React.FC<{ page: TikTokPage }> = ({ page }) => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ // Current time relative to the start of the sequence
+ const currentTimeMs = (frame / fps) * 1000;
+ // Convert to absolute time by adding the page start
+ const absoluteTimeMs = page.startMs + currentTimeMs;
+
+ return (
+
+
+ {page.tokens.map((token) => {
+ const isActive =
+ token.fromMs <= absoluteTimeMs && token.toMs > absoluteTimeMs;
+
+ return (
+
+ {token.text}
+
+ );
+ })}
+
+
+ );
+};
+```
+
+## Display captions alongside video content
+
+By default, put the captions alongside the video content, so the captions are in sync.
+For each video, make a new captions JSON file.
+
+```tsx
+
+
+```
diff --git a/.agents/skills/remotion-best-practices/rules/ffmpeg.md b/.agents/skills/remotion-best-practices/rules/ffmpeg.md
new file mode 100644
index 0000000..d3fd100
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/ffmpeg.md
@@ -0,0 +1,34 @@
+---
+name: ffmpeg
+description: Using FFmpeg and FFprobe in Remotion
+metadata:
+ tags: ffmpeg, ffprobe, video, trimming
+---
+
+## FFmpeg in Remotion
+
+`ffmpeg` and `ffprobe` do not need to be installed. They are available via the `npx remotion ffmpeg` and `npx remotion ffprobe`:
+
+```bash
+npx remotion ffmpeg -i input.mp4 output.mp3
+npx remotion ffprobe input.mp4
+```
+
+### Trimming videos
+
+You have 2 options for trimming videos:
+
+1. **Preferred**: Use the `trimBefore` and `trimAfter` props of the `` component. This is non-destructive, requires no re-encoding, and you can change the trim at any time.
+
+```tsx
+import {Video} from '@remotion/media';
+
+` to display a GIF, APNG, AVIF or WebP image synchronized with Remotion's timeline:
+
+```tsx
+import { AnimatedImage, staticFile } from "remotion";
+
+export const MyComposition = () => {
+ return (
+ ` does not work (only supported in Chrome and Firefox), you can use `` from `@remotion/gif` instead.
+
+```bash
+npx remotion add @remotion/gif # If project uses npm
+bunx remotion add @remotion/gif # If project uses bun
+yarn remotion add @remotion/gif # If project uses yarn
+pnpm exec remotion add @remotion/gif # If project uses pnpm
+```
+
+```tsx
+import { Gif } from "@remotion/gif";
+import { staticFile } from "remotion";
+
+export const MyComposition = () => {
+ return ` component has the same props as `` but only supports GIF files.
diff --git a/.agents/skills/remotion-best-practices/rules/google-fonts.md b/.agents/skills/remotion-best-practices/rules/google-fonts.md
new file mode 100644
index 0000000..87c0769
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/google-fonts.md
@@ -0,0 +1,72 @@
+---
+name: fonts
+description: Loading Google Fonts and local fonts in Remotion
+metadata:
+ tags: fonts, google-fonts, typography, text
+---
+
+# Using fonts in Remotion
+
+## Google Fonts with @remotion/google-fonts
+
+The recommended way to use Google Fonts. It's type-safe and automatically blocks rendering until the font is ready.
+
+### Prerequisites
+
+First, the @remotion/google-fonts package needs to be installed.
+If it is not installed, use the following command:
+
+```bash
+npx remotion add @remotion/google-fonts # If project uses npm
+bunx remotion add @remotion/google-fonts # If project uses bun
+yarn remotion add @remotion/google-fonts # If project uses yarn
+pnpm exec remotion add @remotion/google-fonts # If project uses pnpm
+```
+
+```tsx
+import { loadFont } from "@remotion/google-fonts/Lobster";
+
+const { fontFamily } = loadFont();
+
+export const MyComposition = () => {
+ return Hello World
;
+};
+```
+
+Preferrably, specify only needed weights and subsets to reduce file size:
+
+```tsx
+import { loadFont } from "@remotion/google-fonts/Roboto";
+
+const { fontFamily } = loadFont("normal", {
+ weights: ["400", "700"],
+ subsets: ["latin"],
+});
+```
+
+## Using in components
+
+Call `loadFont()` at the top level of your component or in a separate file that's imported early:
+
+```tsx
+import { loadFont } from "@remotion/google-fonts/Montserrat";
+
+const { fontFamily } = loadFont("normal", {
+ weights: ["400", "700"],
+ subsets: ["latin"],
+});
+
+export const Title: React.FC<{ text: string }> = ({ text }) => {
+ return (
+
+ {text}
+
+ );
+};
+```
diff --git a/.agents/skills/remotion-best-practices/rules/html-in-canvas.md b/.agents/skills/remotion-best-practices/rules/html-in-canvas.md
new file mode 100644
index 0000000..7496800
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/html-in-canvas.md
@@ -0,0 +1,118 @@
+# Using `` in Remotion
+
+Renders children into a `` so you can post-process them with the Canvas 2D API or WebGL.
+
+Only works in Chrome 149+ with the `chrome://flags/#canvas-draw-element` flag enabled.
+Give the user a notice.
+
+## Nesting
+
+Do not nest `` inside another ``. Remotion throws:
+
+```
+ effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.
+```
+
+## Enabling WebGL during renders
+
+If you make use of WebGL during renders, you need to enable it:
+
+From the CLI:
+
+```bash
+npx remotion render --gl=angle
+```
+
+Set it as the default for Studio and CLI (advised):
+
+```ts
+import { Config } from "@remotion/cli/config";
+
+Config.setChromiumOpenGlRenderer("angle");
+```
+
+## Basic usage
+
+By default, draws to canvas with no effect applied:
+
+```tsx
+import { HtmlInCanvas } from "remotion";
+
+export const MyComp = () => {
+ return (
+
+ Hello
+
+ );
+};
+```
+
+## 2D effect with `onPaint`
+
+`onPaint` runs whenever the content updates. Call `ctx.drawElementImage(elementImage, 0, 0)` to draw the captured DOM, and assign the returned transform to `element.style.transform` so DOM selection still aligns with the painted output.
+
+```tsx
+import {
+ AbsoluteFill,
+ HtmlInCanvas,
+ type HtmlInCanvasOnPaint,
+ useCurrentFrame,
+ useVideoConfig,
+} from "remotion";
+import { useCallback } from "react";
+
+export const Blur = () => {
+ const frame = useCurrentFrame();
+ const { width, height, fps } = useVideoConfig();
+
+ const onPaint: HtmlInCanvasOnPaint = useCallback(
+ ({ canvas, element, elementImage }) => {
+ const ctx = canvas.getContext("2d");
+ if (!ctx) throw new Error("Failed to acquire 2D context");
+
+ const blurPx = 4 + 18 * (0.5 + 0.5 * Math.sin((frame / fps) * Math.PI));
+
+ ctx.reset();
+ ctx.filter = `blur(${blurPx}px)`;
+ const transform = ctx.drawElementImage(elementImage, 0, 0);
+ element.style.transform = transform.toString();
+ },
+ [frame, fps],
+ );
+
+ return (
+
+
+ Hello
+
+
+ );
+};
+```
+
+## WebGL effects
+
+For WebGL, set up the context, program, and texture in `onInit` and return a cleanup function. Inside `onPaint`, upload the captured DOM with `gl.texElementImage2D(...)` and draw.
+
+```tsx
+const onInit: HtmlInCanvasOnInit = useCallback(({ canvas }) => {
+ const gl = canvas.getContext("webgl2", { alpha: true, premultipliedAlpha: true });
+ if (!gl) throw new Error("WebGL2 unavailable");
+ gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+ // compile program, create texture, set up VAO...
+ return () => {
+ // delete program, texture, buffers...
+ };
+}, []);
+
+const onPaint: HtmlInCanvasOnPaint = useCallback(({ elementImage }) => {
+ gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elementImage);
+ gl.drawArrays(gl.TRIANGLES, 0, 6);
+}, []);
+```
+
+For a fully working minimal example, see https://github.com/remotion-dev/remotion/blob/main/packages/docs/components/demos/HtmlInCanvasDocsDemoWebGL.tsx.
+
+## Async `onPaint`
+
+`onPaint` may be `async`. Remotion holds the frame open via `delayRender()` until the promise resolves. Useful for multi-pass effects with `createImageBitmap`.
diff --git a/.agents/skills/remotion-best-practices/rules/images.md b/.agents/skills/remotion-best-practices/rules/images.md
new file mode 100644
index 0000000..6882b26
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/images.md
@@ -0,0 +1,71 @@
+## Sizing and positioning
+
+Use the `style` prop to control size and position:
+
+```tsx
+(null);
+ const { delayRender, continueRender, cancelRender } = useDelayRender();
+ const [handle] = useState(() => delayRender());
+
+ const fetchCaptions = useCallback(async () => {
+ try {
+ const response = await fetch(staticFile("subtitles.srt"));
+ const text = await response.text();
+ const { captions: parsed } = parseSrt({ input: text });
+ setCaptions(parsed);
+ continueRender(handle);
+ } catch (e) {
+ cancelRender(e);
+ }
+ }, [continueRender, cancelRender, handle]);
+
+ useEffect(() => {
+ fetchCaptions();
+ }, [fetchCaptions]);
+
+ if (!captions) {
+ return null;
+ }
+
+ return {/* Use captions here */} ;
+};
+```
+
+Remote URLs are also supported - you can `fetch()` a remote file via URL instead of using `staticFile()`.
+
+## Using imported captions
+
+Once parsed, the captions are in the `Caption` format and can be used with all `@remotion/captions` utilities.
diff --git a/.agents/skills/remotion-best-practices/rules/light-leaks.md b/.agents/skills/remotion-best-practices/rules/light-leaks.md
new file mode 100644
index 0000000..354b956
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/light-leaks.md
@@ -0,0 +1,73 @@
+---
+name: light-leaks
+description: Light leak overlay effects for Remotion using @remotion/light-leaks.
+metadata:
+ tags: light-leaks, overlays, effects, transitions
+---
+
+## Light Leaks
+
+This only works from Remotion 4.0.415 and up. Use `npx remotion versions` to check your Remotion version and `npx remotion upgrade` to upgrade your Remotion version.
+
+`` from `@remotion/light-leaks` renders a WebGL-based light leak effect. It reveals during the first half of its duration and retracts during the second half.
+
+Typically used inside a `` to play over the cut point between two scenes. See the **transitions** rule for `` and overlay usage.
+
+## Prerequisites
+
+```bash
+npx remotion add @remotion/light-leaks
+```
+
+## Basic usage with TransitionSeries
+
+```tsx
+import { TransitionSeries } from "@remotion/transitions";
+import { LightLeak } from "@remotion/light-leaks";
+
+
+
+
+
+
+
+
+ ;
+```
+
+## Props
+
+- `durationInFrames?` — defaults to the parent sequence/composition duration. The effect reveals during the first half and retracts during the second half.
+- `seed?` — determines the shape of the light leak pattern. Different seeds produce different patterns. Default: `0`.
+- `hueShift?` — rotates the hue in degrees (`0`–`360`). Default: `0` (yellow-to-orange). `120` = green, `240` = blue.
+
+## Customizing the look
+
+```tsx
+import { LightLeak } from "@remotion/light-leaks";
+
+// Blue-tinted light leak with a different pattern
+` can also be used outside of ``, for example as a decorative overlay in any composition:
+
+```tsx
+import { AbsoluteFill } from "remotion";
+import { LightLeak } from "@remotion/light-leaks";
+
+const MyComp: React.FC = () => (
+
+
+);
+```
diff --git a/.agents/skills/remotion-best-practices/rules/local-fonts.md b/.agents/skills/remotion-best-practices/rules/local-fonts.md
new file mode 100644
index 0000000..30dce5f
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/local-fonts.md
@@ -0,0 +1,65 @@
+For local font files, use the `@remotion/fonts` package.
+
+### Prerequisites
+
+First, install @remotion/fonts:
+
+```bash
+npx remotion add @remotion/fonts # If project uses npm
+bunx remotion add @remotion/fonts # If project uses bun
+yarn remotion add @remotion/fonts # If project uses yarn
+pnpm exec remotion add @remotion/fonts # If project uses pnpm
+```
+
+### Loading a local font
+
+Place your font file in the `public/` folder and use `loadFont()`:
+
+```tsx
+import { loadFont } from "@remotion/fonts";
+import { staticFile } from "remotion";
+
+await loadFont({
+ family: "MyFont",
+ url: staticFile("MyFont-Regular.woff2"),
+});
+
+export const MyComposition = () => {
+ return Hello World
;
+};
+```
+
+### Loading multiple weights
+
+Load each weight separately with the same family name:
+
+```tsx
+import { loadFont } from "@remotion/fonts";
+import { staticFile } from "remotion";
+
+await Promise.all([
+ loadFont({
+ family: "Inter",
+ url: staticFile("Inter-Regular.woff2"),
+ weight: "400",
+ }),
+ loadFont({
+ family: "Inter",
+ url: staticFile("Inter-Bold.woff2"),
+ weight: "700",
+ }),
+]);
+```
+
+### Available options
+
+```tsx
+loadFont({
+ family: "MyFont", // Required: name to use in CSS
+ url: staticFile("font.woff2"), // Required: font file URL
+ format: "woff2", // Optional: auto-detected from extension
+ weight: "400", // Optional: font weight
+ style: "normal", // Optional: normal or italic
+ display: "block", // Optional: font-display behavior
+});
+```
diff --git a/.agents/skills/remotion-best-practices/rules/lottie.md b/.agents/skills/remotion-best-practices/rules/lottie.md
new file mode 100644
index 0000000..4b0c4ee
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/lottie.md
@@ -0,0 +1,70 @@
+---
+name: lottie
+description: Embedding Lottie animations in Remotion.
+metadata:
+ category: Animation
+---
+
+# Using Lottie Animations in Remotion
+
+## Prerequisites
+
+First, the @remotion/lottie package needs to be installed.
+If it is not, use the following command:
+
+```bash
+npx remotion add @remotion/lottie # If project uses npm
+bunx remotion add @remotion/lottie # If project uses bun
+yarn remotion add @remotion/lottie # If project uses yarn
+pnpm exec remotion add @remotion/lottie # If project uses pnpm
+```
+
+## Displaying a Lottie file
+
+To import a Lottie animation:
+
+- Fetch the Lottie asset
+- Wrap the loading process in `delayRender()` and `continueRender()`
+- Save the animation data in a state
+- Render the Lottie animation using the `Lottie` component from the `@remotion/lottie` package
+
+```tsx
+import { Lottie, LottieAnimationData } from "@remotion/lottie";
+import { useEffect, useState } from "react";
+import { cancelRender, continueRender, delayRender } from "remotion";
+
+export const MyAnimation = () => {
+ const [handle] = useState(() => delayRender("Loading Lottie animation"));
+
+ const [animationData, setAnimationData] =
+ useState(null);
+
+ useEffect(() => {
+ fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json")
+ .then((data) => data.json())
+ .then((json) => {
+ setAnimationData(json);
+ continueRender(handle);
+ })
+ .catch((err) => {
+ cancelRender(err);
+ });
+ }, [handle]);
+
+ if (!animationData) {
+ return null;
+ }
+
+ return (null);
+ const { delayRender, continueRender } = useDelayRender();
+
+ const { width, height } = useVideoConfig();
+ const [handle] = useState(() => delayRender("Loading map..."));
+ const [map, setMap] = useState(null);
+
+ useEffect(() => {
+ const _map = new Map({
+ container: ref.current!,
+ zoom: 11.53,
+ center: [6.5615, 46.0598],
+ pitch: 65,
+ bearing: 0,
+ style: "mapbox://styles/mapbox/standard",
+ interactive: false,
+ fadeDuration: 0,
+ });
+
+ _map.on("style.load", () => {
+ // Hide all features from the Mapbox Standard style
+ const hideFeatures = [
+ "showRoadsAndTransit",
+ "showRoads",
+ "showTransit",
+ "showPedestrianRoads",
+ "showRoadLabels",
+ "showTransitLabels",
+ "showPlaceLabels",
+ "showPointOfInterestLabels",
+ "showPointsOfInterest",
+ "showAdminBoundaries",
+ "showLandmarkIcons",
+ "showLandmarkIconLabels",
+ "show3dObjects",
+ "show3dBuildings",
+ "show3dTrees",
+ "show3dLandmarks",
+ "show3dFacades",
+ ];
+ for (const feature of hideFeatures) {
+ _map.setConfigProperty("basemap", feature, false);
+ }
+
+ _map.setConfigProperty("basemap", "colorTrunks", "rgba(0, 0, 0, 0)");
+
+ _map.addSource("trace", {
+ type: "geojson",
+ data: {
+ type: "Feature",
+ properties: {},
+ geometry: {
+ type: "LineString",
+ coordinates: lineCoordinates,
+ },
+ },
+ });
+ _map.addLayer({
+ type: "line",
+ source: "trace",
+ id: "line",
+ paint: {
+ "line-color": "black",
+ "line-width": 5,
+ },
+ layout: {
+ "line-cap": "round",
+ "line-join": "round",
+ },
+ });
+ });
+
+ _map.on("load", () => {
+ continueRender(handle);
+ setMap(_map);
+ });
+ }, [handle, lineCoordinates]);
+
+ const style: React.CSSProperties = useMemo(
+ () => ({ width, height, position: "absolute" }),
+ [width, height],
+ );
+
+ return = {
+ type: "Feature",
+ properties: {},
+ geometry: {
+ type: "LineString",
+ coordinates: [start, [currentLng, currentLat]],
+ },
+ };
+
+ const source = map.getSource("trace") as mapboxgl.GeoJSONSource;
+ if (source) {
+ source.setData(lineData);
+ }
+
+ map.once("idle", () => continueRender(animationHandle));
+}, [frame, map, durationInFrames]);
+```
+
+### Curved lines (geodesic/great circle)
+
+To animate a line that follows the geodesic (great circle) path between two points, use turf's `lineSliceAlong`. This is useful for showing flight paths or the actual shortest distance on Earth.
+
+```tsx
+import * as turf from "@turf/turf";
+
+const routeLine = turf.lineString(lineCoordinates);
+const routeDistance = turf.length(routeLine);
+
+const currentDistance = Math.max(0.001, routeDistance * progress);
+const slicedLine = turf.lineSliceAlong(routeLine, 0, currentDistance);
+
+const source = map.getSource("route") as mapboxgl.GeoJSONSource;
+if (source) {
+ source.setData(slicedLine);
+}
+```
+
+## Markers
+
+Add labels, and markers where appropriate.
+
+```tsx
+_map.addSource("markers", {
+ type: "geojson",
+ data: {
+ type: "FeatureCollection",
+ features: [
+ {
+ type: "Feature",
+ properties: { name: "Point 1" },
+ geometry: { type: "Point", coordinates: [-118.2437, 34.0522] },
+ },
+ ],
+ },
+});
+
+_map.addLayer({
+ id: "city-markers",
+ type: "circle",
+ source: "markers",
+ paint: {
+ "circle-radius": 40,
+ "circle-color": "#FF4444",
+ "circle-stroke-width": 4,
+ "circle-stroke-color": "#FFFFFF",
+ },
+});
+
+_map.addLayer({
+ id: "labels",
+ type: "symbol",
+ source: "markers",
+ layout: {
+ "text-field": ["get", "name"],
+ "text-font": ["DIN Pro Bold", "Arial Unicode MS Bold"],
+ "text-size": 50,
+ "text-offset": [0, 0.5],
+ "text-anchor": "top",
+ },
+ paint: {
+ "text-color": "#FFFFFF",
+ "text-halo-color": "#000000",
+ "text-halo-width": 2,
+ },
+});
+```
+
+Make sure they are big enough. Check the composition dimensions and scale the labels accordingly.
+For a composition size of 1920x1080, the label font size should be at least 40px.
+
+IMPORTANT: Keep the `text-offset` small enough so it is close to the marker. Consider the marker circle radius. For a circle radius of 40, this is a good offset:
+
+```tsx
+"text-offset": [0, 0.5],
+```
+
+## 3D buildings
+
+To enable 3D buildings, use the following code:
+
+```tsx
+_map.setConfigProperty("basemap", "show3dObjects", true);
+_map.setConfigProperty("basemap", "show3dLandmarks", true);
+_map.setConfigProperty("basemap", "show3dBuildings", true);
+```
+
+## Rendering
+
+When rendering a map animation, make sure to render with the following flags:
+
+```
+npx remotion render --gl=angle --concurrency=1
+```
diff --git a/.agents/skills/remotion-best-practices/rules/measuring-dom-nodes.md b/.agents/skills/remotion-best-practices/rules/measuring-dom-nodes.md
new file mode 100644
index 0000000..4e63424
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/measuring-dom-nodes.md
@@ -0,0 +1,34 @@
+---
+name: measuring-dom-nodes
+description: Measuring DOM element dimensions in Remotion
+metadata:
+ tags: measure, layout, dimensions, getBoundingClientRect, scale
+---
+
+# Measuring DOM nodes in Remotion
+
+Remotion applies a `scale()` transform to the video container, which affects values from `getBoundingClientRect()`. Use `useCurrentScale()` to get correct measurements.
+
+## Measuring element dimensions
+
+```tsx
+import { useCurrentScale } from "remotion";
+import { useRef, useEffect, useState } from "react";
+
+export const MyComponent = () => {
+ const ref = useRef(null);
+ const scale = useCurrentScale();
+ const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+ useEffect(() => {
+ if (!ref.current) return;
+ const rect = ref.current.getBoundingClientRect();
+ setDimensions({
+ width: rect.width / scale,
+ height: rect.height / scale,
+ });
+ }, [scale]);
+
+ return Content to measure
;
+};
+```
diff --git a/.agents/skills/remotion-best-practices/rules/measuring-text.md b/.agents/skills/remotion-best-practices/rules/measuring-text.md
new file mode 100644
index 0000000..070a184
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/measuring-text.md
@@ -0,0 +1,140 @@
+---
+name: measuring-text
+description: Measuring text dimensions, fitting text to containers, and checking overflow
+metadata:
+ tags: measure, text, layout, dimensions, fitText, fillTextBox
+---
+
+# Measuring text in Remotion
+
+## Prerequisites
+
+Install @remotion/layout-utils if it is not already installed:
+
+```bash
+npx remotion add @remotion/layout-utils
+```
+
+## Measuring text dimensions
+
+Use `measureText()` to calculate the width and height of text:
+
+```tsx
+import { measureText } from "@remotion/layout-utils";
+
+const { width, height } = measureText({
+ text: "Hello World",
+ fontFamily: "Arial",
+ fontSize: 32,
+ fontWeight: "bold",
+});
+```
+
+Results are cached - duplicate calls return the cached result.
+
+## Fitting text to a width
+
+Use `fitText()` to find the optimal font size for a container:
+
+```tsx
+import { fitText } from "@remotion/layout-utils";
+
+const { fontSize } = fitText({
+ text: "Hello World",
+ withinWidth: 600,
+ fontFamily: "Inter",
+ fontWeight: "bold",
+});
+
+return (
+
+ Hello World
+
+);
+```
+
+## Checking text overflow
+
+Use `fillTextBox()` to check if text exceeds a box:
+
+```tsx
+import { fillTextBox } from "@remotion/layout-utils";
+
+const box = fillTextBox({ maxBoxWidth: 400, maxLines: 3 });
+
+const words = ["Hello", "World", "This", "is", "a", "test"];
+for (const word of words) {
+ const { exceedsBox } = box.add({
+ text: word + " ",
+ fontFamily: "Arial",
+ fontSize: 24,
+ });
+ if (exceedsBox) {
+ // Text would overflow, handle accordingly
+ break;
+ }
+}
+```
+
+## Best practices
+
+**Load fonts first:** Only call measurement functions after fonts are loaded.
+
+```tsx
+import { loadFont } from "@remotion/google-fonts/Inter";
+
+const { fontFamily, waitUntilDone } = loadFont("normal", {
+ weights: ["400"],
+ subsets: ["latin"],
+});
+
+waitUntilDone().then(() => {
+ // Now safe to measure
+ const { width } = measureText({
+ text: "Hello",
+ fontFamily,
+ fontSize: 32,
+ });
+});
+```
+
+**Use validateFontIsLoaded:** Catch font loading issues early:
+
+```tsx
+measureText({
+ text: "Hello",
+ fontFamily: "MyCustomFont",
+ fontSize: 32,
+ validateFontIsLoaded: true, // Throws if font not loaded
+});
+```
+
+**Match font properties:** Use the same properties for measurement and rendering:
+
+```tsx
+const fontStyle = {
+ fontFamily: "Inter",
+ fontSize: 32,
+ fontWeight: "bold" as const,
+ letterSpacing: "0.5px",
+};
+
+const { width } = measureText({
+ text: "Hello",
+ ...fontStyle,
+});
+
+return Hello
;
+```
+
+**Avoid padding and border:** Use `outline` instead of `border` to prevent layout differences:
+
+```tsx
+Text
+```
diff --git a/.agents/skills/remotion-best-practices/rules/parameters.md b/.agents/skills/remotion-best-practices/rules/parameters.md
new file mode 100644
index 0000000..8860800
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/parameters.md
@@ -0,0 +1,109 @@
+---
+name: parameters
+description: Make a video parametrizable by adding a Zod schema
+metadata:
+ tags: parameters, zod, schema
+---
+
+To make a video parametrizable, a Zod schema can be added to a composition.
+
+First, `zod` must be installed .
+
+Search the project for lockfiles and run the correct command depending on the package manager:
+
+If `package-lock.json` is found, use the following command:
+
+```bash
+npm i zod
+```
+
+If `bun.lockb` is found, use the following command:
+
+```bash
+bun i zod
+```
+
+If `yarn.lock` is found, use the following command:
+
+```bash
+yarn add zod
+```
+
+If `pnpm-lock.yaml` is found, use the following command:
+
+```bash
+pnpm i zod
+```
+
+Then, a Zod schema can be defined alongside the component:
+
+```tsx title="src/MyComposition.tsx"
+import { z } from "zod";
+
+export const MyCompositionSchema = z.object({
+ title: z.string(),
+});
+
+const MyComponent: React.FC> = () => {
+ return (
+
+
{props.title}
+
+ );
+};
+```
+
+In the root file, the schema can be passed to the composition:
+
+```tsx title="src/Root.tsx"
+import { Composition } from "remotion";
+import { MycComponent, MyCompositionSchema } from "./MyComposition";
+
+export const RemotionRoot = () => {
+ return (
+ ` to delay when an element appears in the timeline.
+
+```tsx
+import { Sequence } from "remotion";
+
+export const Title = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
+ extrapolateRight: "clamp",
+ extrapolateLeft: "clamp",
+ easing: Easing.bezier(0.16, 1, 0.3, 1),
+ });
+
+ return Title
;
+};
+
+export const Subtitle = () => {
+ return Subtitle
;
+};
+
+const Main = () => {
+ const {fps} = useVideoConfig();
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+This will by default wrap the component in an absolute fill element.
+If the items should not be wrapped, use the `layout` prop:
+
+```tsx
+
+
+```
+
+## Premounting
+
+This loads the component in the timeline before it is actually played.
+Always premount any ``!
+
+```tsx
+
+
+```
+
+## Series
+
+Use `` when elements should play one after another without overlap.
+
+```tsx
+import { Series } from "remotion";
+
+
+
+
+
+
+
+
+ ;
+```
+
+Same as with ``, the items will be wrapped in an absolute fill element by default when using ``, unless the `layout` prop is set to `none`.
+
+### Series with overlaps
+
+Use negative offset for overlapping sequences:
+
+```tsx
+
+
+
+
+ {/* Starts 15 frames before SceneA ends */}
+
+
+```
+
+## Frame References Inside Sequences
+
+Inside a Sequence, `useCurrentFrame()` returns the local frame (starting from 0):
+
+```tsx
+
+
+```
+
+## Nested Sequences
+
+Sequences can be nested for complex timing:
+
+```tsx
+
+
+
+
+
+
+```
+
+## Nesting compositions within another
+
+To add a composition within another composition, you can use the `` component with a `width` and `height` prop to specify the size of the composition.
+
+```tsx
+
+
+
+
+```
diff --git a/.agents/skills/remotion-best-practices/rules/sfx.md b/.agents/skills/remotion-best-practices/rules/sfx.md
new file mode 100644
index 0000000..41fdc50
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/sfx.md
@@ -0,0 +1,30 @@
+---
+name: sfx
+description: Including sound effects
+metadata:
+ tags: sfx, sound, effect, audio
+---
+
+To include a sound effect, use the `` tag:
+
+```tsx
+import { Audio } from "@remotion/sfx";
+
+` component
+
+Apply the detected trim points using `trimBefore` and `trimAfter` (values are in frames):
+
+```tsx
+import { Video } from "@remotion/media";
+import { staticFile, useVideoConfig } from "remotion";
+
+const { fps } = useVideoConfig();
+
+` arranges scenes and supports two ways to enhance the cut point between them:
+
+- **Transitions** (``) — crossfade, slide, wipe, etc. between two scenes. Shortens the timeline because both scenes play simultaneously during the transition.
+- **Overlays** (``) — render an effect (e.g. a light leak) on top of the cut point without shortening the timeline.
+
+Children are absolutely positioned.
+
+## Prerequisites
+
+```bash
+npx remotion add @remotion/transitions
+```
+
+## Transition example
+
+```tsx
+import { TransitionSeries, linearTiming } from "@remotion/transitions";
+import { fade } from "@remotion/transitions/fade";
+
+
+
+
+
+
+ ;
+```
+
+## Overlay example
+
+Any React component can be used as an overlay. For a ready-made effect, see the **light-leaks** rule.
+
+```tsx
+import { TransitionSeries } from "@remotion/transitions";
+import { LightLeak } from "@remotion/light-leaks";
+
+
+
+
+
+
+
+
+ ;
+```
+
+## Mixing transitions and overlays
+
+Transitions and overlays can coexist in the same ``, but an overlay cannot be adjacent to a transition or another overlay.
+
+```tsx
+import { TransitionSeries, linearTiming } from "@remotion/transitions";
+import { fade } from "@remotion/transitions/fade";
+import { LightLeak } from "@remotion/light-leaks";
+
+
+
+
+
+
+
+
+
+
+ ;
+```
+
+## Transition props
+
+`` requires:
+
+- `presentation` — the visual effect (e.g. `fade()`, `slide()`, `wipe()`).
+- `timing` — controls speed and easing (e.g. `linearTiming()`, `springTiming()`).
+
+## Overlay props
+
+`` accepts:
+
+- `durationInFrames` — how long the overlay is visible (positive integer).
+- `offset?` — shifts the overlay relative to the cut point center. Positive = later, negative = earlier. Default: `0`.
+
+## Available transition types
+
+Import transitions from their respective modules:
+
+```tsx
+import { fade } from "@remotion/transitions/fade";
+import { slide } from "@remotion/transitions/slide";
+import { wipe } from "@remotion/transitions/wipe";
+import { flip } from "@remotion/transitions/flip";
+import { clockWipe } from "@remotion/transitions/clock-wipe";
+```
+
+## Slide transition with direction
+
+```tsx
+import { slide } from "@remotion/transitions/slide";
+
+ = async ({
+ props,
+}) => {
+ return {
+ defaultCodec: "prores",
+ defaultVideoImageFormat: "png",
+ defaultPixelFormat: "yuva444p10le",
+ defaultProResProfile: "4444",
+ };
+};
+
+ = async ({
+ props,
+}) => {
+ return {
+ defaultCodec: "vp8",
+ defaultVideoImageFormat: "png",
+ defaultPixelFormat: "yuva420p",
+ };
+};
+
+` with a negative `from` value to trim the start of an animation.
+
+## Trim the Beginning
+
+A negative `from` value shifts time backwards, making the animation start partway through:
+
+```tsx
+import { Sequence, useVideoConfig } from "remotion";
+
+const fps = useVideoConfig();
+
+
+ ;
+```
+
+The animation appears 15 frames into its progress - the first 15 frames are trimmed off.
+Inside ``, `useCurrentFrame()` starts at 15 instead of 0.
+
+## Trim the End
+
+Use `durationInFrames` to unmount content after a specified duration:
+
+```tsx
+
+
+```
+
+The animation plays for 45 frames, then the component unmounts.
+
+## Trim and Delay
+
+Nest sequences to both trim the beginning and delay when it appears:
+
+```tsx
+
+
+
+
+```
+
+The inner sequence trims 15 frames from the start, and the outer sequence delays the result by 30 frames.
diff --git a/.agents/skills/remotion-best-practices/rules/videos.md b/.agents/skills/remotion-best-practices/rules/videos.md
new file mode 100644
index 0000000..4d99b31
--- /dev/null
+++ b/.agents/skills/remotion-best-practices/rules/videos.md
@@ -0,0 +1,171 @@
+---
+name: videos
+description: Embedding videos in Remotion - trimming, volume, speed, looping, pitch
+metadata:
+ tags: video, media, trim, volume, speed, loop, pitch
+---
+
+# Using videos in Remotion
+
+## Prerequisites
+
+First, the @remotion/media package needs to be installed.
+If it is not, use the following command:
+
+```bash
+npx remotion add @remotion/media # If project uses npm
+bunx remotion add @remotion/media # If project uses bun
+yarn remotion add @remotion/media # If project uses yarn
+pnpm exec remotion add @remotion/media # If project uses pnpm
+```
+
+Use `` from `@remotion/media` to embed videos into your composition.
+
+```tsx
+import { Video } from "@remotion/media";
+import { staticFile } from "remotion";
+
+export const MyComposition = () => {
+ return ` to delay when it appears:
+
+```tsx
+import { Sequence, staticFile } from "remotion";
+import { Video } from "@remotion/media";
+
+const { fps } = useVideoConfig();
+
+return (
+
+
+);
+```
+
+The video will appear after 1 second.
+
+## Sizing and Position
+
+Use the `style` prop to control size and position:
+
+```tsx
+
+ interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
+ }
+ />
+);
+```
+
+Use `muted` to silence the video entirely:
+
+```tsx
+ interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
+/>
+```
+
+## Pitch
+
+Use `toneFrequency` to adjust the pitch without affecting speed. Values range from 0.01 to 2:
+
+```tsx
+ = async ({
+ props,
+}) => {
+ const durations = await Promise.all(
+ SCENE_AUDIO_FILES.map((file) => getAudioDuration(staticFile(file))),
+ );
+
+ const sceneDurations = durations.map((durationInSeconds) => {
+ return durationInSeconds * FPS;
+ });
+
+ return {
+ durationInFrames: Math.ceil(sceneDurations.reduce((sum, d) => sum + d, 0)),
+ };
+};
+```
+
+The computed `sceneDurations` are passed into the component via a `voiceover` prop so the component knows how long each scene should be.
+
+If the composition uses [``](./transitions.md), subtract the overlap from total duration: [./transitions.md#calculating-total-composition-duration](./transitions.md#calculating-total-composition-duration)
+
+## Rendering audio in the component
+
+See [audio.md](./audio.md) for more information on how to render audio in the component.
+
+## Delaying audio start
+
+See [audio.md#delaying](./audio.md#delaying) for more information on how to delay the audio start.
diff --git a/.claude/skills/remotion-best-practices b/.claude/skills/remotion-best-practices
new file mode 120000
index 0000000..4b38dbf
--- /dev/null
+++ b/.claude/skills/remotion-best-practices
@@ -0,0 +1 @@
+../../.agents/skills/remotion-best-practices
\ No newline at end of file
diff --git a/apps/teacher-workspace-video/.gitignore b/apps/teacher-workspace-video/.gitignore
new file mode 100644
index 0000000..b62197b
--- /dev/null
+++ b/apps/teacher-workspace-video/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+dist
+.DS_Store
+.env
+
+# Ignore the output video from Git but not videos you import into src/.
+out
diff --git a/apps/teacher-workspace-video/.prettierrc b/apps/teacher-workspace-video/.prettierrc
new file mode 100644
index 0000000..37d5071
--- /dev/null
+++ b/apps/teacher-workspace-video/.prettierrc
@@ -0,0 +1,5 @@
+{
+ "useTabs": false,
+ "bracketSpacing": true,
+ "tabWidth": 2
+}
diff --git a/apps/teacher-workspace-video/README.md b/apps/teacher-workspace-video/README.md
new file mode 100644
index 0000000..3132845
--- /dev/null
+++ b/apps/teacher-workspace-video/README.md
@@ -0,0 +1,54 @@
+# Remotion video
+
+
+
+
+
+
+
+
+
+Welcome to your Remotion project!
+
+## Commands
+
+**Install Dependencies**
+
+```console
+npm i
+```
+
+**Start Preview**
+
+```console
+npm run dev
+```
+
+**Render video**
+
+```console
+npx remotion render
+```
+
+**Upgrade Remotion**
+
+```console
+npx remotion upgrade
+```
+
+## Docs
+
+Get started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals).
+
+## Help
+
+We provide help on our [Discord server](https://discord.gg/6VzzNDwUwV).
+
+## Issues
+
+Found an issue with Remotion? [File an issue here](https://github.com/remotion-dev/remotion/issues/new).
+
+## License
+
+Note that for some entities a company license is needed. [Read the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).
diff --git a/apps/teacher-workspace-video/eslint.config.mjs b/apps/teacher-workspace-video/eslint.config.mjs
new file mode 100644
index 0000000..13b44a0
--- /dev/null
+++ b/apps/teacher-workspace-video/eslint.config.mjs
@@ -0,0 +1,3 @@
+import { config } from "@remotion/eslint-config-flat";
+
+export default config;
diff --git a/apps/teacher-workspace-video/package.json b/apps/teacher-workspace-video/package.json
new file mode 100644
index 0000000..6c220e9
--- /dev/null
+++ b/apps/teacher-workspace-video/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "teacher-workspace-video",
+ "version": "1.0.0",
+ "description": "My Remotion video",
+ "repository": {},
+ "license": "UNLICENSED",
+ "private": true,
+ "dependencies": {
+ "@remotion/cli": "4.0.457",
+ "@remotion/media": "4.0.457",
+ "@remotion/tailwind-v4": "4.0.457",
+ "kokoro-js": "^1.2.1",
+ "react": "19.2.3",
+ "react-dom": "19.2.3",
+ "remotion": "4.0.457",
+ "tailwindcss": "4.0.0",
+ "zod": "4.3.6"
+ },
+ "devDependencies": {
+ "@remotion/eslint-config-flat": "4.0.457",
+ "@types/react": "19.2.7",
+ "@types/web": "0.0.166",
+ "eslint": "9.19.0",
+ "prettier": "3.8.1",
+ "typescript": "5.9.3"
+ },
+ "scripts": {
+ "dev": "remotion studio",
+ "build": "remotion bundle",
+ "upgrade": "remotion upgrade",
+ "lint": "eslint src && tsc"
+ },
+ "sideEffects": [
+ "*.css"
+ ]
+}
diff --git a/apps/teacher-workspace-video/public/real-screens/home-full.png b/apps/teacher-workspace-video/public/real-screens/home-full.png
new file mode 100644
index 0000000..c75ef52
Binary files /dev/null and b/apps/teacher-workspace-video/public/real-screens/home-full.png differ
diff --git a/apps/teacher-workspace-video/public/real-screens/home-lower.png b/apps/teacher-workspace-video/public/real-screens/home-lower.png
new file mode 100644
index 0000000..17c6dad
Binary files /dev/null and b/apps/teacher-workspace-video/public/real-screens/home-lower.png differ
diff --git a/apps/teacher-workspace-video/public/real-screens/home.png b/apps/teacher-workspace-video/public/real-screens/home.png
new file mode 100644
index 0000000..2023b5d
Binary files /dev/null and b/apps/teacher-workspace-video/public/real-screens/home.png differ
diff --git a/apps/teacher-workspace-video/public/real-screens/profile-full.png b/apps/teacher-workspace-video/public/real-screens/profile-full.png
new file mode 100644
index 0000000..ea25dcc
Binary files /dev/null and b/apps/teacher-workspace-video/public/real-screens/profile-full.png differ
diff --git a/apps/teacher-workspace-video/public/real-screens/profile-low.png b/apps/teacher-workspace-video/public/real-screens/profile-low.png
new file mode 100644
index 0000000..db508d7
Binary files /dev/null and b/apps/teacher-workspace-video/public/real-screens/profile-low.png differ
diff --git a/apps/teacher-workspace-video/public/real-screens/profile-mid.png b/apps/teacher-workspace-video/public/real-screens/profile-mid.png
new file mode 100644
index 0000000..db508d7
Binary files /dev/null and b/apps/teacher-workspace-video/public/real-screens/profile-mid.png differ
diff --git a/apps/teacher-workspace-video/public/real-screens/profile-top.png b/apps/teacher-workspace-video/public/real-screens/profile-top.png
new file mode 100644
index 0000000..7977e7a
Binary files /dev/null and b/apps/teacher-workspace-video/public/real-screens/profile-top.png differ
diff --git a/apps/teacher-workspace-video/public/real-screens/students-tan-row.png b/apps/teacher-workspace-video/public/real-screens/students-tan-row.png
new file mode 100644
index 0000000..f1a0e22
Binary files /dev/null and b/apps/teacher-workspace-video/public/real-screens/students-tan-row.png differ
diff --git a/apps/teacher-workspace-video/public/real-screens/students-top.png b/apps/teacher-workspace-video/public/real-screens/students-top.png
new file mode 100644
index 0000000..aba29be
Binary files /dev/null and b/apps/teacher-workspace-video/public/real-screens/students-top.png differ
diff --git a/apps/teacher-workspace-video/public/real-screens/welcome.png b/apps/teacher-workspace-video/public/real-screens/welcome.png
new file mode 100644
index 0000000..f6ea39f
Binary files /dev/null and b/apps/teacher-workspace-video/public/real-screens/welcome.png differ
diff --git a/apps/teacher-workspace-video/public/video-onboarding.mp4 b/apps/teacher-workspace-video/public/video-onboarding.mp4
new file mode 100644
index 0000000..23c38e0
Binary files /dev/null and b/apps/teacher-workspace-video/public/video-onboarding.mp4 differ
diff --git a/apps/teacher-workspace-video/public/voiceover/manifest.json b/apps/teacher-workspace-video/public/voiceover/manifest.json
new file mode 100644
index 0000000..8a0c32b
--- /dev/null
+++ b/apps/teacher-workspace-video/public/voiceover/manifest.json
@@ -0,0 +1,32 @@
+[
+ {
+ "file": "voiceover/segment-1.wav",
+ "duration": 5.85,
+ "text": "Welcome to Teacher Workspace. Start once, and get straight to the tools teachers need for the day."
+ },
+ {
+ "file": "voiceover/segment-2.wav",
+ "duration": 9.575,
+ "text": "On the home page, every school app sits in one clean shelf. Teachers can open the right tool quickly, without remembering different links or signing in again and again."
+ },
+ {
+ "file": "voiceover/segment-3.wav",
+ "duration": 8.525,
+ "text": "From the same sidebar, open Student Insights. This is where teachers can spot students who may need attention, without leaving the workspace."
+ },
+ {
+ "file": "voiceover/segment-4.wav",
+ "duration": 8.45,
+ "text": "Scroll through the class list and choose Tan Wei Jie. The row highlights naturally, just like a teacher selecting one student during follow-up."
+ },
+ {
+ "file": "voiceover/segment-5.wav",
+ "duration": 9.775,
+ "text": "Now the student profile opens. As we scroll, the full picture is visible in one place: attendance, behaviour, wellbeing, academics, family context, and reports."
+ },
+ {
+ "file": "voiceover/segment-6.wav",
+ "duration": 8.375,
+ "text": "Instead of jumping between many systems, teachers can review what matters, understand the student faster, and decide the next step with confidence."
+ }
+]
diff --git a/apps/teacher-workspace-video/public/voiceover/segment-1.wav b/apps/teacher-workspace-video/public/voiceover/segment-1.wav
new file mode 100644
index 0000000..12be772
Binary files /dev/null and b/apps/teacher-workspace-video/public/voiceover/segment-1.wav differ
diff --git a/apps/teacher-workspace-video/public/voiceover/segment-2.wav b/apps/teacher-workspace-video/public/voiceover/segment-2.wav
new file mode 100644
index 0000000..50769ba
Binary files /dev/null and b/apps/teacher-workspace-video/public/voiceover/segment-2.wav differ
diff --git a/apps/teacher-workspace-video/public/voiceover/segment-3.wav b/apps/teacher-workspace-video/public/voiceover/segment-3.wav
new file mode 100644
index 0000000..6136354
Binary files /dev/null and b/apps/teacher-workspace-video/public/voiceover/segment-3.wav differ
diff --git a/apps/teacher-workspace-video/public/voiceover/segment-4.wav b/apps/teacher-workspace-video/public/voiceover/segment-4.wav
new file mode 100644
index 0000000..c7c6461
Binary files /dev/null and b/apps/teacher-workspace-video/public/voiceover/segment-4.wav differ
diff --git a/apps/teacher-workspace-video/public/voiceover/segment-5.wav b/apps/teacher-workspace-video/public/voiceover/segment-5.wav
new file mode 100644
index 0000000..a45c20d
Binary files /dev/null and b/apps/teacher-workspace-video/public/voiceover/segment-5.wav differ
diff --git a/apps/teacher-workspace-video/public/voiceover/segment-6.wav b/apps/teacher-workspace-video/public/voiceover/segment-6.wav
new file mode 100644
index 0000000..2f0a921
Binary files /dev/null and b/apps/teacher-workspace-video/public/voiceover/segment-6.wav differ
diff --git a/apps/teacher-workspace-video/remotion.config.ts b/apps/teacher-workspace-video/remotion.config.ts
new file mode 100644
index 0000000..b9c9ab2
--- /dev/null
+++ b/apps/teacher-workspace-video/remotion.config.ts
@@ -0,0 +1,13 @@
+/**
+ * Note: When using the Node.JS APIs, the config file
+ * doesn't apply. Instead, pass options directly to the APIs.
+ *
+ * All configuration options: https://remotion.dev/docs/config
+ */
+
+import { Config } from "@remotion/cli/config";
+import { enableTailwind } from '@remotion/tailwind-v4';
+
+Config.setVideoImageFormat("jpeg");
+Config.setOverwriteOutput(true);
+Config.overrideWebpackConfig(enableTailwind);
diff --git a/apps/teacher-workspace-video/script.md b/apps/teacher-workspace-video/script.md
new file mode 100644
index 0000000..bc57aeb
--- /dev/null
+++ b/apps/teacher-workspace-video/script.md
@@ -0,0 +1,13 @@
+# Teacher Workspace Demo Voice-over Script
+
+Welcome to Teacher Workspace. Start once, and get straight to the tools teachers need for the day.
+
+On the home page, every school app sits in one clean shelf. Teachers can open the right tool quickly, without remembering different links or signing in again and again.
+
+From the same sidebar, open Student Insights. This is where teachers can spot students who may need attention, without leaving the workspace.
+
+Scroll through the class list and choose Tan Wei Jie. The row highlights naturally, just like a teacher selecting one student during follow-up.
+
+Now the student profile opens. As we scroll, the full picture is visible in one place: attendance, behaviour, wellbeing, academics, family context, and reports.
+
+Instead of jumping between many systems, teachers can review what matters, understand the student faster, and decide the next step with confidence.
diff --git a/apps/teacher-workspace-video/scripts/capture-real-screens.mjs b/apps/teacher-workspace-video/scripts/capture-real-screens.mjs
new file mode 100644
index 0000000..def8c3f
--- /dev/null
+++ b/apps/teacher-workspace-video/scripts/capture-real-screens.mjs
@@ -0,0 +1,242 @@
+import { spawn } from "node:child_process";
+import { mkdir, writeFile } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
+import { setTimeout as wait } from "node:timers/promises";
+
+const root = resolve(import.meta.dirname, "..");
+const chrome = resolve(
+ root,
+ "node_modules/.remotion/chrome-headless-shell/mac-arm64/chrome-headless-shell-mac-arm64/chrome-headless-shell",
+);
+const outDir = resolve(root, "public/real-screens");
+const appBase = process.env.TW_APP_URL ?? "http://127.0.0.1:3001";
+const port = Number(process.env.TW_CHROME_PORT ?? 9224);
+
+const flags = {
+ posts: false,
+ forms: true,
+ "release-2-communications": false,
+ notifications: true,
+ "holistic-reports": false,
+ "parents-gateway": true,
+ "student-analytics": false,
+ "student-analytics-basic": false,
+ "lta-intervention": false,
+ "student-groups": false,
+ "import-data": false,
+ "msf-uplift-data": false,
+ "developer-interfaces": false,
+};
+
+class Cdp {
+ constructor(ws) {
+ this.ws = ws;
+ this.id = 0;
+ this.pending = new Map();
+ this.listeners = new Map();
+ ws.onmessage = (event) => {
+ const message = JSON.parse(event.data);
+ if (message.id && this.pending.has(message.id)) {
+ const { resolve: ok, reject } = this.pending.get(message.id);
+ this.pending.delete(message.id);
+ if (message.error) reject(new Error(message.error.message));
+ else ok(message.result);
+ return;
+ }
+ const listeners = this.listeners.get(message.method);
+ if (listeners) listeners.forEach((listener) => listener(message.params));
+ };
+ }
+
+ send(method, params = {}) {
+ const id = ++this.id;
+ this.ws.send(JSON.stringify({ id, method, params }));
+ return new Promise((resolve, reject) => {
+ this.pending.set(id, { resolve, reject });
+ });
+ }
+
+ once(method) {
+ return new Promise((resolve) => {
+ const listener = (params) => {
+ this.listeners.set(
+ method,
+ (this.listeners.get(method) ?? []).filter((item) => item !== listener),
+ );
+ resolve(params);
+ };
+ this.listeners.set(method, [...(this.listeners.get(method) ?? []), listener]);
+ });
+ }
+}
+
+async function pollJson(url, timeout = 8000) {
+ const start = Date.now();
+ while (Date.now() - start < timeout) {
+ try {
+ const response = await fetch(url);
+ if (response.ok) return response.json();
+ } catch {}
+ await wait(100);
+ }
+ throw new Error(`Timed out waiting for ${url}`);
+}
+
+async function launchChrome() {
+ const child = spawn(chrome, [
+ `--remote-debugging-port=${port}`,
+ "--headless=new",
+ "--disable-gpu",
+ "--no-first-run",
+ "--no-default-browser-check",
+ "--hide-scrollbars",
+ "--window-size=1920,1080",
+ `--user-data-dir=/tmp/teacher-workspace-video-capture-${port}`,
+ "about:blank",
+ ]);
+
+ child.stderr.on("data", () => {});
+ await pollJson(`http://127.0.0.1:${port}/json/version`);
+ return child;
+}
+
+async function connectPage() {
+ const target = await fetch(`http://127.0.0.1:${port}/json/new?about:blank`, {
+ method: "PUT",
+ }).then((res) => res.json());
+ const ws = new WebSocket(target.webSocketDebuggerUrl);
+ await new Promise((resolve, reject) => {
+ ws.onopen = resolve;
+ ws.onerror = reject;
+ });
+ const page = new Cdp(ws);
+ await page.send("Page.enable");
+ await page.send("Runtime.enable");
+ await page.send("Emulation.setDeviceMetricsOverride", {
+ width: 1920,
+ height: 1080,
+ deviceScaleFactor: 1,
+ mobile: false,
+ });
+ return page;
+}
+
+async function setViewport(page, width, height) {
+ await page.send("Emulation.setDeviceMetricsOverride", {
+ width,
+ height,
+ deviceScaleFactor: 1,
+ mobile: false,
+ });
+}
+
+async function navigate(page, url) {
+ const loaded = page.once("Page.loadEventFired");
+ await page.send("Page.navigate", { url });
+ await loaded;
+ await wait(1200);
+}
+
+async function evaluate(page, expression) {
+ return page.send("Runtime.evaluate", {
+ expression,
+ awaitPromise: true,
+ returnByValue: true,
+ });
+}
+
+async function setupStorage(page, { welcomeSeen = true } = {}) {
+ await navigate(page, appBase);
+ await evaluate(
+ page,
+ `
+ localStorage.setItem('feature_flags', ${JSON.stringify(JSON.stringify(flags))});
+ localStorage.setItem('tw_posts_coachmark_seen', '1');
+ sessionStorage.setItem('tw_mock_auth', 'false');
+ ${welcomeSeen ? "sessionStorage.setItem('tw_welcome_seen', '1');" : "sessionStorage.removeItem('tw_welcome_seen');"}
+ `,
+ );
+}
+
+async function screenshot(page, name) {
+ const result = await page.send("Page.captureScreenshot", {
+ format: "png",
+ captureBeyondViewport: false,
+ });
+ const file = resolve(outDir, name);
+ await mkdir(dirname(file), { recursive: true });
+ await writeFile(file, Buffer.from(result.data, "base64"));
+}
+
+async function screenshotViewport(page, name) {
+ const result = await page.send("Page.captureScreenshot", {
+ format: "png",
+ captureBeyondViewport: true,
+ });
+ const file = resolve(outDir, name);
+ await mkdir(dirname(file), { recursive: true });
+ await writeFile(file, Buffer.from(result.data, "base64"));
+}
+
+async function scrollPage(page, top) {
+ await evaluate(
+ page,
+ `
+ (() => {
+ const scrollables = [...document.querySelectorAll('*')]
+ .filter((el) => el.scrollHeight > el.clientHeight + 80)
+ .sort((a, b) => (b.scrollHeight - b.clientHeight) - (a.scrollHeight - a.clientHeight));
+ const target = scrollables[0] || document.scrollingElement || document.documentElement;
+ target.scrollTop = ${top};
+ window.scrollTo(0, ${top});
+ })();
+ `,
+ );
+ await wait(600);
+}
+
+async function main() {
+ await mkdir(outDir, { recursive: true });
+ const chromeProcess = await launchChrome();
+ const page = await connectPage();
+
+ try {
+ await setupStorage(page, { welcomeSeen: false });
+ await navigate(page, appBase);
+ await screenshot(page, "welcome.png");
+
+ await setupStorage(page, { welcomeSeen: true });
+ await navigate(page, appBase);
+ await screenshot(page, "home.png");
+ await setViewport(page, 1920, 2200);
+ await navigate(page, appBase);
+ await screenshotViewport(page, "home-full.png");
+ await setViewport(page, 1920, 1080);
+
+ await setupStorage(page, { welcomeSeen: true });
+ await navigate(page, `${appBase}/students`);
+ await screenshot(page, "students-top.png");
+ await scrollPage(page, 520);
+ await screenshot(page, "students-tan-row.png");
+
+ await setupStorage(page, { welcomeSeen: true });
+ await navigate(page, `${appBase}/students/9`);
+ await screenshot(page, "profile-top.png");
+ await setViewport(page, 1920, 3000);
+ await navigate(page, `${appBase}/students/9`);
+ await screenshotViewport(page, "profile-full.png");
+ await setViewport(page, 1920, 1080);
+ await scrollPage(page, 520);
+ await screenshot(page, "profile-mid.png");
+ await scrollPage(page, 980);
+ await screenshot(page, "profile-low.png");
+ } finally {
+ page.ws.close();
+ chromeProcess.kill();
+ }
+}
+
+main().catch((error) => {
+ console.error(error);
+ process.exit(1);
+});
diff --git a/apps/teacher-workspace-video/scripts/generate-kokoro-voiceover.mjs b/apps/teacher-workspace-video/scripts/generate-kokoro-voiceover.mjs
new file mode 100644
index 0000000..c9130f2
--- /dev/null
+++ b/apps/teacher-workspace-video/scripts/generate-kokoro-voiceover.mjs
@@ -0,0 +1,47 @@
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { KokoroTTS } from "kokoro-js";
+
+const root = resolve(import.meta.dirname, "..");
+const scriptPath = resolve(root, "script.md");
+const outputDir = resolve(root, "public/voiceover");
+
+const paragraphs = (await readFile(scriptPath, "utf8"))
+ .split(/\n{2,}/)
+ .map((paragraph) => paragraph.trim())
+ .filter((paragraph) => paragraph && !paragraph.startsWith("#"));
+
+const tts = await KokoroTTS.from_pretrained(
+ "onnx-community/Kokoro-82M-v1.0-ONNX",
+ {
+ dtype: "q8",
+ device: "cpu",
+ },
+);
+
+const requestedVoice = process.env.KOKORO_VOICE ?? "bf_emma";
+const voice = requestedVoice;
+const speed = Number(process.env.KOKORO_SPEED ?? 1.12);
+
+await mkdir(outputDir, { recursive: true });
+console.log(`Using Kokoro voice: ${voice}`);
+
+const manifest = [];
+for (const [index, text] of paragraphs.entries()) {
+ const outputPath = resolve(outputDir, `segment-${index + 1}.wav`);
+ console.log(`Generating ${outputPath}`);
+
+ const audio = await tts.generate(text, { voice, speed });
+ audio.save(outputPath);
+
+ manifest.push({
+ file: `voiceover/segment-${index + 1}.wav`,
+ duration: audio.audio.length / audio.sampling_rate,
+ text,
+ });
+}
+
+await writeFile(
+ resolve(outputDir, "manifest.json"),
+ `${JSON.stringify(manifest, null, 2)}\n`,
+);
diff --git a/apps/teacher-workspace-video/scripts/measure-kokoro-segments.mjs b/apps/teacher-workspace-video/scripts/measure-kokoro-segments.mjs
new file mode 100644
index 0000000..85e5aa6
--- /dev/null
+++ b/apps/teacher-workspace-video/scripts/measure-kokoro-segments.mjs
@@ -0,0 +1,37 @@
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { KokoroTTS } from "kokoro-js";
+
+const root = resolve(import.meta.dirname, "..");
+const scriptPath = resolve(root, "script.md");
+
+const paragraphs = (await readFile(scriptPath, "utf8"))
+ .split(/\n{2,}/)
+ .map((paragraph) => paragraph.trim())
+ .filter((paragraph) => paragraph && !paragraph.startsWith("#"));
+
+const tts = await KokoroTTS.from_pretrained(
+ "onnx-community/Kokoro-82M-v1.0-ONNX",
+ {
+ dtype: "q8",
+ device: "cpu",
+ },
+);
+
+const voice = process.env.KOKORO_VOICE ?? "bf_emma";
+const speed = Number(process.env.KOKORO_SPEED ?? 0.95);
+
+let cursor = 0;
+for (const text of paragraphs) {
+ const audio = await tts.generate(text, { voice, speed });
+ const duration = audio.audio.length / audio.sampling_rate;
+ console.log(
+ JSON.stringify({
+ start: Number(cursor.toFixed(2)),
+ end: Number((cursor + duration).toFixed(2)),
+ duration: Number(duration.toFixed(2)),
+ text,
+ }),
+ );
+ cursor += duration;
+}
diff --git a/apps/teacher-workspace-video/src/Composition.tsx b/apps/teacher-workspace-video/src/Composition.tsx
new file mode 100644
index 0000000..4527884
--- /dev/null
+++ b/apps/teacher-workspace-video/src/Composition.tsx
@@ -0,0 +1,391 @@
+import {
+ AbsoluteFill,
+ Easing,
+ Img,
+ Sequence,
+ interpolate,
+ staticFile,
+ useCurrentFrame,
+ useVideoConfig,
+} from "remotion";
+import { Audio, Video } from "@remotion/media";
+
+const ease = Easing.bezier(0.16, 1, 0.3, 1);
+const clamp = {
+ extrapolateLeft: "clamp" as const,
+ extrapolateRight: "clamp" as const,
+ easing: ease,
+};
+
+const screen = (name: string) => staticFile(`real-screens/${name}.png`);
+
+const fade = (frame: number, start: number, end: number) =>
+ interpolate(frame, [start, end], [0, 1], clamp);
+
+const between = (frame: number, start: number, end: number) => {
+ const ramp = Math.min(14, Math.max(1, (end - start) / 2 - 0.1));
+ return interpolate(
+ frame,
+ [start, start + ramp, end - ramp, end],
+ [0, 1, 1, 0],
+ clamp,
+ );
+};
+
+const ImageLayer = ({
+ name,
+ opacity = 1,
+ scale = 1,
+ y = 0,
+}: {
+ name: string;
+ opacity?: number;
+ scale?: number;
+ y?: number;
+}) => (
+
+
+);
+
+const HomeScrollLayer = ({
+ opacity,
+ scrollY,
+}: {
+ opacity: number;
+ scrollY: number;
+}) => (
+
+
+
+
+);
+
+const ProfileScrollLayer = ({
+ opacity,
+ scrollY,
+}: {
+ opacity: number;
+ scrollY: number;
+}) => (
+
+
+
+
+);
+
+const RealScreens = ({ frame }: { frame: number }) => {
+ const homeIn = fade(frame, 160, 176);
+ const studentsIn = frame >= 500 ? 1 : 0;
+ const tanIn = frame >= 625 ? 1 : 0;
+ const profileIn = frame >= 790 ? 1 : 0;
+ const homeScrollY = interpolate(
+ frame,
+ [190, 310, 350, 455],
+ [0, 650, 650, 0],
+ clamp,
+ );
+ const profileScrollY = interpolate(
+ frame,
+ [972, 1265, 1517],
+ [0, 720, 0],
+ clamp,
+ );
+
+ return (
+
+
+ );
+};
+
+const SplashVideo = ({ frame }: { frame: number }) => {
+ const opacity = 1 - fade(frame, 160, 176);
+
+ return (
+
+
+ );
+};
+
+const ClickHighlight = ({ frame }: { frame: number }) => {
+ const navHover = between(frame, 438, 488);
+ const nav = between(frame, 482, 512);
+ const row = between(frame, 730, 780);
+
+ return (
+ <>
+
+
+
+ );
+};
+
+const Cursor = ({ frame }: { frame: number }) => {
+ const driftX = Math.sin(frame / 17) * 4 + Math.sin(frame / 43) * 2;
+ const driftY = Math.cos(frame / 19) * 3;
+ const x =
+ interpolate(
+ frame,
+ [0, 110, 150, 220, 300, 380, 445, 492, 620, 720, 760, 790, 1040, 1420],
+ [960, 1135, 1114, 1010, 1020, 1010, 92, 92, 520, 410, 370, 370, 1190, 1190],
+ clamp,
+ ) + driftX;
+ const y =
+ interpolate(
+ frame,
+ [0, 110, 150, 220, 300, 380, 445, 492, 620, 720, 760, 790, 1040, 1420],
+ [1034, 1038, 748, 705, 705, 705, 119, 119, 520, 407, 407, 930, 930, 930],
+ clamp,
+ ) + driftY;
+ const clickScale = Math.min(
+ interpolate(frame, [140, 150, 160], [1, 0.82, 1], clamp),
+ interpolate(frame, [482, 492, 502], [1, 0.82, 1], clamp),
+ interpolate(frame, [750, 760, 770], [1, 0.82, 1], clamp),
+ );
+ const clickRing = Math.max(
+ between(frame, 140, 166),
+ between(frame, 482, 512),
+ between(frame, 750, 780),
+ );
+
+ return (
+
+ );
+};
+
+const Caption = ({ frame }: { frame: number }) => {
+ const items = [
+ [
+ 0,
+ 176,
+ "Welcome to Teacher Workspace. Start once, and get straight to the tools teachers need for the day.",
+ ],
+ [
+ 176,
+ 463,
+ "On the home page, every school app sits in one clean shelf. Teachers can open the right tool quickly, without remembering different links or signing in again and again.",
+ ],
+ [
+ 463,
+ 719,
+ "From the same sidebar, open Student Insights. This is where teachers can spot students who may need attention, without leaving the workspace.",
+ ],
+ [
+ 719,
+ 972,
+ "Scroll through the class list and choose Tan Wei Jie. The row highlights naturally, just like a teacher selecting one student during follow-up.",
+ ],
+ [
+ 972,
+ 1265,
+ "Now the student profile opens. As we scroll, the full picture is visible in one place: attendance, behaviour, wellbeing, academics, family context, and reports.",
+ ],
+ [
+ 1265,
+ 1517,
+ "Instead of jumping between many systems, teachers can review what matters, understand the student faster, and decide the next step with confidence.",
+ ],
+ ] as const;
+ const current = items.find(([start, end]) => frame >= start && frame <= end);
+ if (!current) return null;
+ const [start, end, text] = current;
+
+ return (
+
+ {text}
+
+ );
+};
+
+const Voiceover = () => {
+ const segments = [
+ [0, "voiceover/segment-1.wav"],
+ [176, "voiceover/segment-2.wav"],
+ [463, "voiceover/segment-3.wav"],
+ [719, "voiceover/segment-4.wav"],
+ [972, "voiceover/segment-5.wav"],
+ [1265, "voiceover/segment-6.wav"],
+ ] as const;
+
+ return (
+ <>
+ {segments.map(([from, file]) => (
+
+
+ ))}
+
+ );
+};
+
+export const TeacherWorkspaceVideo = () => {
+ const frame = useCurrentFrame();
+ const { durationInFrames } = useVideoConfig();
+ const fadeOut = interpolate(
+ frame,
+ [durationInFrames - 30, durationInFrames - 1],
+ [1, 0],
+ clamp,
+ );
+
+ return (
+
+
+ );
+};
diff --git a/apps/teacher-workspace-video/src/Root.tsx b/apps/teacher-workspace-video/src/Root.tsx
new file mode 100644
index 0000000..766770c
--- /dev/null
+++ b/apps/teacher-workspace-video/src/Root.tsx
@@ -0,0 +1,18 @@
+import "./index.css";
+import { Composition } from "remotion";
+import { TeacherWorkspaceVideo } from "./Composition";
+
+export const RemotionRoot: React.FC = () => {
+ return (
+ <>
+ ![]({staticFile("logo.png")})
;
+};
+```
+
+Add videos using the `