Remotion Bits

// Position
transform.translate(x, y, z)           // Add to position
transform.translate(vector3)            // Add Vector3 to position

// Rotation (angles in DEGREES)
transform.rotateX(degrees)              // Rotate around X axis
transform.rotateY(degrees)              // Rotate around Y axis
transform.rotateZ(degrees)              // Rotate around Z axis
transform.rotateAround(origin, axis, degrees) // Rotate around arbitrary point+axis

// Scale
transform.scaleBy(uniform)             // Scale all axes equally
transform.scaleBy(sx, sy, sz)          // Scale per-axis

// Composition
transform.multiply(other)              // Matrix multiplication
transform.inverse()                    // Invert transform
transform.lerp(target, alpha)          // Linear interpolation (0-1)
transform.clone()                      // Deep copy

// Randomization (deterministic via seed)
transform.randomTranslate([minX, maxX], [minY, maxY], [minZ, maxZ], seed)
transform.randomRotateX([minDeg, maxDeg], seed)
transform.randomRotateY([minDeg, maxDeg], seed)
transform.randomRotateZ([minDeg, maxDeg], seed)

// Conversion
transform.toProps()                    // → { x, y, z, rotateX, rotateY, rotateZ, scaleX, scaleY, scaleZ, rotateOrder }
transform.toCSSMatrix3D()              // → "matrix3d(...)" CSS string
transform.toMatrix4()                  // → Three.js Matrix4

const position = base.translate(vmin * 50, 0, 0).rotateY(-15);

// Spread directly into Step or Element3D
<Step id="my-step" {...position.toProps()} />

const start = base.translate(0, vmin * 20, 0);
const end = base.translate(0, 0, 0);

<Element3D
  centered
  transition={{
    duration: 35,
    transform: [start, end],  // Interpolates position, rotation, scale via slerp
    opacity: [0, 1],
    easing: "easeInOutCubic",
  }}
>
  <div>Animates from start to end</div>
</Element3D>

const offset = new Vector3(0, -vmin * 2, 0);
const farOffset = offset.clone().multiplyScalar(4.0); // Scale the offset
const combined = offset.clone().add(new Vector3(vmin * 5, 0, 0));

Scene3D (perspective, timing)
├── Step (camera target 1) - children visible during this step
├── Step (camera target 2) - children visible during this step
├── ...
├── StepResponsive - element that animates differently per step
├── StepResponsive - another step-aware element
└── (any other children - always rendered)

<Scene3D
  perspective={1000}            // CSS perspective in px (depth effect)
  stepDuration={60}             // Default frames per step
  transitionDuration={60}       // Frames for camera transitions between steps
  easing="easeInOutCubic"       // Camera transition easing
>
  {/* Steps and content */}
</Scene3D>

<Step
  id="intro"                   // Unique identifier (used by StepResponsive)
  {...position.toProps()}       // Camera target position/rotation/scale
  duration={120}               // Override stepDuration for this step (optional)
  transition={{                // Animate children on step ENTRY (optional)
    opacity: [0, 1],
    blur: [10, 0],
    duration: 20,
  }}
  exitTransition={{            // Animate children on step EXIT (optional)
    opacity: [1, 0],
    blur: [0, 10],
  }}
>
  {/* Content shown during this step */}
  <FloatingCard>...</FloatingCard>
</Step>

<Element3D
  centered                     // Center-align the element (transform-origin: center)
  x={vmin * 50} y={0} z={0}   // Position in 3D space
  style={{ width: vmin * 60 }}
  transition={{                // Animate on mount (optional)
    delay: 20,
    opacity: [0, 1],
    duration: 35,
    transform: [startTransform, endTransform], // 3D keyframes
    easing: "easeInOutCubic",
  }}
>
  <div>Content positioned in 3D space</div>
</Element3D>

<StepResponsive
  centered                     // Center the child
  style={{ position: 'absolute', fontSize }}
  steps={{
    // Key = step ID, Value = properties at that step
    'intro': {
      transform: [base, shiftedPosition],  // Transform3D keyframes
      opacity: [0, 1],
    },
    'elements': {
      transform: [elementPosition],        // Hold at this position
    },
    'outro': {
      transform: [outroStart, outroEnd],
      opacity: [1, 1, 1, 0],              // Hold visible, then fade
      duration: "step",                    // Match step duration
      easing: "easeInOutCubic",
    },
  }}
