diff --git a/skills/remotion/SKILL.md b/skills/remotion/SKILL.md index 28eb6f31..6d479f30 100644 --- a/skills/remotion/SKILL.md +++ b/skills/remotion/SKILL.md @@ -23,7 +23,7 @@ Replace `my-video` with a suitable project name. Before designing visual scenes, layouts, promos, motion graphics, or text-heavy videos, load [rules/video-layout.md](rules/video-layout.md) for video-first layout and text sizing guidance. -Animate properties using `useCurrentFrame()` and `interpolate()`. Prefer `interpolate()` over `spring()` unless physics-based motion is explicitly needed. Use `Easing.bezier()` to customize timing, including jumpy or overshooting motion. +Animate properties using `useCurrentFrame()` and `interpolate()`. Prefer `interpolate()` over `spring()` unless the user explicitly asks for physics-based motion. Use `Easing.bezier()` to customize timing, including jumpy or overshooting motion. For animations that should be editable in Remotion Studio, keep the `interpolate()` call inline in the `style` prop and use individual CSS transform properties (`scale`, `translate`, `rotate`) instead of composing a `transform` string. @@ -118,7 +118,14 @@ To limit the duration of an element, use `durationInFrames` of ``. `` by default is an absolute fill. For inline content, use `layout="none"`. ```tsx -import { Sequence } from "remotion"; +import { + AbsoluteFill, + Easing, + Sequence, + interpolate, + useCurrentFrame, + useVideoConfig, +} from "remotion"; export const Title = () => { const frame = useCurrentFrame(); diff --git a/skills/remotion/rules/assets/text-animations-word-highlight.tsx b/skills/remotion/rules/assets/text-animations-word-highlight.tsx index 0aae3e29..3235cf99 100644 --- a/skills/remotion/rules/assets/text-animations-word-highlight.tsx +++ b/skills/remotion/rules/assets/text-animations-word-highlight.tsx @@ -29,6 +29,10 @@ const Highlight: React.FC<{ const frame = useCurrentFrame(); const {fps} = useVideoConfig(); + // spring() is used here (rather than interpolate()) because the wipe + // should settle with a natural, slightly elastic motion driven by + // damping — a physics-based feel that interpolate()'s explicit easing + // curves can't easily reproduce. const highlightProgress = spring({ fps, frame,