What’s inside

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

Magnetic Lattice Hero

When to use

• Your landing page hero is a static headline over a flat background, and the product is interactive, networked, or spatial — the hero should feel like the product
• You need motion that responds to the visitor rather than looping behind them — something that rewards moving the mouse instead of ignoring it
• Your hero must work on touch devices too, where there is no cursor — the lattice needs a touch behavior, not a broken one
• A previous interactive hero was a performance problem: it janked on laptops, drained phone batteries, or failed accessibility checks
• You want one hero that degrades gracefully — full interaction on capable devices, calm static art everywhere else

Workflow

1. Define the lattice (input: brand + page message → output: lattice spec)
   Specify the field: node count range for desktop and mobile, spacing (a loose grid with jitter, never a rigid matrix), link rule (nodes connect to neighbors within a radius, with a maximum links per node), and the visual language (node size, link opacity, one accent color for nodes near the cursor). The lattice must read as texture at rest — quiet, even, and behind the headline — so its resting state should be calm enough to sit behind type. If the resting state competes with the headline, reduce node count or link opacity until it doesn't; the headline is the hero, the lattice is the stage.
2. Specify the magnetism (input: lattice spec → output: interaction spec)
   Define exactly how the field responds: nodes within a radius of the cursor are pulled toward it by a force that falls off with distance, and ease back to their home positions when the cursor leaves. Specify the numbers — attraction radius, pull strength, return speed, and a cap on how far any node may drift from home (so the field never tears). Add the second behavior: on click or tap, a ripple pushes nodes outward from the point, then the field settles. Write the touch rule explicitly: on touch devices the lattice follows the finger while touching and settles on release — it never requires a hover that doesn't exist.
3. Place the headline on the field (input: interaction spec + copy → output: hero layout)
   Lay out the hero so the lattice and the headline cooperate: the headline and CTA sit in a clear zone, and the lattice stays visually behind them — either through a calm density in the headline zone or a soft scrim that keeps text contrast steady while nodes move behind it. The CTA button must never sit on top of moving nodes without a solid fill; a ghost button over a moving field is unreadable. Specify the headline zone as a region where node drift is damped, so words never appear to wobble as nodes pass behind them.

Template preview

Magnetic Lattice Hero — Build Template

One field, one headline. The headline is the hero; the lattice is the stage.

Lattice spec

Resting state check: calm enough to sit behind type? [ ]

Interaction spec

• Attraction radius: {px} | Pull strength: {falls off with distance}
• Return speed: {ease back to home} | Max drift from home: {px — field never tears}
• Click / tap ripple: {pushes nodes outward from point, then settles}
• Touch rule: {follows finger while touching, settles on release — never hover-only}

Hero layout

• Headline zone: {region, node drift damped inside it}
• Headline: {one line} | Subline: {one line}

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