>
  <h1>Title That Follows Camera</h1>
</StepResponsive>

const mapToAllElementSteps = (props) => ({
  'elements': props,
  'element-particles': props,
  'element-text': props,
  'element-code': props,
});

<StepResponsive
  steps={{
    'intro': { transform: [introPosition] },
    ...mapToAllElementSteps({ transform: [elementPosition] }),
    'outro': { transform: [outroPosition] },
  }}
>
  <h1>Elements</h1>
</StepResponsive>

intro → elements → element-particles → element-text → ... → transitions → scenes → outro

const positions = useMemo(() => {
  const { vmin } = rect;
  const base = Transform3D.identity();

  // Define base positions for each scene section
  const elementsBase = base.translate(0, -vmin * 120, 0).rotateX(15);
  const transitionsBase = base.translate(vmin * 200, vmin * 50, 0).rotateY(-15);
  const scenesBase = base.translate(-vmin * 120, vmin * 70, 0).rotateY(15);

  // Derive sub-positions from bases
  const cardW = vmin * 70;
  const particlesCard = elementsBase.translate(-cardW, -vmin * 40, 0).rotateY(15);
  const textCard = elementsBase.translate(0, -vmin * 50, vmin * 10).rotateX(10);

  return {
    base,
    elements: {
      base: elementsBase,
      cards: { particles: particlesCard, text: textCard },
    },
    transitions: { base: transitionsBase },
    scenes: { base: scenesBase },
  };
}, [rect.width, rect.height]); // Re-compute on resize

<Scene3D perspective={1000} stepDuration={60} transitionDuration={60}>
  <Step id="intro" {...positions.base.toProps()} />
  <Step id="elements" {...positions.elements.base.toProps()} />
  <Step id="element-particles"
    {...positions.elements.cards.particles.toProps()}
    transition={{ opacity: [0, 1], blur: [10, 0] }}
  >
    <FloatingCard><ParticleDemo /></FloatingCard>
  </Step>
  <Step id="transitions" duration={120} {...positions.transitions.base.toProps()} />
  <Step id="scenes" duration={120} {...positions.scenes.base.toProps()} />
  <Step id="outro" {...positions.base.toProps()} duration={120} />
</Scene3D>

<StepResponsive
  centered
  style={{ fontSize: vmin * 10, position: 'absolute' }}
  steps={{
    'intro': { transform: [positions.base, positions.base.translate(vmin * 7, 0, 0)] },
    'elements': { transform: [positions.elements.base.translate(vmin * 7, 0, 0)] },
    'outro': {
      transform: [positions.base.translate(vmin * 7, 0, 0), positions.base],
      duration: "step",
      easing: "easeInOutCubic",
    },
  }}
>
  <h1>Remotion Bits</h1>
</StepResponsive>

<Step id="element-particles" {...cardPos.toProps()}
  transition={{ opacity: [0, 1], blur: [10, 0] }}>
  <FloatingCard>
    <Particles style={{ position: 'absolute', inset: 0, opacity: 0.6 }}>
      <Spawner rate={1} max={200} lifespan={80}
        velocity={{ x: 0, y: -0.6, varianceX: 0.4, varianceY: 0.2 }}
        area={{ width: rect.width, height: rect.height }}>
        <div style={{ width: vmin * 2, height: vmin * 2, borderRadius: '50%',
          background: 'var(--color-primary)' }} />
      </Spawner>
      <Behavior drag={0.96}
        wiggle={{ magnitude: 0.6, frequency: 0.25 }}
        opacity={[1, 0]}
        scale={{ start: 1, end: 0.4 }} />
    </Particles>
    <span style={{ position: 'relative', zIndex: 1, fontWeight: 'bold',
      fontSize: vmin * 3, fontFamily: 'monospace' }}>Particles</span>
  </FloatingCard>
</Step>

<AnimatedText
  style={{ fontSize: vmin * 5, fontWeight: 'bold' }}
  transition={{
    split: "character",           // "none" | "word" | "character" | "line" | custom separator
    splitStagger: 2,              // Frames between each unit
    opacity: [0, 1],
    y: [15, 0],
    blur: [2, 0],
    duration: 20,
    delay: 10,
    easing: "easeOutCubic",
    // Cycling text:
    cycle: { texts: ["Build", "Create", "Ship"], itemDuration: 40 },
    // Glitch effect:
    glitch: [0.6, 0],            // Glitch intensity AnimatedValue
  }}
