example-framer-motion
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';
export const MyComponent = ({ helios }) => {
More from bintzgavin/helios-skills
helios-skills
Collection of agent skills for Helios video engine. Use when working with programmatic video creation, browser-native animations, or Helios compositions. Install individual skills by path for specific capabilities.
72motion-design-rules
Motion design framework for programmatic video. Defines anti-slideshow architecture, visual layering, physics-based easing, choreography rules, and quality validation. Reference this skill from any guided video skill.
6helios-renderer
Renderer API for generating video/image output from Helios compositions. Use when you need to programmatically render a composition to a file using Node.js.
5guided-product-demo
End-to-end guided workflow for creating a product demo or showcase video. Extracts brand identity from the repo, generates a polished soundtrack, and produces a feature-focused motion.dev composition rendered via Helios CLI. Use when making product demos, feature showcases, or UI walkthroughs.
5guided-promo-video
End-to-end guided workflow for creating a promotional hype video. Extracts brand identity from the repo, generates beat-synced music, and produces a high-energy motion.dev composition rendered via Helios CLI. Use when making brand-aligned promo or hype videos.
5render-video
Workflow for rendering a Helios composition to a video file. Use when you need to automate video production or export a high-quality animation.
4