docs(presentation): add Remotion tutorial video for PiAPI Skills#3
Merged
wesleysimplicio merged 3 commits intoMay 9, 2026
Merged
Conversation
Animated 9-scene video (~58s @ 30fps, 1920x1080) explaining the project end to end: intro, what it is, install, configure, CLI tour, model catalog, async submit/poll/result workflow, agent integration, and call-to-action outro. Built with Remotion 4 + React + TypeScript so the video stays editable, deterministic, and renders the same on every host. Run from presentation/remotion-tutorial: npm install && npm start to preview in Remotion Studio, npm run build to render MP4.
Adds the rendered 1080p MP4 (9.1 MB), animated GIF preview (1.6 MB) and poster PNG to presentation/remotion-tutorial/media/, and surfaces them in both README.md and README.pt-BR.md right after the project tagline so the tutorial is the first thing visitors see. The GIF animates inline on GitHub; clicking it opens the full MP4. The .gitignore is updated with an explicit allow-list for that media folder to override the global *.png/*.gif/*.mp4 rules.
Refactors the Remotion tutorial to a locale-aware setup so the same
scene timeline can render in English (default, README.md) and
Portuguese (README.pt-BR.md). Both tracks ship as committed artifacts
under presentation/remotion-tutorial/media/{en,pt}/.
What's new:
- src/locale.ts holds typed string dictionaries for `en` and `pt`
- Every scene takes `s: Strings` and reads from the dict instead of
hard-coded copy
- Root.tsx registers two compositions: PiApiSkillsTutorialEn (default)
and PiApiSkillsTutorialPt; package scripts split into build:en /
build:pt / still:en / still:pt
- Watermark renders the locale tag (EN / PT) so a viewer can tell
the renders apart at a glance
- 9 per-scene PNG stills committed under media/en/scenes/ as visual
regression evidence; README.md links them in a 3x3 gallery
README.md (English) now embeds the EN preview and links the EN MP4 +
cover + scene gallery. README.pt-BR.md keeps the PT preview, MP4 and
cover. .gitignore exception widened to **/*.{png,gif,mp4} under the
media tree.
Verified locally: ruff check + ruff format clean on cli/, py_compile
clean on cli/cli.py, tsc --noEmit clean on the Remotion project, both
MP4s rendered (~9 MB each) and visually inspected.
There was a problem hiding this comment.
Pull request overview
Adds a new Remotion-based tutorial video project under presentation/remotion-tutorial/ and links the rendered media (MP4/GIF/PNGs) from the root READMEs so users can watch an end-to-end walkthrough of PiAPI Skills.
Changes:
- Add a full Remotion (React + TypeScript) project that renders a 9-scene tutorial video (EN/PT).
- Publish rendered tutorial assets (MP4 preview/full video + stills) and whitelist them in the repo
.gitignore. - Update
README.mdandREADME.pt-BR.mdto prominently link to the tutorial video and source.
Reviewed changes
Copilot reviewed 24 out of 40 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| README.pt-BR.md | Adds a PT-BR tutorial video section with preview + links to MP4/cover/source. |
| README.md | Adds an EN tutorial video section with preview + links + a 9-scene still gallery. |
| .gitignore | Whitelists Remotion tutorial media files (.png/.gif/.mp4) under presentation/remotion-tutorial/media/ despite global binary ignores. |
| presentation/remotion-tutorial/package.json | Introduces Remotion project scripts/deps to render the tutorial video (EN/PT) and export stills. |
| presentation/remotion-tutorial/tsconfig.json | TypeScript configuration for the Remotion tutorial source. |
| presentation/remotion-tutorial/remotion.config.ts | Remotion CLI render configuration (image format, overwrite, concurrency). |
| presentation/remotion-tutorial/.gitignore | Ignores local Remotion build outputs and caches (node_modules/, out/, etc.). |
| presentation/remotion-tutorial/src/index.ts | Remotion entrypoint registering the root composition. |
| presentation/remotion-tutorial/src/Root.tsx | Defines EN/PT compositions and video settings (fps/duration/size). |
| presentation/remotion-tutorial/src/Video.tsx | Sequences the 9 scenes and renders watermark + progress bar. |
| presentation/remotion-tutorial/src/theme.ts | Centralized theme palette and per-scene duration constants. |
| presentation/remotion-tutorial/src/locale.ts | EN/PT localized strings for all scenes. |
| presentation/remotion-tutorial/src/components/Background.tsx | Background + sparkle effects used across scenes. |
| presentation/remotion-tutorial/src/components/Title.tsx | Reusable animated title block for scenes. |
| presentation/remotion-tutorial/src/components/Terminal.tsx | Animated “typing” terminal component used in install/config/CLI scenes. |
| presentation/remotion-tutorial/src/components/Card.tsx | Reusable animated feature cards/badges. |
| presentation/remotion-tutorial/src/scenes/Intro.tsx | Scene 1: animated logo + tagline intro. |
| presentation/remotion-tutorial/src/scenes/WhatIsIt.tsx | Scene 2: “What is it?” feature cards. |
| presentation/remotion-tutorial/src/scenes/Install.tsx | Scene 3: install command + checklist. |
| presentation/remotion-tutorial/src/scenes/Configure.tsx | Scene 4: environment variable configuration in shell rc. |
| presentation/remotion-tutorial/src/scenes/CLITour.tsx | Scene 5: CLI command pills + terminal demo. |
| presentation/remotion-tutorial/src/scenes/Models.tsx | Scene 6: model family grid. |
| presentation/remotion-tutorial/src/scenes/Workflow.tsx | Scene 7: submit/poll/result workflow blocks. |
| presentation/remotion-tutorial/src/scenes/Agents.tsx | Scene 8: per-agent SKILL path grid. |
| presentation/remotion-tutorial/src/scenes/Outro.tsx | Scene 9: CTA outro with links. |
Comment on lines
+84
to
+90
| lines={[ | ||
| { | ||
| prompt: "$", | ||
| text: 'curl -fsSL https://raw.githubusercontent.com/wesleysimplicio/PiAPI-Skills/master/install.sh | bash', | ||
| startFrame: 18, | ||
| durationFrames: 60, | ||
| }, |
|
|
||
| const ProgressBar: React.FC<{ totalFrames: number }> = ({ totalFrames }) => { | ||
| const frame = useCurrentFrame(); | ||
| const progress = interpolate(frame, [0, totalFrames], [0, 1], { |
Comment on lines
+69
to
+71
| export const Video: React.FC<VideoProps> = ({ locale }) => { | ||
| const totalFrames = Object.values(sceneDurations).reduce((a, b) => a + b, 0); | ||
| const s = strings[locale]; |
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
Adds a fully animated Remotion tutorial video that explains how to use this skill bundle end-to-end. Lives in
presentation/remotion-tutorial/and is editable as code (React + TypeScript), so it stays in sync with the project.The video runs ~58 seconds at 30fps in 1920×1080 and walks through 9 scenes:
PIAPI_API_KEYandPIAPI_WEBHOOK_SECRETin~/.zshrcimagine,flux,kling,suno,llm,submit,waitsubmit → poll → resultdiagram with animated arrows + endpoint codesSKILL.mdpaths for Claude, Codex, Cursor, Hermes, Copilot, genericVisual style
Dark palette aligned with
presentation/slides.md(#ffd166yellow,#06d6a0green,#118ab2blue,#ef476fpink,#9b5de5purple). Light, deliberate animations only: spring-based entrances, fade-in/out crossfades between scenes, mesh/grid backgrounds with slow drift, sparkle glow, animated gradient progress bar at the bottom, and a top-rightPiAPI · Skills · v1watermark.How to run
Test plan
npx tsc --noEmitpasses clean (no type errors)npm installresolves all deps (Remotion 4 + React 18 + TS 5)npm startopens Remotion Studio and the timeline plays through all 9 scenes (verify locally; sandbox blocks Chromium download)npm run buildrenders an MP4 without errorsGenerated by Claude Code