What’s inside

One SKILL.md (the playbook) + one starter template. A preview:

Particle Field Hero

When to use

• A product, studio, or event site needs a hero that feels alive without a video file or a heavy animation library
• A landing page whose headline deserves motion, but whose load time still matters
• A brand with a "network / constellation / swarm" idea that a particle field can express literally
• A developer portfolio or docs site that wants one memorable interactive moment above the fold
• Any hero where the animation must work on phones, respect reduced-motion settings, and fail silently

Workflow

1. Write the hero without the animation (input: product facts → output: static hero)
   Build the complete hero first as if the particle field did not exist: headline, one-line subhead, primary call to action, and optionally a secondary link. The static hero must be fully convincing on its own, because a meaningful share of visitors will see exactly that — reduced-motion users, slow devices, and everyone whose browser blocks canvas. Set the headline in real text over a solid or gradient background with enough contrast to read comfortably. If the hero is boring without particles, fix the words, not the animation.
2. Design the field's behavior (input: static hero + brand idea → output: behavior spec)
   Specify the field in plain language before writing code: how many particles (a count that scales with viewport area, capped at a low ceiling), how they move (slow drift plus gentle attraction to the pointer, or a constellation that links nearby particles with faint lines), and what they do near the headline (thin out, never cover the text). Choose one particle color with an opacity range, not a rainbow — the field is atmosphere, not confetti. Decide the interaction: pointer attraction or repulsion, click burst or nothing, and a "calm" state the field returns to when the pointer leaves.
3. Build it in one small canvas layer (input: behavior spec → output: working hero)
   Implement the field as a single positioned behind the hero content, sized to the hero with devicePixelRatio capped at 2, animated with requestAnimationFrame. Keep the whole implementation in one small script (well under 200 lines) with no dependencies. Use a single animation loop, precomputed particle objects, and no per-frame allocations that would churn the garbage collector. Pause the loop when the hero scrolls out of view (IntersectionObserver) and when the tab is hidden — an animation nobody sees should not burn battery.

Template preview

Particle Field Hero — Template

Build the static hero first. The particle field is garnish, not the meal.

Static hero (must convince with NO animation)

Headline: {one line} Subhead: {one line} Primary CTA: {label → link} Secondary link (optional): {label → link} Background: {solid / gradient, high contrast with text}

Behavior spec

• Particle count rule: {scales with viewport area, capped at {n}}
• Motion model: {slow drift / constellation links between nearby particles / other}
• Particle color: {one color + opacity range}
• Pointer interaction: {attract / repel / none}
• Click behavior: {burst / nothing}

Buy the full skill pack — $4.99 Pro — all 471 skills