ReelKit

Slider de um item por vez para experiências no estilo TikTok / Instagram Reels e stories

Independente de framework, virtualizado, pensado para o toque. Feito para feeds de vídeo vertical, visualizadores de stories e galerias em tela cheia.

React

Angular

Vue

Começar Star on GitHub

Virtualized

Only 3 slides in DOM

Demonstração ao vivo — use as setas

Como funciona

Um feed inteiro.
Só três slides.

Seu feed pode ter milhares de itens. O Reel mantém montados apenas o slide atual e os vizinhos imediatos.

1
Deixar o próximo deslize pronto
O slide atual ocupa a tela. Um vizinho espera acima e outro abaixo.
2
Percorrer o feed
Deslize para cima para ir ao próximo item, ou para baixo para voltar ao anterior. Os slides montados se movem juntos.
3
Atualizar só o que mudou
Quando o slide assenta, o item que saiu do intervalo é removido e o novo vizinho é montado. Os que continuam no intervalo ficam onde estão.

Em qualquer uma das pontas de um feed sem laço bastam dois slides. Repare na contagem de montados mudando quando a demonstração chega à borda.

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

Feito para o desempenho

Renderização virtualizada, zero dependências, transições a 60 fps

3no DOM

Virtualizado

Dá conta de mais de 10.000 itens. Apenas 3 slides renderizados por vez.

0dependências

Zero dependências

Nenhuma dependência em tempo de execução. O core tem ~11.2 kB com gzip.

60fps

Toque em primeiro lugar

Gestos de deslize nativos, com inércia e pontos de encaixe.

Alto desempenho

Navegação por teclado

Independente de framework

TypeScript em primeiro lugar

Headless + estilos prontos

Componentes prontos

Estado na URL para compartilhar

Por que “ReelKit”?

Reel — feeds de vídeo vertical como os do Instagram Reels e do TikTok. Um conteúdo por vez, e um deslize leva ao próximo.

Kit — um conjunto modular de pacotes. Use o core headless para ter controle total, os bindings de framework para começar rápido, ou os overlays prontos para players de vídeo e galerias de imagens.

API simples

Algumas linhas de código e está funcionando

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