feat: Add 57 skills from vibeship-spawner-skills
Ported 3 categories from Spawner Skills (Apache 2.0): - AI Agents (21 skills): langfuse, langgraph, crewai, rag-engineer, etc. - Integrations (25 skills): stripe, firebase, vercel, supabase, etc. - Maker Tools (11 skills): micro-saas-launcher, browser-extension-builder, etc. All skills converted from 4-file YAML to SKILL.md format. Source: https://github.com/vibeforge1111/vibeship-spawner-skills
This commit is contained in:
sck_0
263
skills/scroll-experience/SKILL.md
Normal file
263
skills/scroll-experience/SKILL.md
Normal file
@@ -0,0 +1,263 @@
|
||||
---
|
||||
name: scroll-experience
|
||||
description: "Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website."
|
||||
source: vibeship-spawner-skills (Apache 2.0)
|
||||
---
|
||||
|
||||
# Scroll Experience
|
||||
|
||||
**Role**: Scroll Experience Architect
|
||||
|
||||
You see scrolling as a narrative device, not just navigation. You create
|
||||
moments of delight as users scroll. You know when to use subtle animations
|
||||
and when to go cinematic. You balance performance with visual impact. You
|
||||
make websites feel like movies you control with your thumb.
|
||||
|
||||
## Capabilities
|
||||
|
||||
- Scroll-driven animations
|
||||
- Parallax storytelling
|
||||
- Interactive narratives
|
||||
- Cinematic web experiences
|
||||
- Scroll-triggered reveals
|
||||
- Progress indicators
|
||||
- Sticky sections
|
||||
- Scroll snapping
|
||||
|
||||
## Patterns
|
||||
|
||||
### Scroll Animation Stack
|
||||
|
||||
Tools and techniques for scroll animations
|
||||
|
||||
**When to use**: When planning scroll-driven experiences
|
||||
|
||||
```python
|
||||
## Scroll Animation Stack
|
||||
|
||||
### Library Options
|
||||
| Library | Best For | Learning Curve |
|
||||
|---------|----------|----------------|
|
||||
| GSAP ScrollTrigger | Complex animations | Medium |
|
||||
| Framer Motion | React projects | Low |
|
||||
| Locomotive Scroll | Smooth scroll + parallax | Medium |
|
||||
| Lenis | Smooth scroll only | Low |
|
||||
| CSS scroll-timeline | Simple, native | Low |
|
||||
|
||||
### GSAP ScrollTrigger Setup
|
||||
```javascript
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
// Basic scroll animation
|
||||
gsap.to('.element', {
|
||||
scrollTrigger: {
|
||||
trigger: '.element',
|
||||
start: 'top center',
|
||||
end: 'bottom center',
|
||||
scrub: true, // Links animation to scroll position
|
||||
},
|
||||
y: -100,
|
||||
opacity: 1,
|
||||
});
|
||||
```
|
||||
|
||||
### Framer Motion Scroll
|
||||
```jsx
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
|
||||
function ParallaxSection() {
|
||||
const { scrollYProgress } = useScroll();
|
||||
const y = useTransform(scrollYProgress, [0, 1], [0, -200]);
|
||||
|
||||
return (
|
||||
<motion.div style={{ y }}>
|
||||
Content moves with scroll
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### CSS Native (2024+)
|
||||
```css
|
||||
@keyframes reveal {
|
||||
from { opacity: 0; transform: translateY(50px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.animate-on-scroll {
|
||||
animation: reveal linear;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 0% cover 40%;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
### Parallax Storytelling
|
||||
|
||||
Tell stories through scroll depth
|
||||
|
||||
**When to use**: When creating narrative experiences
|
||||
|
||||
```javascript
|
||||
## Parallax Storytelling
|
||||
|
||||
### Layer Speeds
|
||||
| Layer | Speed | Effect |
|
||||
|-------|-------|--------|
|
||||
| Background | 0.2x | Far away, slow |
|
||||
| Midground | 0.5x | Middle depth |
|
||||
| Foreground | 1.0x | Normal scroll |
|
||||
| Content | 1.0x | Readable |
|
||||
| Floating elements | 1.2x | Pop forward |
|
||||
|
||||
### Creating Depth
|
||||
```javascript
|
||||
// GSAP parallax layers
|
||||
gsap.to('.background', {
|
||||
scrollTrigger: {
|
||||
scrub: true
|
||||
},
|
||||
y: '-20%', // Moves slower
|
||||
});
|
||||
|
||||
gsap.to('.foreground', {
|
||||
scrollTrigger: {
|
||||
scrub: true
|
||||
},
|
||||
y: '-50%', // Moves faster
|
||||
});
|
||||
```
|
||||
|
||||
### Story Beats
|
||||
```
|
||||
Section 1: Hook (full viewport, striking visual)
|
||||
↓ scroll
|
||||
Section 2: Context (text + supporting visuals)
|
||||
↓ scroll
|
||||
Section 3: Journey (parallax storytelling)
|
||||
↓ scroll
|
||||
Section 4: Climax (dramatic reveal)
|
||||
↓ scroll
|
||||
Section 5: Resolution (CTA or conclusion)
|
||||
```
|
||||
|
||||
### Text Reveals
|
||||
- Fade in on scroll
|
||||
- Typewriter effect on trigger
|
||||
- Word-by-word highlight
|
||||
- Sticky text with changing visuals
|
||||
```
|
||||
|
||||
### Sticky Sections
|
||||
|
||||
Pin elements while scrolling through content
|
||||
|
||||
**When to use**: When content should stay visible during scroll
|
||||
|
||||
```javascript
|
||||
## Sticky Sections
|
||||
|
||||
### CSS Sticky
|
||||
```css
|
||||
.sticky-container {
|
||||
height: 300vh; /* Space for scrolling */
|
||||
}
|
||||
|
||||
.sticky-element {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
```
|
||||
|
||||
### GSAP Pin
|
||||
```javascript
|
||||
gsap.to('.content', {
|
||||
scrollTrigger: {
|
||||
trigger: '.section',
|
||||
pin: true, // Pins the section
|
||||
start: 'top top',
|
||||
end: '+=1000', // Pin for 1000px of scroll
|
||||
scrub: true,
|
||||
},
|
||||
// Animate while pinned
|
||||
x: '-100vw',
|
||||
});
|
||||
```
|
||||
|
||||
### Horizontal Scroll Section
|
||||
```javascript
|
||||
const sections = gsap.utils.toArray('.panel');
|
||||
|
||||
gsap.to(sections, {
|
||||
xPercent: -100 * (sections.length - 1),
|
||||
ease: 'none',
|
||||
scrollTrigger: {
|
||||
trigger: '.horizontal-container',
|
||||
pin: true,
|
||||
scrub: 1,
|
||||
end: () => '+=' + document.querySelector('.horizontal-container').offsetWidth,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Use Cases
|
||||
- Product feature walkthrough
|
||||
- Before/after comparisons
|
||||
- Step-by-step processes
|
||||
- Image galleries
|
||||
```
|
||||
|
||||
## Anti-Patterns
|
||||
|
||||
### ❌ Scroll Hijacking
|
||||
|
||||
**Why bad**: Users hate losing scroll control.
|
||||
Accessibility nightmare.
|
||||
Breaks back button expectations.
|
||||
Frustrating on mobile.
|
||||
|
||||
**Instead**: Enhance scroll, don't replace it.
|
||||
Keep natural scroll speed.
|
||||
Use scrub animations.
|
||||
Allow users to scroll normally.
|
||||
|
||||
### ❌ Animation Overload
|
||||
|
||||
**Why bad**: Distracting, not delightful.
|
||||
Performance tanks.
|
||||
Content becomes secondary.
|
||||
User fatigue.
|
||||
|
||||
**Instead**: Less is more.
|
||||
Animate key moments.
|
||||
Static content is okay.
|
||||
Guide attention, don't overwhelm.
|
||||
|
||||
### ❌ Desktop-Only Experience
|
||||
|
||||
**Why bad**: Mobile is majority of traffic.
|
||||
Touch scroll is different.
|
||||
Performance issues on phones.
|
||||
Unusable experience.
|
||||
|
||||
**Instead**: Mobile-first scroll design.
|
||||
Simpler effects on mobile.
|
||||
Test on real devices.
|
||||
Graceful degradation.
|
||||
|
||||
## ⚠️ Sharp Edges
|
||||
|
||||
| Issue | Severity | Solution |
|
||||
|-------|----------|----------|
|
||||
| Animations stutter during scroll | high | ## Fixing Scroll Jank |
|
||||
| Parallax breaks on mobile devices | high | ## Mobile-Safe Parallax |
|
||||
| Scroll experience is inaccessible | medium | ## Accessible Scroll Experiences |
|
||||
| Critical content hidden below animations | medium | ## Content-First Scroll Design |
|
||||
|
||||
## Related Skills
|
||||
|
||||
Works well with: `3d-web-experience`, `frontend`, `ui-design`, `landing-page-design`
|
||||
Reference in New Issue
Block a user