skills.rest
getfndd
getfnddCOMMUNITY
Explore all skills by this author →
GitHub

animate

Generates animated, self-running prototypes and captures them as WebM, MP4, GIF using Puppeteer and ffmpeg.

Updated Feb 21, 2026
Search Tags:#design#video#animation#prototype#demo#autoplay#cinematic
One-click install
npx skills add https://github.com/getfndd/animatic --skill animate-getfndd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animate
Source: https://github.com/getfndd/animatic/tree/main/.claude/skills/animate
Command: npx skills add https://github.com/getfndd/animatic --skill animate-getfndd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, ffmpeg, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill transforms static or interactive prototypes into polished, self-running animated demos, eliminating the need for manual animation or screen recordings.

Core Features & Use Cases

  • Prototype Animation: Generates autoplay versions of prototypes with applied animation principles and personalities.
  • Video Capture: Records existing autoplay prototypes into various video formats (WebM, MP4, GIF).
  • Use Case: Turn a Figma prototype link into a cinematic product walkthrough for a landing page, complete with custom animation personalities and high-quality video output.

Quick Start

Use the animate skill to generate an autoplay version of the prototype file 'prototypes/file-upload/concept-v1.html'.

Frequently Asked Questions about animate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a prototype into an animated demo video?▼

You can turn a prototype into an animated demo by generating an autoplay version that applies spring physics and animation principles, then capturing and encoding it into video formats like WebM or MP4.

Can I customize the animation style of my prototype walkthrough?▼

You can customize the animation style of your prototype walkthrough by applying specific personalities like editorial, cinematic, and neutral-light to match your desired visual tone.

Do I need Puppeteer and ffmpeg to capture prototype animations?▼

Yes, you need Puppeteer and ffmpeg to capture prototype animations, as Puppeteer handles browser automation for capture while ffmpeg performs the video encoding for outputs like WebM and GIF.

What video formats can I export from an autoplay prototype?▼

You can export an autoplay prototype into multiple video formats including WebM, MP4, and GIF, which are encoded using ffmpeg after the browser capture process is complete.

What is the best way to create a cinematic product walkthrough from a Figma link?▼

The best way to create a cinematic product walkthrough from a prototype is to generate an autoplay version with a cinematic personality and capture it directly into a high-quality video format.

Related Skills

Explore More Design & Creative Skills→
akashagl92akashagl92

Social Media Capture

Capture HTML animations as platform-optimized MP4 videos or GIFs using Puppeteer and ffmpeg.

Community
Advanced
digitalsambadigitalsamba
1.9k

playwright-recording

Record browser interactions as video using Playwright scripts.

Official
Intermediate
profmikegreeneprofmikegreene
1

ux-prototyping

Design and prototype user interfaces and dashboards for usability testing.

Community
Intermediate
richardnguyen0715richardnguyen0715

findmy

Automate Apple device and AirTag location tracking via FindMy.app UI automation.

Community
Intermediate