FramelyProgrammatic Video Creation

Build videos with React components. Frame-perfect animations, deterministic rendering, and a powerful studio.

Get Started

View on GitHub

💻

Code-First

Define videos as React components. Full TypeScript support with autocomplete.

🎯

Frame-Perfect

Every frame is deterministic. Animations sync exactly to your timeline.

📦

Export Anywhere

Render to MP4, WebM, GIF, or image sequences using FFmpeg.

⚡

Fast Preview

Hot reload your compositions. See changes instantly in the browser studio.

🧩

Templates

Browse the marketplace for pre-built templates. Customize and render.

🎨

Animations

Spring physics, easing functions, and interpolation built-in.

Quick Example

jsx

import { useCurrentFrame, spring, AbsoluteFill, Composition } from 'framely';

function MyVideo() {
  const frame = useCurrentFrame();
  const scale = spring({ frame, fps: 30, from: 0, to: 1 });

  return (
    <AbsoluteFill style={{ background: '#000' }}>
      <h1 style={{ transform: `scale(${scale})` }}>
        Hello, Framely!
      </h1>
    </AbsoluteFill>
  );
}

export const Root = () => (
  <Composition
    id="my-video"
    component={MyVideo}
    width={1920}
    height={1080}
    fps={30}
    durationInFrames={150}
  />
);