einundzwanzig-verein/videos/.opencode/skills/remotion-best-practices/rules/animations.md

name, description, metadata

name	description	metadata
animations	Fundamental animation skills for Remotion	tags animations, transitions, frames, useCurrentFrame

All animations MUST be driven by the useCurrentFrame() hook.
Write animations in seconds and multiply them by the fps value from useVideoConfig().

import { useCurrentFrame } from "remotion";

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

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: 'clamp',
  });
 
  return (
    <div style={{ opacity }}>Hello World!</div>
  );
};

CSS transitions or animations are FORBIDDEN - they will not render correctly.
Tailwind animation class names are FORBIDDEN - they will not render correctly.