Card Stack Cycle
カードサイクル
Generation Prompt
【対象要素】 - 積み重なったカード・通知のスタック表示に適用する 【演出内容】 - 一番手前のカードが下へ抜けて消え、後ろのカードが順に前へ繰り上がる、を繰り返す 【品質要件】 - 抜けるカードが完全に消えてから繰り上がりを完了させる - 後ろのカードは少し小さく・薄くして重なりを表現する - ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる - prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する
[Target] - A stack of cards or notifications [Motion] - The front card drops away and the cards behind promote forward, forever [Quality] - Finish the drop before completing the promotion - Rear cards slightly smaller and fainter to show depth - Make the loop seamless: the end state must match the start state exactly - With prefers-reduced-motion, stop the animation and show a static finished state
Prompts and demo code are free to use in your own projects. See About.