'/%3e%3c!--%20Motion%20trails%20--%3e%3crect%20x='14'%20y='7'%20width='12'%20height='2'%20rx='1'%20fill='white'%20opacity='.2'/%3e%3crect%20x='12'%20y='12'%20width='16'%20height='2'%20rx='1'%20fill='white'%20opacity='.35'/%3e%3crect%20x='10'%20y='17'%20width='20'%20height='2.5'%20rx='1.25'%20fill='white'%20opacity='.5'/%3e%3c!--%20Bold%20chevron%20down%20--%3e%3cpath%20d='M10%2024%20L20%2034%20L30%2024'%20stroke='white'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20fill='none'/%3e%3c/svg%3e)
ReelKit
TikTok／Instagram Reels 風の体験のための、1 アイテムずつ表示するスライダー
フレームワークに依存せず、仮想化され、タッチを優先します。縦型の動画フィード、ストーリービューアー、フルスク リーンのギャラリーのために作られています。
React
Angular
Vue
ライブデモ — 矢印で操作できます
パフォーマンスのための設計
仮想化された描画、依存関係ゼロ、60 fps のトランジション
3DOM 内
仮想化
10,000 件を超えるアイテムを扱えます。描画されるスライドは常に 3 枚だけです。
0依存関係
依存関係ゼロ
実行時の依存関係はありません。コアは gzip 後で約 10.1 kB です。
60fps
タッチ優先
慣性とスナップポイントのある、ネイティブなスワイプジェスチャー。
高いパフォーマンス
キーボード操作
フレームワークに依存しない
TypeScript ファースト
ヘッドレス + スタイル付き
すぐ使えるコンポーネント
共有できる URL の状態
なぜ「ReelKit」？
Reel — Instagram Reels や TikTok のような縦型の動画フィード。一度に 1 つのコンテンツを表示し、スワイプで次へ進みます。
Kit — モジュール式のパッケージのセット。すべてを制御したいならヘッドレスのコアを、すばやく始めたいならフレームワークのバインディングを、動画プレイヤーや画像ギャラリーにはすぐ使えるオーバーレイを使えます。
シンプルな API
数行のコードで動き始めます
tsx
利用できるパッケージ
モジュール式のエコシステム — 必要なものだけを選べます