remotion-text-effectslisted

# Remotion Text Effects Use this skill to implement text reveal effects in Remotion with `useCurrentFrame()` and `interpolate()`. Do not copy browser demos that use `requestAnimationFrame`, `setInterval`, CSS transitions, CSS animations, or Tailwind animation utilities; those are not reliable for deterministic rendering. ## Quick Workflow 1. Inspect the composition and identify the text role: hero title, subtitle, quote, UI label, code/token text, or loading/skeleton text. 2. Choose the effect from `references/effects-guide.md` if the user did not name one. 3. Copy or adapt `assets/TextEffects.tsx` into the target Remotion project, commonly as `src/components/TextEffects.tsx`. 4. Use effect components inside a Remotion component. Drive timing by `startFrame`, `durationInFrames`, `staggerFrames`, and `revealFrames`. 5. Run `npm run lint` or the project’s equivalent, then render one or more still frames with `npx remotion still <composition-id> --frame=<n> --scale=0.25`. ## Recommended Mapping - Editorial hero title: `BlurSharpenText`, `InkWashText`, or `WordWipeText`. - Fast AI/code feeling: `CharScrambleText`, `TokenChunksText`, or `TypewriterText`. - Warm readable captions: `WordFadeText` or `WordLiftText`. - Dramatic quote reveal: `BlurSharpenText` for each phrase plus a highlight shape. - Loading-to-answer moment: `SkeletonFillText`. - Playful glyph motion: `LetterDropText`, used sparingly. ## Usage Example ```tsx import { AbsoluteFill, useVideoConfig } from "remoti