docs(tutorial): Remotion video explaining how to use the WaveSpeedAI Skill#3
Merged
wesleysimplicio merged 6 commits intoMay 9, 2026
Merged
Conversation
…dAI Skill Self-contained Remotion 4 project under remotion-tutorial/ that renders a 60s animated tutorial (1920x1080, 30fps) covering install, supported agent hosts, CLI surface, and three example modalities (text→image, image→video, LLM chat). Built without external assets — backgrounds, particles, code blocks and media previews are generated programmatically so renders are deterministic and don't depend on any CDN. Run with: cd remotion-tutorial && npm install && npm run build
Renders the 60s Remotion composition to MP4 + WebM + poster PNG and ships them under docs/media/. README.md and README.pt-BR.md now embed a click-to-play poster plus a collapsible inline player so the tour is visible right at the top of the project. The .gitignore allows-lists docs/media/** so future re-renders can be committed alongside source changes. Re-render with: cd remotion-tutorial && npm install && npm run build
The original DoD gate was inherited verbatim from the agentic-starter template: it ran `npm ci`, `npm test --coverage` and `npx playwright test` at the repo root. None of those exist here — this is a Python CLI project — so the job failed immediately on every PR. Replace it with a meta gate that only enforces what the existing ci.yml and lint.yml don't already cover: - PR title follows Conventional Commits (regex match against the type list documented in .skills/conventional-commits/SKILL.md). - PR body is non-empty after stripping whitespace. - Changes under .specs/architecture/ must reference an ADR. - When remotion-tutorial/ changes, run `tsc --noEmit` against its tsconfig so the animated explainer never ships with type errors. ruff/mypy/py_compile and install.sh smoke remain in lint.yml + ci.yml.
There was a problem hiding this comment.
Pull request overview
Adds a self-contained Remotion project (remotion-tutorial/) to render a ~60s animated “how to use the WaveSpeedAI Skill” explainer, wires the resulting media into the main READMEs, and updates the DoD gate to typecheck the Remotion project when it changes.
Changes:
- Introduces a new Remotion 4 + TypeScript project with 7 scenes and reusable UI primitives to render the tutorial video deterministically.
- Embeds/links the rendered tutorial assets from
docs/media/inREADME.mdandREADME.pt-BR.md. - Updates
.github/workflows/dod.ymlto typecheck the Remotion project conditionally, and updates.gitignoreto allowdocs/media/*artifacts to be committed.
Reviewed changes
Copilot reviewed 30 out of 34 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| remotion-tutorial/tsconfig.json | TypeScript configuration for the Remotion subproject. |
| remotion-tutorial/package.json | Remotion/React/TS dependencies + render/still/dev scripts. |
| remotion-tutorial/remotion.config.ts | Remotion CLI configuration (entry point, output behavior). |
| remotion-tutorial/README.md | Local usage docs for rendering/customizing the tutorial video. |
| remotion-tutorial/.gitignore | Ignores node_modules and render outputs inside the subproject. |
| remotion-tutorial/src/index.ts | Registers Remotion root component. |
| remotion-tutorial/src/Root.tsx | Declares the WaveSpeedSkillTutorial composition settings. |
| remotion-tutorial/src/tutorial/Tutorial.tsx | Sequences the 7 tutorial scenes into one timeline. |
| remotion-tutorial/src/tutorial/timing.ts | Scene timing constants and computed offsets/duration. |
| remotion-tutorial/src/tutorial/theme.ts | Shared colors/fonts/gradients/shadows theme tokens. |
| remotion-tutorial/src/tutorial/scenes/SceneIntro.tsx | Intro scene (logo/title/host chips/waveform). |
| remotion-tutorial/src/tutorial/scenes/SceneWhatIsSkill.tsx | “What is the skill” scene with feature cards. |
| remotion-tutorial/src/tutorial/scenes/SceneInstall.tsx | Installation scene (animated terminal + checklist). |
| remotion-tutorial/src/tutorial/scenes/SceneHosts.tsx | Supported hosts grid scene (paths per host). |
| remotion-tutorial/src/tutorial/scenes/SceneCli.tsx | CLI demo scene (typewriter + command cards). |
| remotion-tutorial/src/tutorial/scenes/SceneExamples.tsx | Modalities scene (synthetic image/video/LLM previews). |
| remotion-tutorial/src/tutorial/scenes/SceneOutro.tsx | CTA/outro scene (install one-liner + badges). |
| remotion-tutorial/src/tutorial/components/BackdropGradient.tsx | Programmatic background gradients + noise/vignette. |
| remotion-tutorial/src/tutorial/components/ParticleField.tsx | Deterministic particle field animation primitive. |
| remotion-tutorial/src/tutorial/components/SceneFrame.tsx | Scene wrapper providing background/particles/badge and fades. |
| remotion-tutorial/src/tutorial/components/SceneTitle.tsx | Shared animated title/eyebrow/subtitle component. |
| remotion-tutorial/src/tutorial/components/Logo.tsx | Animated logo component. |
| remotion-tutorial/src/tutorial/components/Chip.tsx | Animated “host chip” UI component. |
| remotion-tutorial/src/tutorial/components/Card.tsx | Animated card UI component used for feature highlights. |
| remotion-tutorial/src/tutorial/components/CodeBlock.tsx | Typewriter-style terminal/code block renderer. |
| remotion-tutorial/src/tutorial/components/HostBadge.tsx | Host path badge component for the hosts grid. |
| remotion-tutorial/src/tutorial/components/MediaPreview.tsx | Synthetic image/video/chat previews for the examples scene. |
| docs/media/tutorial.mp4 | Rendered MP4 tutorial video (referenced by READMEs). |
| docs/media/tutorial.webm | Rendered WebM tutorial video (referenced by READMEs). |
| docs/media/tutorial-poster.png | Poster image used in READMEs. |
| README.md | Adds “60-second tour” section linking/embedding tutorial media. |
| README.pt-BR.md | Adds “Tour de 60 segundos” section linking/embedding tutorial media. |
| .gitignore | Un-ignores docs/media/** so the tutorial assets can be committed. |
| .github/workflows/dod.yml | Simplifies DoD checks and conditionally typechecks remotion-tutorial/. |
| {badge} | ||
| </div> | ||
| ) : null} | ||
| <AbsoluteFill style={{ padding: '110px 96px 90px' }}>{children}</AbsoluteFill> |
Comment on lines
+47
to
+51
| const fadeOutStart = fadeOutAt ?? durationInFrames - 18; | ||
| const fadeOut = interpolate( | ||
| frame, | ||
| [fadeOutStart, fadeOutStart + 18], | ||
| [1, 0], |
Comment on lines
+13
to
+30
| const SCENE_COMPONENTS: Record<string, React.FC> = { | ||
| intro: SceneIntro, | ||
| 'what-is-skill': SceneWhatIsSkill, | ||
| install: SceneInstall, | ||
| hosts: SceneHosts, | ||
| cli: SceneCli, | ||
| examples: SceneExamples, | ||
| outro: SceneOutro, | ||
| }; | ||
|
|
||
| export const Tutorial: React.FC = () => { | ||
| let cursor = 0; | ||
| return ( | ||
| <AbsoluteFill style={{ backgroundColor: colors.bgDeep }}> | ||
| {SCENES.map((scene) => { | ||
| const Component = SCENE_COMPONENTS[scene.id]; | ||
| const from = cursor; | ||
| cursor += scene.durationInFrames; |
Adds the 7 scene stills under docs/media/scenes/ as visual evidence for the Remotion composition. Each PNG is rendered at a representative frame near the middle of its scene (after entrance animations have settled) and serves as a regression baseline — if a future change to remotion-tutorial/ silently breaks a scene's layout or content, a new render here will make the diff obvious in code review. Includes a docs/media/scenes/README.md with the frame-to-scene table and the exact commands to re-generate. Both top-level READMEs (English + pt-BR) now link to the evidence folder.
Previously the READMEs only linked to docs/media/scenes/ — readers had to click through to see the visual flow. Now both READMEs embed the video poster (linked to MP4/WebM) plus a 3×3 table with all 7 scene stills, so the storyboard is immediately visible when browsing the repo on GitHub.
Adds an i18n layer (src/tutorial/i18n.ts: LocaleContext + useStrings) and refactors all 7 scenes plus the MediaPreview chat bubbles to read strings from the active locale instead of hardcoded Portuguese. Two compositions are now registered: - WaveSpeedSkillTutorial (default props: locale='pt-BR') - WaveSpeedSkillTutorialEN (default props: locale='en') The pt-BR composition is byte-compatible with the previously-rendered docs/media/tutorial.mp4 and docs/media/scenes/*.png — the pt-BR README keeps pointing at those. The English README now embeds: - docs/media/tutorial-en.mp4 (~22 MB, H.264, 60 s, 1080p) - docs/media/tutorial-poster-en.png (hero still) - docs/media/scenes/en/01..07*.png (storyboard) New npm scripts: build:en, build:en:webm, still:en. WebM/VP9 takes significantly longer than MP4 and is opt-in.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Self-contained Remotion 4 project under
remotion-tutorial/that renders a 60s animated explainer for the WaveSpeedAI Skill — what it is, how to install, supported agent hosts, the CLI surface, and three example modalities (text→image, image→video, LLM chat).npm run build:webm).Storyboard
SKILL.mdpathwavespeed-cli runtyping demo + grid of subcommandsHow to render
Validation
npx tsc --noEmitpasses (strict mode).out/is git-ignored — no media binaries committed.Test plan
cd remotion-tutorial && npm installsucceeds locally.npm run stillproducesout/preview.pngmatching the intro.npm run devopens Remotion Studio and scrubbing through 60s plays without console errors.npm run buildproduces a playable MP4.agents/*/SKILL.mdandreferences/models.md.https://claude.ai/code/session_01VSenMp7xfKCn4hmEaDNQgD
Generated by Claude Code