学習2: 既存ブロックを解剖してパターンを読む

[na-navi]

概要

registry/blocks/ の既存ブロック（52個）から代表的なものを数個ピックアップし、HTML + registry-item.json の構造を解剖する。

ピックアップ候補

ブロック	理由
instagram-follow	シンプルな UI アニメーション。入門に最適
data-chart	データ可視化。実用的
glitch	VFX 系。Three.js 無しの CSS エフェクト
chromatic-radial-split	トランジション系。shader transitions の入り口
transitions-blur	トランジションの基本パターン

確認ポイント

• data-composition-id と window.__timelines["id"] の対応
• class="clip" と data-start, data-duration, data-track-index
• gsap.timeline({ paused: true }) の使い方
• 要素 ID のプレフィックス規則
• registry-item.json の type, dimensions, duration, files の意味

学習メモ

test/勉強用ドキュメント/ にまとめる。

完了条件

• 3個以上のブロックを解剖
• 共通パターン（テンプレート化できる部分）を抽出
• blocks と components の違いを説明できる