claude-copilot: Skill for Claude Code

Premium Interaction Craft

Elite interaction patterns used by top agencies (AKQA, Huge, Fantasy) to create interactions that feel alive, responsive, and intentional.

Purpose

• Provide production-ready patterns for scroll choreography, spring physics, and micro-timing
• Define the timing scales used by elite design teams
• Give concrete implementation references for text reveals, magnetic elements, and page transitions
• Identify anti-patterns that signal amateur animation work

---

1. Scroll-Driven Choreography

GSAP ScrollTrigger pattern:

gsap.to(element, {
  scrollTrigger: {
    trigger: element,
    start: "top 80%",
    end: "bottom 20%",
    scrub: 0.5,  // 0.5 = half-second catch-up lag (organic feel)
    pin: true,   // locks element during scroll-linked animation
    pinSpacing: true  // adds spacing to prevent content jump
  },
  y: -100,
  opacity: 1
});

Staggered reveals:

• Delay per element: 0.1s
• Y-translation: 30px (subtle, not dramatic)
• Easing: power2.out
• Trigger: when element enters 80% from top of viewport

CSS scroll-timeline (progressive enhancement):

@supports (animation-timeline: scroll()) {
  .reveal {
    animation: fade-up linear;
    animation-timeline: scroll();
    animation-range: entry 0% entry 30%;
  }
}
/* GSAP fallback for unsupported browsers */

Scroll-linked opacity: Element fades 0→1 as it traverses the viewport center. Use scrub: true for perfect 1:1 tracking.

Section-based narrative: Each viewport-height section = one story beat. Pin for scroll-locked transitions between beats.

---

2. Spring Physics for Organic Motion

When to use springs vs duration:

• ALWAYS use springs for user-initiated interactions: drag, swipe, toggle, pull-to-refresh
• Use duration for system animations: loading states, auto-transitions, scheduled sequences

Spring config profiles:

Profile	Tension	Friction	Mass	Feel
Snappy	300	20	1	Quick, responsive
Smooth	170	26	1	Standard, balanced
Gentle	120	14	1	Soft, floating
Heavy	170	26	3	Weighty, deliberate
Bouncy	200	10	1	Playful, elastic