813 of 1,410 in Skills

Video 1 of 1Morphing UI states loop

Language: English
On-screen text: any language
Built with: Remotion
Google Fonts
Requires: Bun
Python 3
FFmpeg
Needs: No API keys
Runs in: Claude Code
Codex
Output: 1:1
MP4
Works offline: No
Downloads Google Fonts at render time
Tested: Static checks passed · not yet test-rendered
Generates with: Your agent's own model

What you get with this skill

SKILL.md with the full prompt, scripts and asset rules
One-line install prompt for Claude Code, Codex or Cursor
ZIP download to keep or share inside your team
Every future version of this skill

Feature Loop

Morphing UI states loop

Build a seamless-loop UI motion film in which ONE interface element, never cut, morphs through 8–14 states (button, spinner, check, player, progress bar, slider, toggle, segmented…

v1.0.0 · by Potto

Premium skill

Premium

Included with any paid plan, or buy this skill once for $5. Sign in to continue.

SKILL.mdPremium

--- name: morphing-ui-states-loop description: Build a seamless-loop UI motion film in which ONE interface element, never cut, morphs through 8–14 states (button, spinner, check, player, progress bar, slider, toggle, segmented control, chart card, command palette, status pill) on a spring timeline, with a cursor driving every change, click ripples, a slow camera drift and a last frame identical to the first. Renders deterministically with Remotion. Use for Dribbble-grade UI motion studies, micro-interaction loops, feature-loop reels, or "one shape morphs into every screen" demos.

Lite, Pro and Max all include every premium skill.

Build a seamless-loop UI motion film in which ONE interface element, never cut, morphs through 8–14 states (button, spinner, check, player, progress bar, slider, toggle, segmented control, chart card, command palette, status pill) on a spring timeline, with a cursor driving every change, click ripples, a slow camera drift and a last frame identical to the first. Renders deterministically with Remotion. Use for Dribbble-grade UI motion studies, micro-interaction loops, feature-loop reels, or "one shape morphs into every screen" demos.

Updated Oct 21, 2026

More skills like this

View all

Premium00
Side-by-Side Miniature World Comparison
Feature LoopENRemotion
Claude Code · Codex
Premium00
Particle Glitch Profile Reel
Kinetic TypeENRemotion
Claude Code · Codex
Premium00
Wordless abstract particle films
Visual SystemENRemotion
Claude Code · Codex
Premium00
Flat-Vector Commercial with a Color Ribbon Transition
LaunchENRemotion
Claude Code · Codex

Choose Your Plan

One balance of credits for AI videos and AI images. Subscribe monthly or yearly, or buy a credit pack once.

Lite
$20/month
Billed monthly
Choose Lite
Images per month at HD
Learn more
Nano Banana Pro44 images
Nano Banana86 images
Videos per month
30-second product demo13 videos
60-second explainer5 videos
- 2,000 credits per month
- Up to 86 fast images
- Standard queue
- No added Potto watermark
- Batch processing with AI tools
- Not listed in public galleries
- All premium skills included
Pro
$50/month
Billed monthly
Choose Pro
Images per month at HD
Learn more
Nano Banana Pro111 images
Nano Banana217 images
Videos per month
30-second product demo33 videos
60-second explainer13 videos
- 5,000 credits per month
- Up to 217 fast images
- Priority queue
- No added Potto watermark
- Batch processing with AI tools
- Not listed in public galleries
- All premium skills included
Recommended
Max
$100/month
Billed monthly
Choose Max
Images per month at HD
Learn more
Nano Banana Pro333 images
Nano Banana652 images
Videos per month
30-second product demo100 videos
60-second explainer40 videos
- 15,000 credits per month
- Up to 652 fast images
- Highest priority queue
- No added Potto watermark
- Batch processing with AI tools
- Not listed in public galleries
- All premium skills included

Videos use credits when you export, and starting one needs a balance that covers its export. Counts assume a 30-second product demo and a 60-second explainer with narration and 3 illustrations.