# CSS Native

Zero-dependency animations and visual techniques - scroll-driven, View Transitions...

- Repository: https://github.com/AThevon/genjutsu (721 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add AThevon/genjutsu --skill css-native -g -a claude-code -y`
Codex: `npx skills add AThevon/genjutsu --skill css-native -g -a codex -y`
Cursor: `npx skills add AThevon/genjutsu --skill css-native -g -a cursor -y`
Gemini CLI: `npx skills add AThevon/genjutsu --skill css-native -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add AThevon/genjutsu`

## Description

Zero-dependency animations and visual techniques - scroll-driven, View Transitions, @starting-style, modern CSS.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

> **Version-sensitive.** Every API name, SDK gate and browser-support claim below was
> verified on **2026-09-08** against primary sources. What against, and when, is in
> `_jutsu/VERSIONS.md`. If that date is old, re-verify before acting on a version number.

# CSS Native - Zero-Dependency Animations & Visual Techniques

## When to Use CSS Native vs Library

| Situation | Decision |
|---|---|
| < 3 animations on the page | CSS native |
| Scroll-driven reveal/parallax | CSS native (`animation-timeline`), always inside `@supports (animation-timeline: scroll())` with the content visible by default - Firefox only since 159 (Oct 2026), Safari only since 26 |
| Enter/exit from `display: none` | CSS native (`@starting-style` + `transition-behavior: allow-discrete`) |
| Tooltip/popover positioning | CSS native (anchor positioning) |
| Page transitions (MPA or SPA) | CSS native (View Transitions API) |
| Complex multi-step timeline (5+ tweens) | GSAP |
| Stagger across dynamic list (unknown count) | CSS native (`animation-delay: calc(sibling-index() * 60ms)`), Baseline since Aug 2026. Reach for a library only if the stagger has to be interrupted or re-sequenced at runtime |
| Physics-based spring with interruption | Framer Motion |
| Morph between SVG shapes | GSAP MorphSVG |

Rule of thumb: if you can express it in a `@keyframes` + one `animation-timeline`, stay in CSS. The moment you need imperative control, sequence coordination, or runtime values - reach for a library.

---

## Scroll-Driven Animations

### Scroll Progress Timeline

Animate based on scroll position of a container.

```css
.progress-bar {
  animation: grow-width linear both;
  animation-timeline: scroll(root block);
}

@keyframes grow-width {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
```

- `scroll(<scroller> <axis>)` - scroller: `nearest` | `root` | `self`, axis: `block` | `inline` | `x` | `y`
- Default: `scroll(nearest block)`

### View Progress Timeline

The rest: https://github.com/AThevon/genjutsu/blob/HEAD/skills/_jutsu/css-native/SKILL.md