Drifting Marks Hero
生きているようなヒーロー——インクの跡が漂い、見出しはそのまま。
見出しの背後でゆっくりと漂うインクと筆の跡を持つランディングページのヒーローをデザインします。抽象的なマークのセット、穏やかなループモーションの仕様、そしてモーション軽減とパフォーマンスへの配慮を最初から組み込みます。
3ステップでインストール
登録不要。CLIツールも不要です。お使いのAIを選んで、1行コピーして貼るだけです。
ご自分で入れたい場合は、スキルを購入（$4.99）し、購入完了画面からZIPをダウンロードして、上のディレクトリに展開し、AIのセッションを再起動してください。結果は同じです。すでに購入済みの場合は、AIアシスタントにダウンロードしてもらうこともできます。
パックの内容
SKILL.md（手順書）1点とスターターテンプレート1点が入っています。プレビューはこちらです：
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
- 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. - 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. - 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. - 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. - Test on real screens (input: built hero → output: verified hero)
Open the hero on a phone, a laptop, and a large monitor. Check: does the headline stay readable while marks drift behind it, does the page stay smooth while scrolling, does the reduced-motion still frame look deliberate, does the hero load fast on a slow connection. Fix what you find — a hero that stutters or hides its own headline is worse than a static one.
テンプレートのプレビュー
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)
スキルパック本体（SKILL.md とテンプレート）は英語で書かれています。
