Individual skill

motion-ui-morph

One-Shape UI Motion — motion design template. A 14-second code-only UI motion piece, rebuilt from the viral original: one shape morphs from a button into a loader, player, slider, toggle, tabs, chart, command palette and toast, driven by a cursor at 120 BPM.

plugins/_official/examples/motion-ui-morph/SKILL.md

Read pinned source

Source commit e7a18df64d0e5e1161903e93bb5a302229dbeb96

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Network or broad shell
Last checked: Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 106,766
Repository last updated: Nov 9, 2026
License: Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

ai-design Repository topic
byok Repository topic
design-systems Repository topic
claude-design Repository topic
hermes-agent Repository topic
agent-skills Repository topic
desktop-app Repository topic
figma-alternative Repository topic
prototyping Repository topic
ui-generator Repository topic
design Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 6,320 bytes
SKILL.mdcore · 6,320 bytes
SKILL.mdcore · 6,320 bytes
assets/cover.jpgasset · 3,881 bytes
assets/geist-OFL.txtdoc · 4,387 bytes
assets/geist-medium.ttfasset · 35,436 bytes
assets/geist-regular.ttfasset · 35,404 bytes
assets/geist-semibold.ttfasset · 35,456 bytes
assets/gsap.min.jsruns · 72,214 bytes
assets/soundtrack.mp3asset · 168,691 bytes
example.htmlasset · 28,818 bytes
open-design.jsonasset · 25,660 bytes

Read excerpt


# One-Shape UI Motion

A 14-second code-only UI motion piece, rebuilt from the viral original: one shape morphs from a button into a loader, player, slider, toggle, tabs, chart, command palette and toast, driven by a cursor at 120 BPM. `example.html` is the finished reference — start from it.

The reference timing and beat map describe the demo. Adapt them to the user's
requested duration and content; do not force the reference duration or music.

## Source
A remake of a viral post by @twoclipping: https://x.com/twoclipping/status/2103273003555402193 (1.03M views · 12K likes · 20K bookmarks on X (as of 2026-10-05)). The composition is
rebuilt in code from the published piece; the soundtrack is original.

## Reference files
Copy `example.html`, `assets/geist-OFL.txt`, `assets/geist-medium.ttf`, `assets/geist-regular.ttf`, `assets/geist-semibold.ttf`, `assets/gsap.min.js` into the composition, preserving the `assets/` path.
Copy the demo soundtrack only if selected under the Sound guidance below.