>
  Hello World
</AnimatedText>

<AnimatedCounter
  transition={{
    values: [0, 1000],            // Number keyframes
    color: ['#ff0000', '#00ff00'], // Color transition
    scale: [0.8, 1],
    duration: 30,
    delay: 10,
  }}
  prefix="$"
  postfix="+"
  toFixed={0}
  style={{ fontSize: vmin * 4, fontWeight: 'bold' }}
/>

<TypeWriter
  text="import { TypeWriter } from 'remotion-bits';"
  typeSpeed={2}        // Frames per character
  deleteSpeed={1}
  pauseAfterType={60}  // Frames to wait before deleting
  delay={30}           // Start delay
  cursor="▋"
  style={{ fontSize: vmin * 2, fontFamily: 'monospace', whiteSpace: 'pre' }}
/>

// Multiple texts with cycling:
<TypeWriter
  text={["First line", "Second line", "Third line"]}
  deleteBeforeNext={true}
  loop={false}
  errorRate={0.05}     // 5% chance of typo
/>

<CodeBlock
  code={`const x = useViewportRect();\nconsole.log(x.vmin);`}
  language="tsx"
  theme="dark"
  showLineNumbers={false}
  fontSize={vmin * 1.2}
  padding={vmin * 1.5}
  transition={{
    duration: 20,
    delay: 10,
    lineStagger: 2,                        // Frames between lines
    lineStaggerDirection: "forward",       // "forward" | "reverse" | "center" | "random"
    opacity: [0, 1],
    y: [8, 0],
    blur: [10, 0],
  }}
  highlight={[{ lines: [2, 3], color: "rgba(59,130,246,0.15)", opacity: [0, 1] }]}
  focus={{ lines: [2, 3], dimOpacity: 0.3, dimBlur: 2 }}
/>

<StaggeredMotion
  transition={{
    opacity: [0, 1],
    scale: [0, 1],
    y: [20, 0],
    duration: 30,
    delay: 5,
    stagger: 3,                            // Frames between each child
    staggerDirection: "forward",           // "forward"|"reverse"|"center"|"random"
    easing: "easeOutCubic",
    borderRadius: 4,
  }}
>
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</StaggeredMotion>

<GradientTransition
  gradient={[
    "linear-gradient(0deg, #051226, #1e0541)",
    "linear-gradient(180deg, #a5d4dd, #5674b1)",
  ]}
  duration={90}
  easing="easeInOut"
  shortestAngle={true}   // Interpolate angles via shortest path
/>

<MatrixRain fontSize={18} color="#00FF00" speed={1.2} density={0.8} streamLength={20} />

<ScrollingColumns
  columns={[
    { images: ["/img1.jpg", "/img2.jpg"], speed: 100, direction: "up" },
    { images: ["/img3.jpg", "/img4.jpg"], speed: 150, direction: "down" },
  ]}
  height={rect.vmin * 40}
  gap={rect.vmin * 2}
/>

<Particles style={{ position: 'absolute', inset: 0 }}>
  <Spawner
    rate={2}           // Particles per frame
    max={200}          // Maximum alive particles
    lifespan={100}     // Frames each particle lives
    burst={50}         // Emit 50 on first frame (optional)
    position={resolvePoint(rect, "center")}
    area={{ width: rect.width, height: 0 }}  // Spawn area
    velocity={{ x: 0, y: -2, varianceX: 1, varianceY: 0.5 }}
  >
    {/* Multiple children = random selection per particle */}
    <div style={{ width: vmin * 2, height: vmin * 2, borderRadius: '50%', background: '#fff' }} />
    <div style={{ width: vmin * 1, height: vmin * 1, borderRadius: '50%', background: '#aaa' }} />
  </Spawner>

  <Behavior
    gravity={{ y: 0.1 }}                              // Constant force
    drag={0.96}                                        // Air resistance (1=none, 0=instant stop)
    wiggle={{ magnitude: 0.6, frequency: 0.25 }}       // Random oscillation
    opacity={[1, 0]}                                   // Fade out over lifetime
    scale={{ start: 1, end: 0.3, startVariance: 0.2 }} // Shrink over lifetime
  />
</Particles>

import { random } from 'remotion-bits';

