Framer Motion Integration

Framer Motion animations are typically time-based. To synchronize them with Helios (which is frame-based and scrubbable), you must map the Helios frame state to MotionValues.

Quick Start

1. useVideoFrame Hook

Ensure you have the useVideoFrame hook (see examples/react/SKILL.md).

2. Map Frames to MotionValues

Use useTransform to map the current frame (from useVideoFrame) to animation values.

import { useMotionValue, useTransform, motion } from 'framer-motion';
import { useVideoFrame } from './hooks/useVideoFrame';