remotion-render-pitfallslisted

# Render-breaking pitfalls (read before writing code) > **First-party POPJAM skill.** This is maintained by us and is intentionally > separate from the externally-maintained `remotion-best-practices` skill so our > renderer-specific rules survive upstream syncs. Use it together with > `remotion-best-practices` (general Remotion knowledge) — this skill adds the > mistakes that specifically fail **POPJAM's** pipeline. POPJAM renders every animation through a strict pipeline: **`tsc --noEmit` → `eslint` → Remotion render**. If any stage fails, the whole render fails and the work is wasted. The mistakes below are the ones that actually break renders in production, ordered by how often they happen. Avoid all of them. --- ## 1. Declare or import every identifier (TS2304 "Cannot find name") Every name you reference must be either imported or defined in the same scope. Recurrent offenders: - Remotion helpers used without importing them: `interpolate`, `spring`, `Easing`, `useCurrentFrame`, `useVideoConfig`, `Sequence`, `AbsoluteFill`, `Img`, `staticFile`. - Constants referenced before/without declaration: `colors`, `COLORS`, scene constants like `SCENE_3_WAVEFORM_HEIGHTS`. ✅ Import everything from `remotion` you use, and define every constant you read: ```tsx import { useCurrentFrame, useVideoConfig, interpolate, spring, Easing, Sequence, AbsoluteFill, Img, staticFile } from "remotion"; const COLORS = { primary: "#1B8EFB", accent: "#14816E" }; ``` Before calling `rend