jitterlisted

Select export formats from Jitter (jitter.video) — the browser-based motion design tool ("Figma for motion") — and integrate its MP4/GIF/Lottie exports into Next.js 14 + Tailwind 3.4 + motion v13 (`motion/react`). Use this whenever a task involves Jitter in any form, a motion-designed asset needs to be produced by a designer and played on a page, a Lottie file (.json or .lottie) needs to be rendered in React, someone asks "how do I play this animation export", an animated logo/loader/product-demo clip needs embedding, a Figma design needs to become an animation, or when deciding between a Lottie export and a hand-coded CSS/framer-motion animation. Also use it to pick the right Lottie player package — the verified comparison (lottie-react vs @lottiefiles/dotlottie-react) and the reduced-motion/lazy-loading patterns live in references/integration.md.
shashidharbabu/claude-design-skills · ★ 0 · Web & Frontend · score 60

Install: claude install-skill shashidharbabu/claude-design-skills

# Jitter Jitter (jitter.video) is a **browser-based motion design tool** — "Figma for motion". Paid SaaS with a free tier. There is no public API, no npm package, no CLI. A human animates in the browser (often starting from a Figma import or one of 300+ templates) and downloads a rendered export. Claude Code cannot operate the tool. So this skill owns the two steps around the human: 1. **Selection** — which export format for which need, what plan tier that format requires, and what to tell the designer before they hit Export. 2. **Integration** — playing the export in our stack. For Lottie this is real engineering: player choice, bundle cost, lazy loading, reduced motion, dark mode. All code is in `references/integration.md`. ## What Jitter exports, and what it costs (verified Aug 2026) | Format | Plan | Notes | |---|---|---| | MP4 video, GIF, Lottie (.json) | **Free** | 720p / 30fps max, **watermarked** | | No watermark, 1080p / 60fps, ProRes, WebM | Pro (per-editor/mo) | The realistic floor for commercial work | | 4K / 120fps, transparent export, frame-by-frame, batch export | Max | Transparent WebM/ProRes = overlay video | | Figma import, templates, animated components | Free | | Pricing page: `https://jitter.video/pricing/`. Blunt version: **the free tier watermarks every export and caps at 720p — never ship a free-tier export on a commercial launch page.** Budget one Pro seat for the designer. ## Format selection | Need | Export | Why | |---|---|---| | U