skills.rest
motionharvest
motionharvestCOMMUNITY
Explore all skills by this author →
Website𝕏@motionharvestGitHub

motion-web-design

Scaffold Vite landing pages with GSAP scroll animations and Lenis.

2|Updated Apr 11, 2026
Search Tags:#frontend#web design#animation#vite#gsap#lenis#scrolltrigger
One-click install
npx skills add https://github.com/motionharvest/agent-skills --skill motion-web-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-web-design
Source: https://github.com/motionharvest/agent-skills/tree/main/motion-web-design
Command: npx skills add https://github.com/motionharvest/agent-skills --skill motion-web-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, @studio-freight/lenis, vite, and includes scripts (resource) components.

What problem does it solve?

This Skill bridges the gap between design and high-performance implementation, allowing you to build sophisticated, motion-rich landing pages without the overhead of heavy frameworks.

Core Features & Use Cases

  • Choreographed Motion: Implements industry-standard GSAP and ScrollTrigger timelines for professional-grade scroll animations.
  • Design System Integration: Seamlessly translates design tokens and visual identity rules into production-ready CSS and JS.
  • Use Case: When you have a finalized design system and build prompt, use this Skill to scaffold a Vite project and execute the full build, from hero entrance sequences to complex section scroll choreography.

Quick Start

Use the motion-web-design skill to scaffold a new project and implement the design system defined in design-system.md based on the current build prompt.

Frequently Asked Questions about motion-web-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build Awwwards-quality landing pages with GSAP and Lenis?▼

Building Awwwards-quality landing pages requires choreographed scroll animations and micro-interactions, which this Skill implements by scaffolding a Vite project with GSAP timelines and Lenis smooth scrolling.

What is the best way to integrate a design system into a Vite animation project?▼

The best way to integrate a design system into a Vite animation project is to translate design tokens and visual identity rules directly into production-ready CSS and JS, ensuring strict design system adherence throughout the build.

Do I need a heavy frontend framework to create complex scroll choreography?▼

You do not need a heavy frontend framework to create complex scroll choreography, because this Skill bridges design and high-performance implementation using Vite alongside GSAP and Lenis for motion-rich landing pages.

Can I use GSAP ScrollTrigger timelines for responsive layout adaptation?▼

Yes, you can use GSAP ScrollTrigger timelines for responsive layout adaptation, as this Skill targets professional web design workflows requiring both choreographed scroll animations and responsive layout adaptation.

How do I set up optimized asset loading for motion-rich landing pages?▼

You can set up optimized asset loading for motion-rich landing pages by using this Skill to scaffold a Vite project, which natively handles optimized asset loading alongside your GSAP and Lenis implementations.

Related Skills

Explore More Design & Creative Skills→
concept2cureconcept2cure

design-tokens

Generate CSS variable and Tailwind design tokens for light and dark modes.

Community
Advanced
haotoolhaotool
2

vite-react-best-practices

Document Vite and React SPA deployment, caching, and performance rules.

Official
Advanced
ayofemiadeayofemiade

animation-designer

Creates web animations, transitions, and micro-interactions using Framer Motion and CSS.

Community
Intermediate
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Interactive Web Development

Build interactive web experiences with JavaScript frameworks and animation libraries.

Official
Advanced