rendiv-video

Rendiv Video Skills

Use these skills whenever you are working with rendiv code — writing compositions, animating elements, embedding media, or rendering output.

Core Mental Model

Rendiv treats video as a pure function of a frame number. Every visual property (position, opacity, color, scale) is derived from the current frame via useFrame(). There is no timeline state machine, no imperative keyframe API. You write a React component that accepts a frame and returns JSX — rendiv handles the rest.

import { useFrame, interpolate } from '@rendiv/core';

export const FadeIn: React.FC = () => {
  const frame = useFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });
  return <div style={{ opacity }}>Hello rendiv</div>;
};

Key principles

• Every animation MUST be driven by useFrame(). CSS animations and transitions are forbidden — they run on wall-clock time and will desync during frame-by-frame rendering.
• Use interpolate() for linear mappings and spring() for physics-based motion.
• Use <Img>, <Video>, <Audio>, and <AnimatedImage> from @rendiv/core instead of native HTML elements — they integrate with the render lifecycle via holdRender.
• Compositions are registered declaratively via <Composition> and <Still> — they render null and only provide metadata to the framework.

Quick Start

A minimal rendiv project entry point:

// FadeIn.tsx — composition component
import { useFrame, interpolate, CanvasElement } from '@rendiv/core';

export const FadeIn: React.FC = () => {
  const frame = useFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });
  return (
    <CanvasElement id="FadeIn">
      <div style={{ opacity }}>Hello rendiv</div>
    </CanvasElement>
  );
};

// index.tsx — entry point
import { setRootComponent, Composition } from '@rendiv/core';
import { FadeIn } from './FadeIn';

const Root: React.FC = () => (
  <>
    <Composition
      id="FadeIn"
      component={FadeIn}
      durationInFrames={90}
      fps={30}
      width={1920}
      height={1080}
    />
  </>
);

setRootComponent(Root);

Render to MP4: rendiv render src/index.tsx FadeIn out/fade-in.mp4

Topic Guide

Load the relevant rule file based on the task at hand:

Task	Rule file
Animate with interpolate, spring, Easing, blendColors	animation.md
Set up compositions, stills, folders, entry point	composition-setup.md
Time-shift with Sequence, Series, Loop, Freeze	sequencing-and-timing.md
Control z-ordering and timeline overrides	timeline-overrides.md
Embed images, video, audio, GIFs, iframes	media-components.md
Render animated GIFs with playback control	gif.md
Add subtitles, SRT parsing, word highlighting	captions.md
Understand holdRender, environment modes, rendering pipeline	render-lifecycle.md
Animate between scenes with TransitionSeries	transitions.md
Generate SVG shapes or manipulate paths	shapes-and-paths.md
Add noise-driven motion or motion blur	procedural-effects.md
Animate text per character, word, or line	text-animation.md
Apply visual effects and CSS filters	visual-effects.md
Load Google Fonts or local font files	typography.md
Embed Lottie animations	lottie.md
Add 3D scenes with Three.js / R3F	three.md
Use the CLI, Studio, or Player	cli-and-studio.md

Critical Constraints

1. No CSS animations or transitions. Everything MUST be frame-driven via useFrame().
2. Use rendiv media components (<Img>, <Video>, <Audio>, <AnimatedImage>) instead of native HTML elements. They manage holdRender automatically.
3. Always wrap composition content with <CanvasElement id="...">. This makes the composition self-contained so its timeline overrides work correctly when nested inside other compositions. The id must match the <Composition> id.
4. <Composition> renders null. It only registers metadata. The actual component is rendered by the Player, Studio, or Renderer — not by <Composition> itself.
5. setRootComponent can only be called once. It registers the root that defines all compositions.
6. inputRange must be monotonically non-decreasing in interpolate() and blendColors(). Both ranges must have equal length with at least 2 elements.
7. <Series.Sequence> must be a direct child of <Series>. It throws if rendered outside a <Series> parent.
8. morphPath requires matching segments. Both paths must have the same number of segments with matching command types.

Packages

Package	Purpose
@rendiv/core	Hooks, components, animation, contexts
@rendiv/player	Browser <Player> component
@rendiv/renderer	Playwright + FFmpeg rendering
@rendiv/bundler	Vite-based project bundler
@rendiv/cli	CLI: render, still, compositions, studio
@rendiv/studio	Studio dev server with render queue
@rendiv/transitions	TransitionSeries with fade, slide, wipe, flip, clockWipe
@rendiv/shapes	SVG shape generators (circle, rect, star, polygon, etc.)
@rendiv/paths	SVG path parsing, measurement, morphing, stroke reveal
@rendiv/noise	Simplex noise (2D, 3D, 4D)
@rendiv/fonts	Local font loading with holdRender
@rendiv/google-fonts	Google Fonts loading with holdRender
@rendiv/motion-blur	MotionTrail and ShutterBlur components
@rendiv/gif	Animated GIF playback with speed control and fit modes
@rendiv/captions	SRT/Whisper parsing, word-by-word highlighting, caption overlay
@rendiv/text	Animated text: per-character/word/line split, stagger, presets
@rendiv/effects	Visual effects: composable CSS filters, glow, glitch, vignette
@rendiv/lottie	Frame-accurate Lottie animations via lottie-web
@rendiv/three	3D scenes via React Three Fiber with context bridging

Example Assets

• Animated bar chart — Spring-animated bars with staggered entrances
• Text reveal — Character-by-character text animation