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:

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

Example Assets

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