Interactivity Best Practices

Use these guidelines when creating or reviewing Remotion animations, especially if the animation should be editable in Remotion Studio Visual Mode.

Prefer interpolate() over standalone spring()

Prefer interpolate() for most animation values.

• It is easier for humans and agents to reason about.
• Bezier easings are familiar from CSS and can express snappy or jumpy motion.
• Studio Visual Mode can edit interpolate() keyframes.

When an animation should feel like a spring, keep the editable value in interpolate() and pass Easing.spring() as the easing function.

Prefer:

style={{
  scale: interpolate(frame, [0, 30], [0, 1], {
    easing: Easing.spring({
      damping: 200,
    }),
  }),
}}

❌ Avoid using spring() as a separate driver when the same motion can be expressed as interpolate() easing:

const scale = spring({
  frame,
  fps,
  config: {
    damping: 200,
  },
});

style={{
  scale,
}}

Easing.spring() supports damping, mass, stiffness, and overshootClamping. It is normalized to the interpolation progress, so it does not take frame, fps, from, to, delay, reverse, durationInFrames, or durationRestThreshold.

Use standalone spring() only when the animation specifically needs a frame-driven physical spring simulation that cannot be represented as an easing on interpolate().

Prefer individual CSS transform properties

Use individual CSS transform properties such as scale, rotate, and translate instead of composing a transform string.

Prefer:

style={{
  scale: interpolate(frame, [0, 100], [0, 2]),
}}

❌ Avoid:

style={{
  transform: `scale(${interpolate(frame, [0, 100], [0, 2])})`,
}}

Individual transform properties are editable in Studio Visual Mode. Values hidden inside a transform string are not.

Keep editable values inline

Put the interpolation directly in the JSX style object when the value should be visually editable.

Prefer:

style={{
  scale: interpolate(frame, [0, 100], [0, 2]),
}}

❌ Avoid:

const scale = interpolate(frame, [0, 100], [0, 2]);

style={{
  scale,
}}

Inline computations and literal values let Studio Visual Mode discover and edit the keyframes and props.

This also applies to effect parameters. Keep editable effect values inline in the effect call.

Prefer:

effects={[
  radialProgressiveBlur({
    center: [0.5, 0.5],
    point1: [0.86, 0.36],
    point2: [0.68, 0.84],
  }),
]}

❌ Avoid hiding editable values behind constants:

const center = [0.5, 0.5] as const;

effects={[
  radialProgressiveBlur({
    center,
  }),
]}

Keep effects unconditional

When using the effects prop, keep the effect array shape unconditional. Studio Visual Mode cannot reliably edit an effect that only exists behind a conditional expression.

Prefer rendering separate elements when one version should have effects and another should not:

<CanvasImage src={src} width={1280} height={720} />
<CanvasImage
  src={src}
  width={1280}
  height={720}
  effects={[
    blur({
      radius: interpolate(frame, [0, 100], [0, 40]),
    }),
  ]}
/>

❌ Avoid conditionally including an effect:

<CanvasImage
  src={src}
  width={1280}
  height={720}
  effects={enabled ? [blur({radius: 40})] : []}
/>

Keep editable effect parameters inline inside the unconditional effect call. Do not pass variables for editable values such as coordinates, colors, numeric controls, or interpolations.

Interpolate rotation and translation directly

Interpolate CSS unit strings directly for rotate and translate.

Prefer:

style={{
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
}}

❌ Avoid manually building strings around separately interpolated numbers when the property can be interpolated directly.

Direct interpolation of these properties is supported and works better with visual editing in Studio.

Use Interactive.* for tweakable elements

Use the Interactive namespace from remotion when an element is likely to be tweaked in Studio.

import {Interactive} from "remotion";

For example:

<Interactive.Div
  style={{
    color: "red",
    fontSize: 80,
  }}
>
  Hello
</Interactive.Div>

<Interactive.Div>, <Interactive.Span>, and the other Interactive.* components behave like their regular HTML equivalents, but enable interactivity in Studio.

Inline styles on these elements, such as text color and font size, can be standardized interactively.

remocn

Copy-paste components for Remotion videos. Components install via shadcn and land in components/remocn/ — you own the code.

Installation

Prerequisites: a Remotion project (npx create-video@latest).

# Add any component (namespaced shadcn registry)
shadcn add @remocn/blur-out-up

# Component lands at components/remocn/blur-out-up.tsx

@remocn/<name> is the canonical namespaced form (configured under registries in components.json). The plain registry URL https://remocn.dev/r/<name>.json also works.

Dependencies install automatically

Many components pull others via registryDependencies — shadcn installs them transitively. For example, shadcn add @remocn/typewriter also pulls @remocn/remocn-ui and @remocn/caret.

• @remocn/remocn-ui is the shared core lib (timeline-fold hook, theme context, color math). Most UI Primitives depend on it. You rarely install it directly.

Two tiers

remocn has two kinds of components — they have different APIs:

• Animation tier (remocn) — text animations, transitions, backgrounds, UI-block sims, brand/social cards, full compositions. Frame-driven. Shared props: speed (time multiplier), and for text: fontSize, color, fontWeight.
• UI Primitives (remocn-ui) — timeline-driven shadcn-style primitives (button, dialog, select, command-menu, tooltip…). State-based props (state, style, variant, theme). No speed prop. Built on @remocn/remocn-ui.

Component categories

