SHELEG Design — agent skill

A motion + particle interface methodology for building cinematic, scroll-driven landing pages — packaged as an installable agent skill for Cursor and Claude.

Install it into any project with one command:

npx sheleg-design-skill

That drops a SKILL.md + SHELEG_DESIGN.md bundle into your project so your coding agent can discover the skill and build sites on its principles.

What is SHELEG Design?

A page feels alive not from many animations, but from a single source of truth (scroll position) driving many cheap, layered responses that are individually quiet and collectively cinematic. One scroll "clock" feeds a WebGL particle field, a 2D fallback, attention dimming, parallax, scrubbed instruments, and a progress rail — each an independent, degrade-to-calm layer. Nothing crossfades; things redeploy. The result reads as one precision instrument responding to your hand.

It was reverse-engineered from a production landing page (a 14-scene particle narrative that morphs through formations and culminates in a brand "N" that charges and bursts). The skill distills the architecture and the principles so an agent can rebuild that level on a new site.

The five principles

1. One clock. All motion derives from one measured scroll state.
2. Read per frame, notify rarely. Hot consumers read imperatively; only coarse changes hit the framework's render path.
3. Hold, then redeploy. Hold a formation ~80% of a section, then morph in a short, phase-staggered, arc-curved wave. No crossfades.
4. Earned motion. Scrub is for instruments that narrate state over time; entrance motion stays sub-500ms and never gates content.
5. Degrade to calm. Reduced-motion / coarse pointer / no-WebGL collapse to a static, fully-legible page.

Usage

# Auto-detect (.cursor/ or .claude/), default to .cursor/skills/sheleg-design/
npx sheleg-design-skill

# Force a flavor
npx sheleg-design-skill --cursor
npx sheleg-design-skill --claude

# Custom location
npx sheleg-design-skill --dir docs/skills/sheleg-design

# Overwrite an existing install
npx sheleg-design-skill --force

# Help
npx sheleg-design-skill --help

What gets installed

| File | Purpose | |---|---| | SKILL.md | Agent-facing skill: discovery trigger + the principles + how to apply them | | SHELEG_DESIGN.md | The full reference: architecture, layer-by-layer mechanics with code, the exact morph math, the DOM↔WebGL projection bridge, a build-from-scratch recipe, and the "why it works" |

After installing, a Cursor or Claude agent in that project can discover the skill and use it when you ask it to build or upgrade a cinematic, scroll-driven, particle-backed page.

Stack-agnostic

The skill teaches principles and architecture, not a fixed dependency set. The reference implementation happens to use Next.js + React + three / react-three-fiber + GSAP ScrollTrigger + Lenis + Framer Motion, but the method applies to any stack that can render to a canvas/WebGL surface and read scroll.

Zero dependencies

The installer is a single zero-dependency Node script, so npx runs instantly with no install step and no supply-chain surface.

License

MIT © ssheleg