スキル 813/1,410

動画 1／1Morphing UI states loop

言語: 英語
画面内の文字：すべての言語に対応
制作ツール: Remotion
Google Fonts
必要なもの: Bun
Python 3
FFmpeg
必要なもの: API キー不要
実行環境: Claude Code
Codex
出力: 1:1
MP4
オフライン利用: 不可
Downloads Google Fonts at render time
動作確認: 静的チェック済み・テストレンダリングは未実施
生成に使用: Your agent's own model

このスキルに含まれるもの

完全なプロンプト、スクリプト、素材ルール入りの SKILL.md
Claude Code、Codex、Cursor 向けの 1 行インストールプロンプト
保存やチーム内共有用の ZIP ダウンロード
このスキルの今後の全バージョン

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 · Potto

Premium スキル

Premium

すべての有料プランに含まれます。このスキルだけを $5 で買い切ることもできます。ログインして続けてください。

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、Max のすべてのプランに、すべての Premium スキルが含まれます。

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.

2026/10/21 に更新

似たスキル

すべて見る

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

プランを選ぶ

AI 動画と AI 画像で使える、一つのクレジット残高です。月額または年額で登録するか、クレジットパックを一度だけ購入できます。

Lite
$20/月
月額請求
Lite を選ぶ
月あたりの生成枚数（HD）
詳しく見る
Nano Banana Pro44 枚
Nano Banana86 枚
月あたりの動画本数
30 秒の製品デモ動画13 本
60 秒の解説動画5 本
- 月 2,000 クレジット
- 高速生成は最大 86 枚
- 標準キュー
- Potto のウォーターマークを追加しません
- AI ツールの一括処理
- 公開ギャラリーには掲載されません
- すべての Premium スキルが利用可能
Pro
$50/月
月額請求
Pro を選ぶ
月あたりの生成枚数（HD）
詳しく見る
Nano Banana Pro111 枚
Nano Banana217 枚
月あたりの動画本数
30 秒の製品デモ動画33 本
60 秒の解説動画13 本
- 月 5,000 クレジット
- 高速生成は最大 217 枚
- 優先キュー
- Potto のウォーターマークを追加しません
- AI ツールの一括処理
- 公開ギャラリーには掲載されません
- すべての Premium スキルが利用可能
おすすめ
Max
$100/月
月額請求
Max を選ぶ
月あたりの生成枚数（HD）
詳しく見る
Nano Banana Pro333 枚
Nano Banana652 枚
月あたりの動画本数
30 秒の製品デモ動画100 本
60 秒の解説動画40 本
- 月 15,000 クレジット
- 高速生成は最大 652 枚
- 最優先キュー
- Potto のウォーターマークを追加しません
- AI ツールの一括処理
- 公開ギャラリーには掲載されません
- すべての Premium スキルが利用可能

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.