---
name: sebanim8
description: "Premium animation system for web projects — adds smooth scroll (Lenis), GSAP ScrollTrigger section reveals, data-anim attribute-based entry animations, parallax, ambient CSS keyframes, micro-interactions, and accessibility. Use this skill whenever the user asks to add animations to a website, landing page, or web project. Trigger on: 'dodaj animacje', 'animacje na stronę', 'scroll animations', 'parallax', 'sebanim8', 'smooth scroll', 'GSAP animations', 'animuj stronę', 'premium animations', 'dodaj efekty scrollowania', 'animacje wejścia sekcji', 'curtain reveal', 'data-anim', 'lenis scroll', 'dodaj ruch do strony', 'microinteractions', 'hover effects', 'ambient animations'. Also trigger when user mentions adding motion, scroll-driven effects, entry animations, or parallax to an existing HTML/Vue/React project — even if they don't say 'animation' explicitly."
---

# Sebanim8 — Premium Animation System

Add a complete, production-grade animation system to any web project. The system is modular — install what the project needs, skip what it doesn't.

## Before You Start

1. **Identify the project type**: HTML/CSS/JS, Vue 3, React, or other framework.
2. **Check existing dependencies**: Look for existing GSAP, Lenis, or animation libraries already in the project. Don't duplicate.
3. **Ask the user** (only if unclear): Which layers they want — smooth scroll, section reveals, data-anim entries, parallax, ambient effects, micro-interactions, or all of them. Default: **all layers**.

## Architecture Overview

The animation system has 6 independent layers. Each can be used standalone or combined:

| Layer | Library | Purpose |
|-------|---------|---------|
| **Smooth Scroll** | Lenis ^1.3 | Buttery-smooth scrolling with custom easing |
| **Section Reveals** | GSAP ScrollTrigger | Curtain clip-path reveal on scroll |
| **Entry Animations** | GSAP ScrollTrigger | `data-anim` attribute system for element entries |
| **Parallax** | GSAP ScrollTrigger | `data-parallax` depth movement |
| **Ambient Effects** | Pure CSS | Floating, glow, pulse, particles |
| **Micro-interactions** | Pure CSS | Hover states, shimmer, card lifts |

## Installation

### Step 1: Install packages

```bash
# npm
npm install lenis@^1.3 gsap@^3.14

# yarn
yarn add lenis@^1.3 gsap@^3.14
```

For plain HTML projects without a bundler, use CDN (see `references/cdn-setup.md`).

### Step 2: Create animation files

Read `references/implementation.md` for the complete code for each layer. The reference contains ready-to-copy modules for:

- `smooth-scroll.js` — Lenis init + GSAP integration
- `section-reveals.js` — Curtain reveal ScrollTrigger
- `entry-animations.js` — `data-anim` system
- `parallax.js` — `data-parallax` system
- `animations.css` — All CSS keyframes, ambient effects, micro-interactions, accessibility

### Step 3: Integration

**For Vue 3 projects**: Read `references/vue-integration.md` — composable + plugin pattern.

**For React projects**: Read `references/react-integration.md` — hook + provider pattern.

**For plain HTML/JS**: Import modules in your main JS entry point and call init functions after DOM ready.

### Step 4: Apply to HTML

Add attributes to elements:

```html
<!-- Section reveals (automatic on all <section> elements) -->
<section>...</section>

<!-- Entry animations -->
<div data-anim="up">Slides up on scroll</div>
<div data-anim="left" data-delay="0.1">Slides from left, delayed</div>
<h2 data-anim="blur">Blurs in</h2>
<img data-anim="scale" />

<!-- Parallax -->
<div data-parallax="-0.05">Moves slightly against scroll</div>
<img data-parallax="0.08" />
```

### Step 5: Verify

After implementation, check:
- [ ] Smooth scroll works (mouse wheel feels silky)
- [ ] Sections reveal with curtain effect on scroll
- [ ] Elements with `data-anim` animate on first scroll into view
- [ ] Parallax elements shift subtly during scroll
- [ ] Hover effects on buttons and cards
- [ ] `prefers-reduced-motion` disables all animations
- [ ] No horizontal overflow from animated elements
- [ ] Performance: animations use only GPU properties (transform, opacity, clip-path, filter)

## `data-anim` Values Reference

| Value | Effect | From → To |
|-------|--------|-----------|
| `up` | Slide up | translateY(60px) + opacity:0 → normal |
| `down` | Slide down | translateY(-50px) + opacity:0 → normal |
| `left` | Slide from right | translateX(70px) + opacity:0 → normal |
| `right` | Slide from left | translateX(-70px) + opacity:0 → normal |
| `scale` | Scale in | scale(0.8) + opacity:0 → normal |
| `pop` | Bounce pop | scale(0.75) + rotate(-2deg) + translateY(40px) → normal |
| `blur` | Blur in from above | blur(18px) + translateY(-30px) + scale(0.95) → normal |
| `clip` | Clip reveal from bottom | clip-path inset(100% 0 0 0) → inset(0) |
| `wipe` | Clip reveal from left | clip-path inset(0 100% 0 0) → inset(0) |

**Stagger**: Add `data-delay="0.08"` (in seconds) for sequential timing.

## `data-parallax` Reference

Value range: `-0.12` to `0.1`. Negative = moves opposite to scroll, positive = moves with scroll. Distance = speed × 350px.

## Animation Philosophy (follow these rules)

- **GPU only**: Use transform, opacity, clip-path, filter. Never animate width, height, top, left, margin, padding.
- **Stagger**: 0.05–0.12s between sibling elements.
- **Entry animations fire once** (`once: true`). Ambient loops run infinitely.
- **Durations**: micro-interactions 0.2–0.3s, entries 0.5–1.1s, ambient 4–16s.
- **Easing**: `--spring: cubic-bezier(0.16, 1, 0.3, 1)` for interactions, `power3.out` for entries.
- **Accessibility**: Always include `@media (prefers-reduced-motion: reduce)` that kills all motion.

## Overlay/Modal Integration

If the project has modals or overlays, integrate with Lenis:
- On open: `lenis.stop()`, animate modal with clip-path curtain (0.72s) + content rise (0.55s, delay 0.46s)
- On close: reverse curtain (0.52s) + fade, then `lenis.start()`

## Troubleshooting

| Problem | Fix |
|---------|-----|
| Scroll feels janky | Check Lenis `duration` and `smoothWheel: true`. Make sure GSAP ticker integration is set up. |
| Elements flash before animating | Set initial CSS: `[data-anim] { opacity: 0; }` in your stylesheet. |
| Animations don't fire | Verify ScrollTrigger is registered: `gsap.registerPlugin(ScrollTrigger)` |
| Horizontal scrollbar appears | Add `overflow-x: hidden` on sections with animated elements. |
| Parallax too aggressive | Reduce `data-parallax` value. Keep between -0.05 and 0.05 for subtlety. |
| Modal scroll bleeds through | Ensure `lenis.stop()` is called before modal open animation starts. |

## Files in This Skill

```
sebanim8/
├── SKILL.md                          ← You are here
└── references/
    ├── implementation.md             ← Full code for all 6 layers
    ├── vue-integration.md            ← Vue 3 composable + plugin
    ├── react-integration.md          ← React hook + provider
    └── cdn-setup.md                  ← CDN-only setup (no bundler)
```

**Always read `references/implementation.md` first** — it has the complete, copy-ready code for every layer.