Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
A guide for building visually exceptional websites with scroll-triggered animations, custom interactions, and distinctive aesthetics. Covers animation libraries, text effects, custom cursors, page transitions, and 3D techniques. Includes performance targets and accessibility requirements for production-ready work.
Consolidates animation patterns, visual techniques, and performance targets from GSAP, Framer Motion, Three.js, and other libraries into one reference instead of piecing together separate documentation.
When to use it
- Building a portfolio site that needs to stand out from competitors
- Creating an agency showcase with animated scroll-driven sections
- Launching a product page with cinematic storytelling
- Adding magnetic buttons and custom cursors to a brand site
- Implementing smooth page transitions between routes in a React app
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Build a hero section with scroll-triggered text reveal and a custom cursor
- 1Sets up smooth scrolling with Lenis
- 2Splits hero headline into characters using SplitType
- 3Animates characters with GSAP stagger tied to ScrollTrigger
- 4Implements a lagging follower cursor with lerp inside requestAnimationFrame
- 5Adds context-aware cursor state on interactive elements
Hero section with character-by-character text reveal on scroll and a custom cursor that morphs on hover