const items = useMemo(() => {
  const palette = ['#fb4934', '#b8bb26', '#fabd2f', '#83a598'];
  const result = [];

  for (let r = 0; r < 10; r++) {
    for (let c = 0; c < 20; c++) {
      const seed = `grid-${r}-${c}`;
      const colorIndex = Math.floor(random(seed + 'color') * palette.length);
      const dist = Math.sqrt(r * r + c * c);

      result.push(
        <StaggeredMotion key={`${r}-${c}`}
          transition={{
            opacity: [0, 1],
            scale: [0, 1],
            delay: 30 + dist * 2,  // Wave from top-left
            duration: 40,
          }}>
          <div style={{
            width: vmin * 5, height: vmin * 5,
            background: palette[colorIndex],
          }} />
        </StaggeredMotion>
      );
    }
  }
  return result;
}, [vmin]);

import { interpolate, Easing } from "remotion-bits";

// Hold then animate
interpolate(frame, [0, 30, 30, 60], [0, 0, 100, 100]);

// With easing
interpolate(frame, [0, 60], [0, 100], { easing: "easeOutCubic" });

// Clamp extrapolation
interpolate(frame, [0, 60], [0, 100], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

import { interpolateColorKeyframes } from "remotion-bits";

// Perceptually uniform (Oklch) color transitions
const color = interpolateColorKeyframes(["#ff0000", "#00ff00", "#0000ff"], progress);

import { resolvePoint, createRect, Rect } from "remotion-bits";

const point = resolvePoint(rect, "center");       // { x: 960, y: 540 }
const point2 = resolvePoint(rect, { x: "50%", y: "25%" }); // { x: 960, y: 270 }

export const metadata = {
  name: "MyBit",
  description: "Description of the bit.",
  tags: ["tag1", "tag2"],
  duration: 300,          // Total frames
  width: 1920,
  height: 1080,
  registry: {
    name: "bit-my-bit",
    title: "My Bit",
    description: "Registry description.",
    type: "bit" as const,
    add: "when-needed" as const,
    registryDependencies: ["animated-text", "scene-3d", "use-viewport-rect"],
    dependencies: [],
    files: [{ path: "path/to/MyBit.tsx" }],
  },
};

export const Component: React.FC = () => { /* ... */ };

const FloatingCard = ({ children }) => (
  <div style={{
    position: 'relative',
    width: vmin * 60, height: vmin * 30,
    background: 'rgba(20, 20, 30, 0.6)',
    backdropFilter: 'blur(10px)',
    border: '1px solid rgba(255,255,255,0.2)',
    borderRadius: vmin * 1,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    overflow: 'hidden',
    boxShadow: '0 0 20px rgba(0,0,0,0.2)',
  }}>
    {children}
  </div>
);

<Step id="particles-demo" {...cardPosition.toProps()}
  transition={{ opacity: [0, 1], blur: [10, 0] }}>
  <FloatingCard>
    {/* Content appears when camera arrives */}
  </FloatingCard>
</Step>

<StepResponsive
  centered
  style={{ fontSize: vmin * 10, position: 'absolute', width: 'max-content' }}
  steps={{
    'intro': { transform: [startPos] },
    'main': { transform: [mainPos] },
    'outro': { transform: [mainPos, endPos], duration: "step", easing: "easeInOutCubic" },
  }}
>
  <h1>Section Title</h1>
</StepResponsive>

const dist = Math.sqrt(Math.pow(r - centerRow, 2) + Math.pow(c - centerCol, 2));
const delay = 30 + dist * 2; // Ripple outward from center

<StaggeredMotion transition={{ opacity: [0, 1], scale: [0, 1], delay, duration: 40 }}>
  <div style={{ width: size, height: size, background: color }} />
</StaggeredMotion>

<Step id="transitions" duration={120} {...pos.toProps()}
  exitTransition={{ blur: [0, 10], opacity: [1, 0] }}>
  {/* Content blurs out when camera leaves */}
</Step>

<Element3D centered
  style={{ width: vmin * 32, height: vmin * 24 }}
  transition={{
    delay: 10,
    opacity: [0, 1],
    duration: 35,
    transform: [
      base.translate(0, vmin * 20, 0),  // Start below
      base.translate(0, 0, 0),           // End at position
    ],
    easing: 'easeInOutCubic',
  }}>
  <div>slides up into place</div>
</Element3D>