Compare

How Onda is different.

Most code-driven motion looks like a 2009 After Effects export — or it's so generic the brand vanishes inside it. Here's an honest read on where Onda fits and where it doesn't.

The honest matrix

7 rows

Capability

Roll your own

with Remotion primitives

AE templates

Envato, Motion Array, …

Framer Motion

inside Remotion

Onda

this library

Distribution

How the thing reaches your project

npm primitives
Paid .mp4 / .aep
npm package
Source you own

Programmatic data

Pass real values from your app at render time

Yes
No — baked-in
Yes
Yes

Motion identity

A consistent way things move across components

None — you decide
Strong, but rented
UI animation feel
One signature identity

Premium defaults

Looks finished with zero configuration

Start from zero
Locked-in
Start from zero
Token-based

Scene-grade blocks

TitleCard, LowerThird, StatCard, EndCard — ready to drop in

Build them yourself
N/A — whole-scene only
Not its domain
7 and growing

AI-agent friendly

Zod-typed props an LLM can generate against

No schemas
No API
TS types only
Zod schemas

Render pipeline

Where the pixels come from

Remotion
After Effects
Browser-only by default
Remotion
YesPartialNoNot applicableOnda

Same moment, three ways

Animate a hero title. Three ways to get there, one of which reads instantly as Onda.

Roll your own

~38 lines
import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate, Easing } from 'remotion';

export const HeroTitle = ({ text }: { text: string }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({
    frame, fps,
    config: { damping: 200, stiffness: 100, mass: 1 },
    durationInFrames: 18,
  });

  const opacity = interpolate(progress, [0, 1], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });
  const y = interpolate(progress, [0, 1], [16, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const blur = interpolate(progress, [0, 1], [12, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{ alignItems: 'center', justifyContent: 'center' }}>
      <div style={{
        opacity,
        transform: `translateY(${y}px)`,
        filter: `blur(${blur}px)`,
        fontSize: 96,
        fontFamily: '"Clash Display", sans-serif',
        fontWeight: 600,
        color: '#F2F2F4',
      }}>
        {text}
      </div>
    </AbsoluteFill>
  );
};

Springs, easings, blur, layout — every primitive wired by hand. Total control, zero identity.

AE template

$24

Cinematic Title Intro

Volume 12

lens flare4K ProResno plug-ins

Edit-in-After-Effects. Export an .mp4.

Designed-looking, but the same fingerprint as every other buyer. No props, no data.

Onda

1 import
0.0/4.0s
import { BlurReveal } from '@/components/onda/blur-reveal/BlurReveal';

<BlurReveal text="Onda" />

Premium defaults, signature spring, owned source. Same moment, one component.

Where each one wins

No tool is right for every job. Here's when you should pick something other than Onda — and when Onda is the answer.

  • Roll your own

    You need a motion language no library can give you, you like the boilerplate, and you have the time to maintain it.

  • AE templates

    You need fifty stock-footage business intros by tomorrow and you are paying specifically for the "designed-looking" preset.

  • Framer Motion

    You are already deep in React UI-animation patterns and your video is essentially a longer landing page.

  • Onda

    You want code-first videos that do not look generated, with Zod-typed props an AI agent can compose against.

Onda is for people who care about how it feels.

38 components, one motion identity, source you own. Free, MIT, built on Remotion.

Browse components →GitHub