Was ist enthalten

Eine SKILL.md (die Anleitung) + eine Startvorlage. Eine Vorschau:

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.
4. Make it kind to every visitor (input: working hero → output: accessible hero)
   Respect prefers-reduced-motion: show the static hero, no animation, no exceptions. Cap the particle count and turn off pointer interaction on small screens and low-power devices; a hero that stutters on a phone is worse than no hero. Keep the canvas aria-hidden and non-interactive for keyboard users — it is decoration, and it must never trap focus or intercept clicks meant for the call to action. Add a fallback: if canvas is unavailable or the script fails, the static hero from step 1 is simply what renders, with no error and no blank space.
5. Tune and ship (input: accessible hero → output: shipped hero)
   Measure: the hero must not add more than a small fraction to the page's load, must hold 60fps on a mid-range phone (or gracefully drop its particle count until it does), and must not delay the headline's paint. Test with the pointer, with touch, with a keyboard, with reduced motion on, and with JavaScript disabled. Watch one real person use it: if they notice the particles before the headline, thin the field; if they never notice the particles, that is fine — atmosphere is supposed to be felt, not studied. Ship with a one-line comment in the code recording the particle cap and the reduced-motion behavior, so the next developer keeps both.

Vorschau der Startvorlage

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}

Das Skill-Paket selbst (SKILL.md + Vorlage) ist auf Englisch verfasst.

Das komplette Skill-Paket kaufen — $4.99 Pro — alle 511 Skills