描く線の軌跡
ポインタが動いた軌跡が発光するリボンになり、時間とともに尾を引いて消えていく。PCはホバーで常時描け、スマホは触れている間だけ setPointerCapture で追従して描ける。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- ポートフォリオ・遊び心のあるトップ
- 描く体験を主役にした演出面
- 全画面に敷く軌跡エフェクト
- 避ける場面
- 本文・フォームの上（操作の邪魔）
- 常時全画面で重ねる業務画面
- 明るい配色（lighter 合成の発光が見えない）
- 構成要素
- 暗い面（canvas）
- 発光するリボン
- 操作ヒント
- 持っている状態
- 通常
- キーボード
マウス・タッチ専用（なぞって描く）。装飾で代替操作は不要
- 支援技術
canvas は aria-hidden の装飾。reduce 設定では尾の寿命を 620→260ms に短縮し、消えたら描画を止める。全画面に敷くときは下の操作を妨げない配置に
- 動き
軌跡点は 620ms で消え、太さ 8px から速度と経過で細る。色相 225±40 で lighter 合成。追従は即時
デザインの要点
- 太さは 8px×残り寿命 − 速度で細らせる。速く動かすと細く鋭く、止めると太く溜まる筆の感触になる
- 線分ごとに lineCap round で描き lighter で重ねる。1本の path にすると古い部分の透明度を変えられない
- 色相は時刻の sin で 225±40 を漂わせる。固定色は蛍光ペン、乱数は虹色のノイズになる
- PC はホバーだけで描け、タッチは押している間だけ追従する。タッチで常時描くとスクロールと衝突する
実装メモ
実ページで全画面に敷く場合は canvas を position:fixed; inset:0; z-index を高くして使うと、他要素の上をなぞる軌跡として機能します（この見本はプレビュー枠内完結のため canvas は静的配置）。
コード（コピーして使えます）
<div class="tr-wrap">
<canvas class="tr-canvas" aria-hidden="true"></canvas>
<p class="tr-hint">なぞって軌跡を描く</p>
</div>