What’s inside

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

Drifting Marks Hero

When to use

• Your landing-page hero is a headline floating on a flat background and visitors scroll past it without stopping
• You want motion on the hero but not a video, a carousel, or anything that slows the page down
• You need a hero that feels hand-made and alive — ink strokes, brush marks, paint trails — without looking like a screensaver
• You are redesigning a hero and want one distinctive visual idea instead of another stock gradient
• You need hero motion that respects reduced-motion settings and still looks good when motion is off

Workflow

1. Write the hero message (input: page goal → output: hero message)
   Before any motion, settle the static hero: one headline (the outcome for the visitor), one subline (who it's for + how it works, one sentence), and one call to action. The marks are decoration; if the hero doesn't work as plain text on a plain background, no amount of drifting ink will save it.
2. Design the marks (input: hero message → output: marks set)
   Design 3–5 drifting marks as simple vector shapes: a long brush stroke, a curved ink trail, a dotted spray, a soft blob, a thin calligraphy sweep. Keep them abstract — no words, no logos, no recognizable objects. Give them one ink color (plus one accent at most) and vary their sizes so some sit deep in the background and one or two drift near the headline. Fewer, larger marks read as confident; many small ones read as noise.
3. Choreograph the drift (input: marks set → output: motion spec)
   Give each mark a slow, looping drift: gentle horizontal or diagonal movement, a slow rotation, and a subtle fade in and out at the loop points so the motion never jumps. Keep speeds slow (a full drift takes 12–25 seconds), keep movement within a small range (the mark should never cross the headline and block it), and stagger the loops so marks never all move in sync. The headline and button never move — only the marks drift.
4. Build for performance and access (input: motion spec → output: built hero)
   Build the marks as lightweight vector shapes or CSS, not video or heavy images. Animate only transform and opacity (the properties browsers can move cheaply), cap the number of animated marks, and pause all motion when the hero is off screen. Respect reduced-motion settings: when a visitor prefers reduced motion, show the marks frozen in a composed still frame — the hero must look designed, not broken, with motion off.

Template preview

Drifting Marks Hero — Design Template

The headline is the hero; the marks are the atmosphere. Marks drift, text stays still.

Hero message

Headline (outcome): {headline} Subline (who + how, one sentence): {subline} Call to action: {button text} → {destination}

Static check: does this hero work as plain text on a plain background? If not, fix the message before adding marks.

Marks set (3–5 abstract marks)

Colors: ink {color} + accent {color or none} Rules: no words, no logos, no recognizable objects. Marks sit behind the text layer, always.

Motion spec (per mark)

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