AI CSS Animations

Apple-Style Kinetic Recap

Apple-style kinetic recap videos in Remotion where every default is measured from six Apple recap films: shot length, type size and hold, spring constants, cut ratios, BPM and loudness.

By Damir @IskakovDamir Sep 28, 2026

Type
skill
Made with
Claude Code
Built in
Remotion
Topics
Kinetic type · Product UI

The skill

# apple-motion

Every default here is measured, not guessed: six Apple recap videos (1107 s, 33,187 frames) went
through a forensic pipeline (OCR text tracking, spring fitting, optical flow, beat tracking,
loudness), and the pipeline itself was calibrated on renders with known springs and fonts.
Not affiliated with Apple.

[…]

- **Pace.** Median shot 56.5 frames (1.9 s); p10 13.0, p90 173.5 frames; 3.24 cuts per 10 s (median video). Transitions: cut 92%, whip 5%, scale through 1%, dissolve 1%.
- **Typography is an accent, not the bed.** Designer-set type appears 0.78 times per 10 s (median video); most on-screen text is UI inside product shots. Hold 33.0 frames median (p10 10.0, p90 80.6).
- **Size.** Cap height median 6.67% of frame height (p10 3.25%, p90 20.23%). Lines: 1 84%, 2 10%, 4 4%. Alignment: center 60%, right 19%, left 15%.
- **Entries.** cut on 25%, slide 21%, fade 18%, scale down from large 9%, per-letter 7%. Animated entries are visibly done in 8.0 frames (median). Spring (calibrated): damping 15.35, stiffness 115.0, mass 1 - use it without durationInFrames.
- **Exits.** cut off 59%, slide out 13%, fade out 10%, blur out 7%; median 0.0 frames.
- **Sound.** 118.8 BPM median (p10 91.9, p90 131.3); -17.4 LUFS integrated, -2.0 dBTP true peak; voice-over at 3.04 words/s. Cuts are not locked to the beat: 134/400 within +-2 frames vs 124.8 expected by chance (p=0.1586) - the edit follows the voice and picture.

From Damir's repo, under the MIT license.

Similar prompts