Communitygithub.com

MattiaIppoliti/tia-skills

Drive the Remotion CLI development loop: scaffold, studio, type-check, compositions, still probes, single and batch render, bundle, Lambda and Cloud Run rendering, benchmark, versions, upgrade, and GPU checks. Also use when diagnosing a build or render failure, or when looking for a capability the retired HyperFrames CLI used to own.

O que é tia-skills?

tia-skills is a Claude Code agent skill that drive the Remotion CLI development loop: scaffold, studio, type-check, compositions, still probes, single and batch render, bundle, Lambda and Cloud Run rendering, benchmark, versions, upgrade, and GPU checks. Also use when diagnosing a build or render failure, or when looking for a capability the retired HyperFrames CLI used to own.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/MattiaIppoliti/tia-skills/tree/HEAD/skills/video/hyperframes-cli

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Remotion CLI

The tool is remotion, from @remotion/cli. Every command runs through npx remotion <command>, and every one of them bundles the project first, so a type error or a bad import surfaces as a bundling failure rather than a render failure.

npx remotion --help and npx remotion <command> --help are the authority on flags. Flags move between releases; read the help output rather than trusting a list, including this one. What is below is the loop and the failure modes, not a flag reference.

The loop

StageCommandWhy
Scaffoldnpx create-video@latest --blankwrites a matched package.json, remotion.config.ts, tsconfig
Type-checknpx tsc --noEmitthe cheapest gate; catches schema/prop drift before any render
Listnpx remotion compositionsconfirm the id you are about to render actually exists
Probe a framenpx remotion still <id> out/probe.png --frame=<n>seconds, not minutes; the workhorse of iteration
Reviewnpx remotion studiohand it to the user; they scrub and edit props themselves
Rendernpx remotion render <id> out/video.mp4only after the user approves
Ship remotelynpx remotion bundle → npx remotion lambda render <url> <id>distributed render; needs deployed AWS infrastructure

Probe stills before you render

A full render of a 45-second 1080p composition costs minutes. A still costs seconds and answers most questions: is the text inside the frame, did the asset load, is the color right. Probe the midpoint of each scene, look at every image, and only then render.

npx remotion still launch out/s1.png --frame=45
npx remotion still launch out/s2.png --frame=180

Never report a composition as working on the strength of a passing bundle. Look at pixels.

Studio is the review surface, not your debugger

npx remotion studio serves the project with a timeline, a props editor driven by the Zod schema, and frame-accurate scrubbing. Hand it to the user for approval. For your own verification prefer still probes: they are scriptable, and you can look at the output without asking the user to describe what they see.

Passing props

--props takes a JSON string or a path to a JSON file, and overrides defaultProps:

npx remotion render launch out/video.mp4 --props='{"productName":"Acme"}'

A prop that fails the composition's Zod schema fails the render loudly. That is the point of declaring the schema, so keep it accurate.

Batch rendering

There is no batch subcommand. Loop in the shell over ids or prop payloads:

for id in $(npx remotion compositions --quiet); do
  npx remotion render "$id" "out/$id.mp4"
done

For many renders of one composition over a data set, prefer renderMedia() from @remotion/renderer in a Node script: it bundles once instead of once per render, which dominates the wall clock.

Render performance

  • --concurrency=<n> sets parallel workers. The default is half the CPU cores capped at 8; the maximum is the core count, and asking for more is an error, not a clamp. On a memory-tight machine, lowering it fixes crashes that look like renderer bugs.
  • --jpeg (over the default PNG frame format) is a large speedup when the composition has no transparency to preserve.
  • npx remotion benchmark measures a real render, so use it to justify a concurrency or codec change instead of guessing.
  • npx remotion gpu reports what the browser will actually accelerate. Worth checking before blaming a shader or a heavy filter for a slow render.

Diagnosing failures

SymptomLikely cause
Bundling failsA type error or a bad import. Run npx tsc --noEmit for the readable version of the same error.
"No composition with id …"The id in Root.tsx differs from the one you passed. npx remotion compositions settles it.
Render hangs, then times outA delayRender() with no matching continueRender(). Every delay handle must be released.
Every frame looks like frame 0A CSS animation/transition, or requestAnimationFrame. The renderer does not advance the browser clock.
Animation strobes or flickers frame to frameUnseeded Math.random(). Use random(seed).
Motion works while scrubbing forward, breaks on a jumpState-driven animation. Derive from useCurrentFrame() instead.
Asset 404s only in a Lambda or bundled renderA hardcoded path instead of staticFile().
Versions error that makes no senseMismatched Remotion packages. npx remotion versions reports the disagreement.
Out-of-memory mid-renderConcurrency too high for the machine. Lower --concurrency.

Surface the actual error output when you report a failure. Do not paraphrase a stack trace.

Where the retired HyperFrames CLI capabilities went

The old hyperframes CLI bundled authoring, media, and QA commands that Remotion's CLI does not have. Nothing below is a Remotion command, so do not try to run them:

Retired commandWhere the capability lives now
initnpx create-video@latest --blank, then /hyperframes-core → references/project-structure.md
lint, check, layout, validatenpx tsc --noEmit plus still probes. The data-* contract those gates enforced is gone.
snapshot, compare, grade-comparenpx remotion still at chosen frames; diff the PNGs with your own tooling.
preview, play, presentnpx remotion studio
add, catalog/hyperframes-registry
capture/product-launch-video (site capture) and /media-use
tts, transcribe, remove-background/media-use
beats, keyframes/hyperframes-creative (beat planning), /hyperframes-keyframes
cloud, publishnpx remotion bundle + remotion lambda / remotion cloudrun, or your own hosting
skills, docs, upgrade, doctorthese skills are vendored in this repo; npx remotion upgrade and npx remotion versions

If a workflow skill or reference file still instructs you to run npx hyperframes <anything>, that instruction is stale. Do the Remotion equivalent from the table above and say in your summary that you hit a stale pointer, so it can be fixed.

Individual skills in this repo

This repo contains 6 individual skills — each has its own dedicated page.

MattiaIppoliti/tia-skills

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

MattiaIppoliti/tia-skills

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

MattiaIppoliti/tia-skills

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

MattiaIppoliti/tia-skills

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

MattiaIppoliti/tia-skills

Use when audio already placed in a HyperFrames composition needs to be mixed: fade-in/fade-out, crossfade, track gain or volume, volume automation, ducking, a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.

MattiaIppoliti/tia-skills

The composition contract for building one renderable Remotion project. Use for project structure, `<Composition>` registration, `<Sequence>` timing, layer/track ordering, scene components, props and schemas, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition code.

Habilidades Relacionadas