Animatify

Turn screen recordings or live web pages into structured animation specs, plain-language descriptions, and copy-paste AI prompts for Flutter, CSS / Web, React Native, or SwiftUI. Analysis runs on your machine via the Google Gemini API (no Animatify-hosted backend required).

Maintainer: Wajd Hannoun · Repository: github.com/Wajd27/Animatify

---

What it does

Input	Flow
Video	Drop or browse a short UI recording (.mp4, .webm, .mov, …). The extension sends it to Gemini and returns JSON + narrative + platform prompt.
URL	Paste an https:// URL, Scan page in headless Chrome, pick a detected animation (CSS, transitions, Web Animations API, best-effort GSAP/anime.js), then Analyze selected animation. Filmstrip frames plus extracted CSS context go to Gemini — same output shape as video.

The analysis panel includes API key status, URL scan with page preview and animation picker, video drop zone, Smart view, syntax-highlighted JSON, timeline strip, live CSS preview (iframe), recent history, export, and insert-at-cursor.

---

Compatible editors

Animatify is a Visual Studio Code extension (manifest engines.vscode). It runs in any editor that loads VS Code–compatible extensions, for example:

• Visual Studio Code
• Cursor
• Windsurf and other forks based on the same extension host

Install from a packaged .vsix (see below) or run from source in the Extension Development Host (F5). If your editor does not support VS Code extensions, Animatify cannot be installed there.

---

Architecture

Video path: pick a file → inline upload to Gemini with a strict JSON schema prompt → parse to AnimationSpec → description + platform-specific prompt.

URL path: Puppeteer-driven capture → animation detection and naming → frames + CSS context to Gemini → same spec shape as video.

Semantic motion descriptions are easier for vision models than pixel-perfect tracking; you may still tune timings in generated code.

---

Setup

1. Node.js 18+

2. Install dependencies and compile:

   git clone https://github.com/Wajd27/Animatify.git
   cd Animatify
   npm install
   npm run compile

3. Gemini API key (free tier available):

   • Recommended: Command Palette (Ctrl+Shift+P / Cmd+Shift+P) → Animatify: Set Gemini API Key → paste the key (stored in Secret Storage).
   • Or create a key in Google AI Studio, then use the command above or Settings → search animatify (legacy vidtoai settings are migrated once).

4. Optional settings

   Setting	Purpose
   animatify.geminiModel	Default gemini-2.5-flash. Options include gemini-2.5-flash-lite, gemini-2.5-pro, gemini-3-flash-preview. Do not use deprecated gemini-2.0-flash (retired; quota 0).
   animatify.defaultPlatform	flutter · css · react-native · swiftui
   animatify.maxVideoSizeMb	Upload cap (default 100)
   animatify.chromePath	Path to Chrome, Chromium, or Edge if auto-detect fails. Required for URL capture (puppeteer-core; Chromium is not bundled).
   animatify.urlPageLoadTimeoutSec	Max wait for page load when scanning a URL (default 120). Uses domcontentloaded so slow sites are less likely to hang forever.

---

Run from source (development)

This repo is not listed on the Marketplace by default; you will not find “Animatify” in the store until it is published.

1. Open the project root in your editor (the folder that contains package.json), not only a parent directory — otherwise Run Extension may not attach to this project.
2. Compile after changes: npm run compile (or npm run watch).
3. Extension Development Host: Run and Debug (Ctrl+Shift+D) → Run Extension → F5. A second window opens; that is where the extension runs.
4. Commands: open the Command Palette and search Animatify — e.g. Open Analysis Panel, Analyze Video, Capture Animation from URL….

If Run Extension is missing, check .vscode/launch.json.

---

Install a packaged build (.vsix)

npm install -g @vscode/vsce
npm run compile
vsce package

In your editor: Extensions → ⋯ → Install from VSIX… → select the generated .vsix. Then use the same Animatify commands as above.

Prebuilt .vsix from GitHub Releases

Tagged releases publish a built animatify-{version}.vsix (from package.json) on the Releases page — no local vsce required.

Create a new release (maintainers): bump version in package.json, then:

git add package.json package-lock.json
git commit -m "chore: release v0.1.0"
git tag v0.1.0
git push origin main
git push origin v0.1.0

Pushing a tag matching v* runs .github/workflows/release.yml and attaches the .vsix to that GitHub Release.

CI: every push to main and every pull request runs .github/workflows/ci.yml (npm ci + npm run compile).

---

Optional Supabase cache

SQL for a future cache/sync layer lives in supabase/migrations/20260404000000_vidtoai_cache.sql (analysis_cache, animation_specs). Not used in v0.1.0.

---

Project layout

Path	Role
src/extension.ts	Activation, commands
src/commands/	Video / URL analysis, API key
src/services/geminiClient.ts	Gemini calls
src/services/browserCapture.ts	URL capture & detection
src/services/specGenerator.ts, promptBuilder.ts	Specs and prompts
src/panels/AnalysisPanel.ts	Webview host
webview/	Webview assets

---

Troubleshooting: HTTP 429 / quota

429 or “exceeded your current quota” comes from Google’s API. If you still use gemini-2.0-flash, switch to gemini-2.5-flash or another supported model. Otherwise: wait briefly, shorten the video, try gemini-2.5-flash-lite, and confirm limits in AI Studio and the rate limits docs.

---

Limitations

• Motion is described semantically, not with pixel-perfect tracking.
• Large files are limited by Gemini inline limits and maxVideoSizeMb.
• Final implementation code is expected to be produced with your AI assistant using the generated prompt.

---

Contributing

See CONTRIBUTING.md. Bug reports and ideas are welcome via GitHub Issues.

---

Security

Please report sensitive issues as described in SECURITY.md.

---

License

MIT License © Wajd Hannoun

Motion analysis uses the Google Gemini API.