Docs: broken example + inconsistent spring() guidance in remotion-best-practices skill

[denetro]

1. Multi-sequence example in SKILL.md does not compile as shown

In skills/remotion/SKILL.md, the "To delay content wrap it in <Sequence>" section defines Title, Subtitle, and Main:

import { Sequence } from "remotion";

export const Title = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Title</div>;
};
...
const Main = () => {
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill>
      <Sequence>
        <Background />
      </Sequence>
      ...

The import statement only pulls in Sequence from "remotion", but the snippet also uses useCurrentFrame(), useVideoConfig(), interpolate(), Easing, and AbsoluteFill — none of which are imported. Copy-pasting this example as-is fails to compile/typecheck.

Suggested fix: update the import to:

import { AbsoluteFill, Easing, Sequence, interpolate, useCurrentFrame, useVideoConfig } from "remotion";

(and either define/import a placeholder Background component or note that it's illustrative only).

2. Inconsistent wording on when spring() is preferred over interpolate()

skills/remotion/SKILL.md states:

"Prefer interpolate() over spring() unless physics-based motion is explicitly needed."

skills/remotion/rules/timing.md states:

"Prefer interpolate() over spring() unless the user explicitly asks for physics-based motion."

These two phrasings express different criteria: SKILL.md's wording ("explicitly needed") reads as a judgment call the assistant can make based on context, while timing.md's wording ("the user explicitly asks") requires an explicit user request. Since both files are meant to convey the same rule, an agent following them may reach different conclusions about when it's acceptable to use spring().

Suggested fix: align the two files on a single phrasing — either adopt the stricter "unless the user explicitly asks for physics-based motion" in both places, or clarify that "explicitly needed" is meant to include cases where the physics-based feel is clearly implied by the request (e.g., bounce, overshoot, elastic motion) without requiring the user to name spring() by name.

3. word-highlight.tsx uses spring() without justifying the exception to the prefer-interpolate rule

skills/remotion/rules/assets/text-animations-word-highlight.tsx uses spring() for the highlight wipe animation:

const highlightProgress = spring({
	fps,
	frame,
	config: {damping: 200},
	delay,
	durationInFrames,
});

The file's only comment is the general description at the top:

/*
 * Highlight a word in a sentence with a spring-animated wipe effect.
 */

This states what the code does but not why spring() was chosen here despite the project-wide guidance (in both SKILL.md and rules/timing.md) to prefer interpolate() unless physics-based motion is needed. Since this asset is a reference example that agents copy from, the lack of justification makes it read as inconsistent with the documented rule, and offers no guidance for when a similar exception is appropriate elsewhere.

Suggested fix: add a short inline comment near the spring() call explaining the rationale, e.g.:

// spring() is used here (rather than interpolate()) because the wipe should
// settle with a natural, slightly elastic motion — a physics-based effect
// that interpolate()'s explicit easing curves can't easily replicate.
const highlightProgress = spring({
	fps,
	frame,
	config: {damping: 200},
	delay,
	durationInFrames,
});