Premium Motion

Generated sites fade every block up the same way. This skill picks one of 20 styles, chooses three moments that earn their place, wires GSAP, SplitText, ScrollTrigger and Lenis, and proves the page still works with reduced motion and JavaScript off.

One styleKinetic type, blueprint, neo-brutalism, glassmorphism and 16 more, each with the motion that suits it.

Three momentsEntrance, one scroll pattern, one interaction. Each written down with its reason, or dropped.

Real librariesPinned, checked CDN links for plain HTML, or npm and useGSAP for React and Next.js.

Speed rulesNever hides the LCP element, only transform and opacity, no scroll listeners, heavy 3D only where it can afford it.

Self-checkConsole clean, screenshots at 375px and 1280px, reduced motion on, JavaScript off, Lighthouse before and after.

Read it before you run it.

A real excerpt from the file you download.

Pairs well with Landing Page Builder, Hand-Built Look, Launch Check.

premium-motion/SKILL.md

## 3. Pick three moments, no more
1. Entrance: the hero, once, on load.
2. Scroll pattern: one reveal pattern reused
   for every section.
3. Interaction: one hover or click response.

Write each as one sentence with its reason.
If a moment has no reason, drop it.

Questions

What is a skill?

A folder with a SKILL.md file of instructions. Claude reads it when your request matches, so it follows the same tested process every time instead of improvising.

Where does it work?

Claude Code (unzip into ~/.claude/skills/) and Claude.ai on web and desktop (Settings, Capabilities, Skills, upload). Skills need a plan with code execution turned on; Claude Code covers most people building sites.

Which frameworks?

Plain HTML and CSS, React and Next.js. The skills read your project first and match what is there.

Can I use them on client work?

Yes, on unlimited personal and client projects. Please don't resell or share the files.

What if it doesn't work?

If a skill is faulty or doesn't do what its page describes, email us within 14 days and we fix it or refund you. Details in the refund policy. Refund policy.