フィードバックと操作 · タップへの反応
グレアの走り高光扫过
- 質感
- 反応
- 抑制的
ポインタが入ると斜めの光が走り、ポインタ付近がわずかに明るくなります。レイアウトも色も変えず、表面に反射があると伝えます。
使いどころ
もともと質感があり、「これは面である」と伝えたいカードに向きます。商品カード、会員カード、画像カードなどです。文字だけのカードや文章量の多いカードには使わないでください。光の帯が読むのを邪魔します。また繰り返し続けないでください。1 回の掃引はポインタが入ってきたことへの応答です。常時掃引は飾りになります。帯は細く、斜めにしてください。まっすぐで幅いっぱいの帯は「読み込み中」に見えます。
パラメータ
78px slanted band · 760ms sweep cubic-bezier(0.3, 0, 0.2, 1) · skewX −16° · 150px pointer spot, 150ms follow
レシピ
グレアの走り → 760ms cubic-bezier(0.3, 0, 0.2, 1)グレアの走り → 78px slanted band · 760ms sweep cubic-bezier(0.3, 0, 0.2, 1) · skewX −16° · 150px pointer spot, 150ms follow
AI に渡す一文
グレアの走りを作ってください。カードの上に幅 78px、16 度傾いた光の帯（両端が透明、中央が白 62% の linear-gradient）を重ね、ポインタがカードに入った瞬間に左から右へ 760ms で掃引します。両端には少しイージングをかけます。同時に、ポインタを中心とした 150px の放射状の光点をもう 1 層重ね、150ms の一次遅れでフェードイン・アウトさせ、位置はポインタに追随させます。光点と光の帯には pointer-events: none を付け、カードには overflow: hidden を付けて光をカード内に切ります。ポインタがカードの上にない間は 2.2 秒ごとに自動で掃引し、「ここで止まってよい」という手がかりにします。