From 904f5a727238f4e9dd313d503bc2409ca0ba53f6 Mon Sep 17 00:00:00 2001
From: denetro <227287102+denetro@users.noreply.github.com>
Date: Thu, 2 Jul 2026 16:06:20 -0400
Subject: [PATCH] Fix broken example imports and spring() guidance
 inconsistency

- SKILL.md: add missing imports (AbsoluteFill, Easing, interpolate,
  useCurrentFrame, useVideoConfig) to the Sequence/Title/Subtitle/Main
  example so it compiles as written.
- SKILL.md: align spring() guidance wording with rules/timing.md
  ("unless the user explicitly asks for physics-based motion").
- text-animations-word-highlight.tsx: add a comment justifying the
  spring() exception to the prefer-interpolate rule.

Fixes #20
---
 skills/remotion/SKILL.md                              | 11 +++++++++--
 .../rules/assets/text-animations-word-highlight.tsx   |  4 ++++
 2 files changed, 13 insertions(+), 2 deletions(-)

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 `<Sequence>`.
 `<Sequence>` 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,