undefined

undefined

import {
  // 3D Scene System (primary workflow)
  Scene3D, Step, Element3D, StepResponsive,
  Transform3D, Vector3,
  useScene3D, useCamera, useActiveStep,
  // Animation Components
  AnimatedText, AnimatedCounter, TypeWriter, CodeBlock,
  StaggeredMotion, GradientTransition, MatrixRain, ScrollingColumns,
  Particles, Spawner, Behavior,
  // Core
  useViewportRect,
  interpolate, Easing,
  interpolateColorKeyframes, interpolateGradientKeyframes,
  random, resolvePoint, createRect,
} from "remotion-bits";

opacity: 1                // Static
opacity: [0, 1]           // Animate 0→1
opacity: [0, 1, 0.5, 0]  // Multi-keyframe: 0→1→0.5→0 evenly spaced
scale: [0.8, 1]           // Scale from 80% to 100%
y: [30, 0]                // Slide up from 30px offset

const rect = useViewportRect();
// rect.width   — composition width (e.g. 1920)
// rect.height  — composition height (e.g. 1080)
// rect.vw      — 1% of width (19.2)
// rect.vh      — 1% of height (10.8)
// rect.vmin    — min(vw, vh) — USE THIS for most sizing
// rect.vmax    — max(vw, vh)
// rect.cx, cy  — center coordinates
const { vmin } = rect;

transition={{
  // Timing
  duration: 30,           // Duration in frames
  delay: 10,              // Delay before start
  frames: [0, 60],        // Or explicit frame range (alternative to duration)
  easing: "easeOutCubic", // Easing curve

  // Transform (all accept AnimatedValue)
  x: [30, 0],             // translateX
  y: [30, 0],             // translateY
  z: [0, 100],            // translateZ (3D)
  scale: [0.8, 1],        // uniform scale
  scaleX, scaleY,         // axis scale
  rotate: [0, 360],       // 2D rotation (degrees)
  rotateX, rotateY, rotateZ, // 3D rotation (degrees)
  skew, skewX, skewY,     // skew (degrees)
  transform: Transform3D[], // 3D transform keyframes (see Transform3D section)

  // Visual (all accept AnimatedValue)
  opacity: [0, 1],
  blur: [10, 0],          // Gaussian blur in pixels
  borderRadius: [0, 20],
  color: ["#ff0000", "#00ff00"],           // CSS color interpolation
  backgroundColor: ["#000", "#fff"],
}}

type EasingName =
  | "linear"
  | "easeIn" | "easeOut" | "easeInOut"
  | "easeInQuad" | "easeOutQuad" | "easeInOutQuad"
  | "easeInCubic" | "easeOutCubic" | "easeInOutCubic"
  | "easeInSine" | "easeOutSine" | "easeInOutSine"
  | "easeInQuart" | "easeOutQuart" | "easeInOutQuart";

<AbsoluteFill style={{
  backgroundColor: 'var(--color-background-dark)',  // #100f0f
  fontSize: `${config.width * 0.05}px`,             // 5% of width
  fontWeight: 700,
  color: 'var(--color-primary-hover)',               // #fcc192
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}}>
  <Component />
</AbsoluteFill>

import { AbsoluteFill } from 'remotion';

export const MyComposition: React.FC = () => {
  const rect = useViewportRect();
  const { vmin } = rect;

  return (
    <AbsoluteFill style={{
      backgroundColor: '#100f0f',
      color: '#fcc192',
      fontFamily: 'system-ui, sans-serif',
    }}>
      {/* Your content here */}
      <Scene3D perspective={1000} stepDuration={60} transitionDuration={60}>
        {/* Steps... */}
      </Scene3D>
    </AbsoluteFill>
  );
};

// Relies on the outer wrapper for background, centering, font
export const Component = () => (
  <AnimatedText transition={{ opacity: [0, 1] }}>Hello</AnimatedText>
);

export const Component = () => (
  <div style={{
    width: '100%', height: '100%',
    backgroundColor: '#09090b',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  }}>
    <StaggeredMotion transition={{ scale: [0, 1], opacity: [0, 1] }}>
      {items}
    </StaggeredMotion>
  </div>
);

export const Component = () => {
  const rect = useViewportRect();
  return (
    <AbsoluteFill style={{
      background: '#100f0f',
      color: '#fcc192',
    }}>
      <Scene3D perspective={1000} stepDuration={60} transitionDuration={60}>
        <Step id="intro" {...positions.base.toProps()} />
        {/* ... */}
      </Scene3D>
    </AbsoluteFill>
  );
};

import { Transform3D, Vector3 } from "remotion-bits";

const base = Transform3D.identity(); // Origin: position(0,0,0), rotation(0,0,0), scale(1,1,1)

const cardPosition = base
  .translate(vmin * 50, vmin * -20, 0)  // Move right and up
  .rotateY(-15)                          // Rotate around Y axis (degrees)
  .scaleBy(1.5);                         // Scale uniformly by 1.5x

// 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>