判断を、ファイルと一緒に残す。
レイヤーや要素に紐づけて意思決定の経緯と却下案を保存。後から「なぜこの色にしたか」を遡れる。
Make decisions visible.
レイヤーごと・タイムラインごとに「なぜそうしたか」を残すデザイン・オペレーションズの基盤。週次の判断が記録され、過去まで遡れる。
MOTION
FEATURES
— SCROLL TO REVEAL変更の物語が、線で読める。
スナップショット・コメント・承認を時系列に並べる。チームで合意した瞬間が、いつでも巻き戻せる。
意図を、開発者にそのまま渡す。
Figma / Notion / GitHub に決定とその理由を同期。実装側は「最終の意図」を 1 か所で受け取る。
SHIP WHAT YOU MEANT.
作ったものではなく、決めたものを届ける。
使い方
— USAGE↑ ヒーローで FLIP / DROP / SCATTER / WAVE を切り替えると、見出しに同じデータでも全く違うブランドの気配を持たせられる。下に下りると features セクションが drop で、帯が wave で組み上がる。SaaS / プロダクトサイトのキネティック・タイポの実用例。
01
2 ファイルをコピー
style.css / script.js を移植先へ。外部依存ゼロ。
02
文字 or 単語で分解
data-split＝1文字ずつ、data-split="word"＝単語ごと。長い本文は word、見出しは char にすると読みやすい。
03
4 つのモードを切替
祖先要素に .mode-flip / drop / scatter / wave を付けるだけ。data-mode-picker 内のボタンが自動で切替＋再生する。
モーションモード（祖先クラス）
.mode-flip下から rotateX 起き上がり（既定、しっかり）flip.mode-drop上から落下 + rotateX（潔い）drop.mode-scatterランダム方向から集まる（賑やか）scatter.mode-wave下からふわっとオーバーシュート（柔らかい）waveCSS 変数
--ls-dur1 単位のアニメ時間700ms--ls-staggerスタガー42ms--ls-easeイージングcubic-bezier(.2,.8,.2,1)--ls-rise立ち上がる距離1em