Annnimate（GSAPアニメーション集）

黒のヘッダー左に、Annnimate と by Good Folks を置く。Library が白く残り、Kits の肩に New が付く。右端は Login と、白い Get Annnimate。中央の見出しは GSAP animations, every framework. の二行で、その下は React と Vue、GSAP の上に載る部品だという説明が細く終わる。下段は同じ幅のカードが四枚。Zoom Through Text は巨大な an、Paragraph Indent は本文の横に赤い丸、Scribble Highlighter は long season の下線、Rotating Words は薄い語が縦に重なる。見本の下端は、左にオレンジの四角と Studio Original、右に New や Free。カードの外は、左に題、右に scroll。

この画面を残しているのは、動きの見本を文にせず、同じ寸法のカードに戻しているからだ。プレビューが先で、出典は Studio Original か annnimate.com、種別は scroll、section、shader、ui-component、menu、experimental と右下に揃う。Free と New はオレンジの小さな札のまま、列を崩さない。Fog Reveal から Wipe Slider まで、写真の多いカードも同じ枠だ。画面の下には 115 matching と、カテゴリ、インタラクション、Free、検索が細いバーで固定され、スクロールのあいだも絞りが残る。終端ではカードが傾いて散らばり、Take the component you'd have built yourself. を中央の二行にする。ボタンはオレンジの Get Annnimate と、グレーの Browse the library。地は薄いグレーに落ち、Library shipping weekly と Platform、Library、Kits を同じ細さの列に戻す。flenteが画面を組むときも、動く見本は同じカードに揃え、名前と種別は決まった位置に置き、誘う文は一箇所に残す。