ReelKit

Ein-Element-Slider für Erlebnisse wie TikTok / Instagram Reels

Framework-unabhängig, virtualisiert und für Touch gebaut. Gemacht für vertikale Video-Feeds, Story-Viewer und Galerien im Vollbild.

React

Angular

Vue

Loslegen Star on GitHub

Virtualized

Only 3 slides in DOM

Live-Demo: nutze die Pfeiltasten

So funktioniert es

Ein ganzer Feed.
Nur drei Slides.

Dein Feed kann Tausende Elemente haben. Reel hält nur den aktuellen Slide und seine direkten Nachbarn gemountet.

1
Den nächsten Swipe bereithalten
Der aktuelle Slide füllt den Bildschirm. Ein Nachbar wartet darüber, einer darunter.
2
Durch den Feed bewegen
Wische nach oben zum nächsten Element oder nach unten zurück zum vorherigen. Die gemounteten Slides bewegen sich gemeinsam.
3
Nur aktualisieren, was sich geändert hat
Sobald der Slide zur Ruhe kommt, wird das Element außerhalb des Bereichs entfernt und der neue Nachbar gemountet. Alles, was im Bereich bleibt, bleibt an seinem Platz.

An beiden Enden eines Feeds ohne Schleife reichen zwei Slides. Achte darauf, wie sich die Zahl der gemounteten Slides ändert, wenn die Demo den Rand erreicht.

9 items in the feed3 mounted

VIEWPORT

PreviousOffscreen

CurrentVisible

NextOffscreen

Slide 3 of 9

In the DOM: 2, 3, 4

Expanded view · Neighbors are hidden in the actual slider

Für Performance gebaut

Virtualisiertes Rendering, keine Abhängigkeiten, Übergänge in 60 fps

3im DOM

Virtualisiert

Kommt mit mehr als 10.000 Elementen zurecht. Es werden immer nur 3 Slides gerendert.

0Abhängigkeiten

Keine Abhängigkeiten

Keine Abhängigkeiten zur Laufzeit. Der Core ist mit gzip ~11.2 kB groß.

60fps

Touch zuerst

Native Wischgesten mit Schwung und Einrastpunkten.

Hohe Performance

Tastaturnavigation

Framework-unabhängig

TypeScript zuerst

Headless + gestylt

Fertige Komponenten

Teilbarer URL-State

Warum „ReelKit“?

Reel — vertikale Video-Feeds wie Instagram Reels und TikTok. Ein Inhalt auf einmal; wische weiter zum nächsten.

Kit — ein modularer Satz von Paketen. Nutze den headless Core für volle Kontrolle, die Framework-Bindings für einen schnellen Start oder die fertigen Overlays für Videoplayer und Bildergalerien.

Einfache API

Starte mit wenigen Zeilen Code

tsx

import { Reel, ReelIndicator } from '@reelkit/react';

const items = ['Slide 1', 'Slide 2', 'Slide 3'];

function App() {
  return (
    <Reel
      count={items.length}
      size={[400, 600]}
      itemBuilder={(index) => (
        <div className="slide">{items[index]}</div>
      )}
    >
      <ReelIndicator />
    </Reel>
  );
}