パタパタ

パタパタ式の盤面は、値を「表示する」のではなく、値に「たどり着く」装置です。目的の文字までフラップが一枚ずつめくれていく——その間こそが体験のすべて。ptpt はこの待ち時間をコストではなく価値として扱います。文字も画像も同じ Frame という語彙で扱い、Cell は一個のパタパタ、Board は一列の Cell を時間差で動かして、本物のように盤面を波打たせます。framework-agnostic なコアに、極薄のラッパーを重ねる構成です。

中心にあるのは framework-agnostic で依存ゼロのエンジン @love-rox/ptpt-core（gzip 約 3 KB、ESM、styles.css 同梱）。スタックに合わせて好みのアダプタを1つ（または複数）選んでください。core は依存として自動的に引き込まれます。

@love-rox/ptpt-core/styles.css を一度 import すれば、どの盤面もダークなパタパタの見た目で動き出します。幅・高さ・めくる速度・色はすべて .ptpt-cell のカスタムプロパティで調整でき、スタイルシートを使わずにクラスを自分で当てる headless 運用も可能です。

@import "@love-rox/ptpt-core/styles.css";

• ▸Frame（フラップ）は text / image / element のいずれかで、slug で識別します。素の文字列は text フレームに正規化されます。
• ▸Board は1つの role="status" ライブリージョンです。各セルは aria-hidden で、確定した結果だけがスクリーンリーダーに通知されます。
• ▸prefers-reduced-motion に自動連動します。reducedMotion: 'instant' ならアニメーションせず即座に目標へ切り替えます。
• ▸プリセットと delay 関数は tree-shakable なサブパスで提供。数が増えてもバンドルサイズには影響しません。
• ▸preset には素の文字列ではなく PresetDefinition オブジェクトを渡してください。文字列はプリセット名ではなく、フラップの文字列そのものとして解釈されます。

フリップは3枚重ねのハーフセルにかける transform: rotateX() と、動く box-shadow だけで作っています。すべてのモダンブラウザで動く標準 CSS のみ——3D ライブラリも canvas も依存もありません。

5 つのパッケージはバージョン番号を @love-rox/ptpt-core に揃えてリリースしています。「core は 0.3 だけど react は 0.2.5」のような不整合で迷わないよう、どれか一つでも変更があれば他もまとめて同じ番号に上がる運用です。

MIT License。個人・法人問わず自由に利用できます。