Media
4 items
Description
Capture website animations as intelligent keyframe sequences with timing metadata, optimized for AI model consumption. SnapFrame captures website animations and converts them into structured keyframe sequences that AI models can understand and reproduce. **How It Works** 1. Click the SnapFrame icon on any webpage 2. Choose a trigger mode: auto-scroll (captures the page top to bottom) or manual (you control the interaction) 3. Press Start Recording -- SnapFrame captures frames at your chosen FPS 4. When you stop, SnapFrame's differencing engine analyzes every frame and extracts only the keyframes where meaningful visual change occurred 5. Download a ZIP package containing sequenced PNG frames, a metadata.json with timing and easing data, and a ready-to-use AI prompt **What You Get** Each export contains: - Sequenced PNG keyframes (frame_001.png, frame_002.png, ...) - metadata.json with timestamps, change deltas, estimated easing curve, and capture settings - prompt.txt -- a pre-written prompt you can paste directly into ChatGPT, Claude, or any AI assistant along with the keyframe images **Key Features** - Smart keyframe extraction: only keeps frames where real visual change happened, not hundreds of duplicate frames - Easing detection: automatically estimates whether the animation uses linear, ease-in, ease-out, or ease-in-out timing - Configurable FPS (4-30) and scroll speed (1-10) - Two trigger modes: auto-scroll for scroll-based animations, manual for hover/click interactions - Recording history with re-download support - Region selection for capturing specific parts of a page - Lightweight: zero impact on pages until you start recording - Dark UI that stays out of your way **Who Is This For?** - Developers who want to recreate animations they see on the web - Designers capturing animation references for handoff - AI/ML practitioners building training datasets of web animations - Anyone who wants to reverse-engineer how a website animation works **Privacy** SnapFrame processes everything locally in your browser. No data is sent to any server. Captured frames never leave your machine unless you explicitly export and share them.