@reelkit/core

The engine behind ReelKit — handles slider logic, gesture recognition, and transitions without depending on any UI framework. Ships its own signal-based reactive system so you don't need RxJS or similar.

Installation

npm install @reelkit/core

Quick Start

import { createSliderController } from '@reelkit/core';

const slider = createSliderController({
  count: 100,
  direction: 'vertical',
});

// Navigate
slider.next();
slider.prev();
slider.goTo(5);

// Read state via signals
console.log(slider.currentIndex.value); // 5

// Subscribe to changes
slider.currentIndex.subscribe((index) => {
  console.log('Slide changed:', index);
});

Features

• Renders only 3 slides at a time (virtualized), handles 10,000+ items
• Zero dependencies, ~10.2 kB gzip
• Factory functions over classes — createSliderController, createGestureController, createKeyboardController, createWheelController
• Built-in Signal, ComputedSignal, and reaction primitives for reactive state
• Touch gestures with momentum and configurable thresholds — tap, double-tap and long press on the same recognizer
• Keyboard and wheel navigation with debouncing
• Infinite loop mode
• Optional ResizeObserver-based auto-sizing
• Transitions — slideTransition, fadeTransition, flipTransition, cubeTransition, zoomTransition; only the one you import ships
• URL state — createUrlStateController with index, stable-id and two-axis keys, so a link reopens a slide
• Viewed state — createViewedStateController over local, session or memory storage, with expiry and a cap
• Media — content preloading, a shared <video> element for iOS sound continuity, sound and playback-timeline controllers
• Fullscreen, body-scroll lock, focus trap and focus return for overlays
• Strict TypeScript throughout

Documentation

Guide at reelkit.dev/docs/core/guide, full API reference at reelkit.dev/docs/core/api.

Support

If ReelKit saved you some time, a star on GitHub would mean a lot — it's a small thing, but it really helps the project get noticed.

License

MIT