Pick by what you're building. The catalog is split one file per component under references/components/. Start at references/components/index.md — a router table grouped by these categories with a Use for / Avoid for signal per component. Scan it, pick candidates, then open only the references/components/<name>.md files you need (full props, example, all use / don't-use notes). Don't read every file.

Component patterns

Conventions differ by tier — don't assume animation-tier props on a primitive.

Animation tier (remocn)

• Named Props interface per component (e.g. BlurOutUpProps).
• speed?: number — global time multiplier (default 1), applied as frame * speed.
• Text components: fontSize, color, fontWeight.
• Transitions: lowercase factories (e.g. whipPan(props)) returning a TransitionPresentation — pass to TransitionSeries.Transition via presentation, pace with linearTiming / springTiming.
• className?: string on the root.

UI Primitives (remocn-ui)

• State-based, not speed-based: state (e.g. "open" / "closed"), style, variant, size, theme?: Partial<RemocnTheme>.
• The opened/closed/active state is a pure function of the timeline (keyframed presets).
• Compose modal-layer primitives (dialog, alert-dialog, drawer) with a trigger element — see each component's example.

Animation API

import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";

const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
const scale = spring({ fps, frame, config: { damping: 12, mass: 1, stiffness: 100 } });

// Deterministic randomness (NEVER Math.random())
import { random } from "@remotion/random";
const jitter = random(`seed-${frame}`);

Composition structure

import { Sequence, Series } from "remotion";

<Sequence from={30} durationInFrames={60}>
  <Typewriter text="npm install remocn" />
</Sequence>

<Series>
  <Series.Sequence durationInFrames={60}><SceneA /></Series.Sequence>
  <Series.Sequence durationInFrames={60}><SceneB /></Series.Sequence>
</Series>

Canvas & timing

• Canvas standard: 1280×720 @ 30fps. Components are laid out for it.
• Budget each Sequence around the component's natural length — the Length column in components/index.md (and each file's Natural length). Under-budgeting clips the animation; over-budgeting leaves dead air.
• Tone matching: each catalog entry carries a vibe tag (tech/premium/data/clean/ playful/social) — pick components whose vibe fits the brand.
• Palette & fonts: stay within the library's tokens (references/design.md → tokens) so your own elements don't clash.

Design defaults — avoid AI-slop

When you write your own text, scene chrome, or cards (not the prebuilt components), keep it restrained:

• No decorative letter-spacing on body/heading text you add.
• No text-transform: uppercase / ALL-CAPS defaults — prefer sentence case (Launch, not LAUNCH).
• No gradient text-fills or decorative gradient washes — gradients only as intentional backgrounds.
• No glow / colored drop-shadows or large blur radii (blur > ~24px, spread, multi-layer) — subtle 1px elevation only.

Exception: never strip these from components whose essence is the effect — tracking-in (letter-spacing), mesh-gradient-bg and social cards (gradients), and intentional elevation are all legitimate. The rules govern your additions, not the library.

Full do/avoid examples: references/design.md. For motion quality (timing, anticipation, staging, easing), see references/motion-principles.md.

Gotchas (remocn-specific)

• Transitions wrap two scenes — pass from / to as ReactNode, not as a static instance.
• Terminal scroll is instant — step-function translateY, never spring/ease the scroll.
• overflow: hidden on split layouts — prevents content breakage during width animations.
• Cursor blink is deterministic — Math.floor(frame / 15) % 2 === 0, not intervals.
• Static files go in public/ — load via staticFile('cursor.svg'), not imports.
• Social cards render offline — avatarUrl="" / coverUrl="" fall back to gradients; no fetch.

General Remotion rules (no Math.random(), no setInterval, animate transform not top/left, load fonts before render) live in the remotion-best-practices skill.

Composing a video

Don't dump components — compose one story. When asked to build a full video ("make a product demo", "changelog video", "intro for my landing"):

1. Decide the strategy — ready template vs compose from components vs build a new component. See references/anatomy.md §1.
2. Follow the beats — a product demo is Hook → Positioning → Product reveal → Features → Proof → CTA (last two optional). See references/anatomy.md §2.
3. Use the recipe — references/archetypes/index.md routes to per-archetype builds: content contract (infer → ask → placeholder), duration variants, beat→component slots, and a worked <TransitionSeries> skeleton.
4. Pick each beat's component from references/components/index.md; match the vibe tag to the brand and budget each <Sequence durationInFrames> around its natural length.
5. Check the quality bar — one accent, sentence-case kinetic type, real content, no glow halos, no feature-list enumeration, no mesh-gradient-bg. See references/anatomy.md §3.

Reference

• references/anatomy.md — composing a full video: strategy (template/compose/new), the product-demo beats, and the good-vs-slop quality bar.
• references/archetypes/index.md — router to per-archetype build recipes (product-demo flagship + changelog, feature-announcement, oss-showcase, cli-tool-demo, testimonial-reel, year-in-review, pricing-reveal, logo-bumper): content contract, duration variants, beat→slot map.
• references/components/index.md — router table (all components, grouped by category, with Use for / Avoid for). Open references/components/<name>.md for one component's full props, example, and use / don't-use notes.
• references/design.md — anti-slop design defaults (do/avoid) + design tokens (palette, fonts, canvas).
• references/motion-principles.md — motion-design principles adapted to remocn + Remotion.
• references/anti-patterns.md — common generation mistakes and their fixes.