ReelKit

Slider de un solo elemento para experiencias al estilo de TikTok / Instagram Reels

Independiente del framework, virtualizado y pensado para el tacto. Hecho para feeds verticales de vídeo, visores de stories y galerías a pantalla completa.

React

Angular

Vue

Empezar Star on GitHub

Virtualized

Only 3 slides in DOM

Demo en vivo: usa las flechas

Cómo funciona

Un feed entero.
Solo tres slides.

Tu feed puede tener miles de elementos. Reel mantiene montados únicamente el slide actual y sus vecinos inmediatos.

1
Tener listo el siguiente deslizamiento
El slide actual ocupa la pantalla. Un vecino espera arriba y otro abajo.
2
Recorrer el feed
Desliza hacia arriba para ir al siguiente elemento, o hacia abajo para volver al anterior. Los slides montados se mueven juntos.
3
Actualizar solo lo que cambió
Cuando el slide se asienta, el elemento que salió del rango se desmonta y se monta el nuevo vecino. Los que siguen dentro se quedan donde estaban.

En cualquiera de los dos extremos de un feed sin bucle bastan dos slides. Mira cómo cambia el número de montados cuando la demo llega al borde.

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

Pensado para el rendimiento

Renderizado virtualizado, sin dependencias, transiciones a 60 fps

3en el DOM

Virtualizado

Admite más de 10.000 elementos. Solo se renderizan 3 slides a la vez.

0dependencias

Sin dependencias

Ninguna dependencia en tiempo de ejecución. El core ocupa ~11.2 kB con gzip.

60fps

Táctil ante todo

Gestos de deslizamiento nativos con inercia y puntos de ajuste.

Alto rendimiento

Navegación con teclado

Independiente del framework

TypeScript ante todo

Headless + con estilos

Componentes listos para usar

Estado en la URL compartible

¿Por qué «ReelKit»?

Reel — feeds verticales de vídeo como los de Instagram Reels y TikTok. Un contenido cada vez; desliza para pasar al siguiente.

Kit — un conjunto modular de paquetes. Usa el core headless para tener control total, los bindings de framework para empezar rápido o los overlays listos para usar para reproductores de vídeo y galerías de imágenes.

API sencilla

Empieza con unas pocas líneas de código

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>
  );
}