Getting started

Onda components are React + Zod and run inside any Remotion composition. If you don't have a Remotion project yet, scaffold one with the official starter:

Onda requires Remotion 4.x, React 19+, and TypeScript.

From the root of your Remotion project, install any component by slug. The CLI drops the source files into components/onda/<slug>/ — they're yours to read, edit, and version.

Browse the full catalog to find a slug, or hit ⌘K to jump straight to a component by name.

The Onda look depends on two typefaces: Clash Display for headlines and Space Grotesk for body and UI. Every component accepts a fontFamily prop, but the defaults assume these are loaded.

<link
  rel="stylesheet"
  href="https://fonts.cdnfonts.com/css/clash-display"
/>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap"
/>

Use any font-loading strategy you prefer — what matters is that "Clash Display" and "Space Grotesk" resolve. Never fall back to Inter / Arial / system — those read as generic.

Every Onda component is a default-exported React component plus a named Zod schema. Pass the schema to Remotion's <Composition> for runtime prop validation and the Remotion Studio sidebar.

import { Composition } from 'remotion';
import { FadeIn, fadeInSchema } from './components/onda/fade-in/FadeIn';

export const Root: React.FC = () => (
  <Composition
    id="MyFade"
    component={FadeIn}
    durationInFrames={60}
    fps={30}
    width={1080}
    height={1920}
    schema={fadeInSchema}
    defaultProps={{
      text: 'Hello',
      delay: 0,
      duration: 18,
      color: '#F2F2F4',
      fontSize: 96,
      fontFamily: '"Clash Display", sans-serif',
    }}
  />
);

Each component ships with sensible defaults — drop it in with no props and it already looks correct. Every prop is documented in the component's README and on its catalog page.

The motion fingerprint comes from a small, shared token set: durations, springs, easing, colors. When you build your own components, reuse these instead of hardcoding values — that's what keeps every scene feeling like the same library.

import { COLOR, DURATION, SPRING_SMOOTH } from '@/lib';

spring({ frame, fps, config: SPRING_SMOOTH, durationInFrames: DURATION.base });
return <div style={{ color: COLOR.text }}>…</div>;

• DURATION — the frame-count scale (instant, fast, base, slow, slower, hold).
• SPRING_SMOOTH, SPRING_SNAPPY — the two house springs. Never reduce damping for a "pop."
• HOUSE_EASE — ease curve for opacity and color fades.
• STAGGER, staggerFrames — the canonical 4-frame stagger between siblings.
• COLOR, FONT — the design-token palette.