ReelKit

https://reelkit.dev
Admin
ReelKit is a framework-agnostic single-item slider for TikTok/Instagram Reels-style experiences with...
Tokens:294,204
Snippets:1,809
Trust Score:7.5
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### controller.observe

Source: https://reelkit.dev/docs/core/guide

Starts gesture, keyboard, and wheel observation.

```APIDOC
## controller.observe

### Description
Starts gesture, keyboard, and wheel observation.

### Method
`observe()`

### Parameters
None.

### Returns
- **void**

### Example
```typescript
controller.observe();
```
```

--------------------------------

### Quick Start - App.vue

Source: https://reelkit.dev/docs/vue-lightbox

Complete example of using LightboxOverlay with v-model:is-open, items, and initial-index. Includes image data and openAt function.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { LightboxOverlay, type LightboxItem } from '@reelkit/vue-lightbox';
import '@reelkit/vue-lightbox/styles.css';

const images: LightboxItem[] = [
  {
    src: '/cdn/samples/images/image-01.jpg',
    title: 'Mountain River',
    description: 'A beautiful mountain river',
  },
  {
    src: '/cdn/samples/images/image-02.jpg',
    title: 'Snowy Peaks',
  },
  {
    src: '/cdn/samples/images/image-03.jpg',
    title: 'Misty Forest',
    description: 'Morning fog over the forest canopy',
  },
  {
    src: '/cdn/samples/images/image-04.jpg',
    title: 'Autumn Trail',
  },
  {
    src: '/cdn/samples/images/image-05.jpg',
    title: 'Ocean Cliff',
    description: 'Dramatic cliffs above the Pacific',
  },
  {
    src: '/cdn/samples/images/image-06.jpg',
    title: 'Desert Dunes',
  },
];

const open = ref(false);
const startIndex = ref(0);

function openAt(i: number) {
  startIndex.value = i;
  open.value = true;
}
</script>

<template>
  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
    <button
      v-for="(img, i) in images"
      :key="img.src"
      style="aspect-ratio:4/3;cursor:pointer"
      @click="openAt(i)"
    >
      <img :src="img.src" style="width:100%;height:100%;object-fit:cover" />
    </button>
  </div>

  <LightboxOverlay
    v-model:is-open="open"
    :items="images"
    :initial-index="startIndex"
  />
</template>
```

--------------------------------

### Programmatic Navigation with ref (Vue)

Source: https://reelkit.dev/docs/getting-started

Vue script setup using a ref to the Reel component typed with ReelExpose, and template buttons calling prev(), next(), and goTo(5).

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Reel, type ReelExpose } from '@reelkit/vue';

const reelRef = ref<InstanceType<typeof Reel> & ReelExpose>();
</script>

<template>
  <Reel ref="reelRef" :count="10" :size="[400, 600]">
    <template #item="{ index }">
      <Slide :index="index" />
    </template>
  </Reel>

  <button @click="reelRef?.prev()">Prev</button>
  <button @click="reelRef?.next()">Next</button>
  <button @click="reelRef?.goTo(5)">Go to 5</button>
</template>
```

--------------------------------

### Install @reelkit/react with yarn

Source: https://reelkit.dev/docs/installation

Install the React framework package using yarn.

```bash
yarn add @reelkit/react
```

--------------------------------

### Install @reelkit/react with npm

Source: https://reelkit.dev/docs/installation

Install the React framework package using npm.

```bash
npm install @reelkit/react
```

--------------------------------

### Install @reelkit/vue with npm

Source: https://reelkit.dev/docs/installation

Install the Vue framework package using npm.

```bash
npm install @reelkit/vue
```

--------------------------------

### Install @reelkit/vue with yarn

Source: https://reelkit.dev/docs/installation

Install the Vue framework package using yarn.

```bash
yarn add @reelkit/vue
```

--------------------------------

### Install @reelkit/vue with pnpm

Source: https://reelkit.dev/docs/installation

Install the Vue framework package using pnpm.

```bash
pnpm add @reelkit/vue
```

--------------------------------

### Install @reelkit/react with pnpm

Source: https://reelkit.dev/docs/installation

Install the React framework package using pnpm.

```bash
pnpm add @reelkit/react
```

--------------------------------

### Install @reelkit/angular with npm

Source: https://reelkit.dev/docs/installation

Install the Angular framework package using npm.

```bash
npm install @reelkit/angular
```

--------------------------------

### Install @reelkit/angular with yarn

Source: https://reelkit.dev/docs/installation

Install the Angular framework package using yarn.

```bash
yarn add @reelkit/angular
```

--------------------------------

### Create Slider Controller with createSliderController

Source: https://reelkit.dev/docs/core/guide

Imports and initializes a slider controller with configuration and callbacks. Attach to a DOM element and start observation.

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

const controller = createSliderController(
  {
    count: 10,
    direction: 'vertical',
    enableWheel: true,
    transitionDuration: 300,
  },
  {
    onAfterChange: (index) => console.log('Changed to:', index),
  }
);

// Attach to DOM element
controller.attach(element);
controller.observe();
```

--------------------------------

### Install @reelkit/angular with pnpm

Source: https://reelkit.dev/docs/installation

Install the Angular framework package using pnpm.

```bash
pnpm add @reelkit/angular
```

--------------------------------

### Install @reelkit/react-stories-player

Source: https://reelkit.dev/docs/stories-player

Install the required packages for the stories player. Use npm to install @reelkit/react-stories-player, @reelkit/react, and lucide-react.

```bash
npm i @reelkit/react-stories-player @reelkit/react lucide-react
```

--------------------------------

### Quick Start: StoriesOverlay and StoriesRingList

Source: https://reelkit.dev/docs/stories-player

Full example of using StoriesOverlay and StoriesRingList with a viewed state controller. Pass an array of StoriesGroup objects and control visibility with isOpen. The viewed controller persists seen state in localStorage.

```tsx
import { useState } from 'react';
import {
  StoriesOverlay,
  StoriesRingList,
  createStoriesViewedStateController,
  type StoriesGroup,
} from '@reelkit/react-stories-player';
import '@reelkit/react-stories-player/styles.css';

const groups: StoriesGroup[] = [
  {
    author: {
      id: 'user-1',
      name: 'Alice',
      avatar: '/cdn/samples/avatars/avatar-06.jpg',
      verified: true,
    },
    stories: [
      {
        id: 's1-1',
        mediaType: 'image',
        src: '/cdn/samples/images/stories/story-001.jpg',
      },
      {
        id: 's1-2',
        mediaType: 'image',
        src: '/cdn/samples/images/stories/story-002.jpg',
      },
      {
        id: 's1-3',
        mediaType: 'image',
        src: '/cdn/samples/images/stories/story-003.jpg',
      },
    ],
  },
  {
    author: {
      id: 'user-2',
      name: 'Bob',
      avatar: '/cdn/samples/avatars/avatar-07.jpg',
    },
    stories: [
      {
        id: 's2-1',
        mediaType: 'image',
        src: '/cdn/samples/images/stories/story-004.jpg',
      },
      {
        id: 's2-2',
        mediaType: 'image',
        src: '/cdn/samples/images/stories/story-005.jpg',
      },
    ],
  },
  {
    author: {
      id: 'user-3',
      name: 'Charlie',
      avatar: '/cdn/samples/avatars/avatar-08.jpg',
      verified: true,
    },
    stories: [
      {
        id: 's3-1',
        mediaType: 'image',
        src: '/cdn/samples/images/stories/story-006.jpg',
      },
    ],
  },
];

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedGroup, setSelectedGroup] = useState(0);
  // What was seen: rings, resume and recording from one controller, kept in
  // localStorage across reloads.
  const [viewed] = useState(() =>
    createStoriesViewedStateController({
      storageKey: 'stories-seen',
      groups: () => groups,
    }),
  );

  const openStories = (groupIndex: number) => {
    setSelectedGroup(groupIndex);
    setIsOpen(true);
  };

  return (
    <div style={{ padding: 16, background: '#0f172a', minHeight: '100vh' }}>
      <StoriesRingList groups={groups} viewed={viewed} onSelect={openStories} />

      <StoriesOverlay
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        groups={groups}
        initialGroupIndex={selectedGroup}
        viewed={viewed}
      />
    </div>
  );
}
```

--------------------------------

### Install @reelkit/react-lightbox with npm

Source: https://reelkit.dev/docs/lightbox

Install the lightbox package along with @reelkit/react and lucide-react for default icons.

```bash
npm install @reelkit/react-lightbox @reelkit/react lucide-react
```

--------------------------------

### Programmatic Navigation with apiReady (Angular)

Source: https://reelkit.dev/docs/getting-started

Angular template using (apiReady) event to capture the ReelApi instance, then calling prev(), next(), and goTo(5) from button clicks.

```html
<rk-reel
  [count]="10"
  [size]="[400, 600]"
  (apiReady)="reelApi = $event"
>
  <ng-template rkReelItem let-index>
    <app-slide [index]="index" />
  </ng-template>
</rk-reel>

<button (click)="reelApi?.prev()">Prev</button>
<button (click)="reelApi?.next()">Next</button>
<button (click)="reelApi?.goTo(5)">Go to 5</button>
```

--------------------------------

### Install @reelkit/react-reel-player

Source: https://reelkit.dev/docs/reel-player

Install the required packages for the Reel Player component. Use npm to install @reelkit/react-reel-player, @reelkit/react, and lucide-react.

```bash
npm install @reelkit/react-reel-player @reelkit/react lucide-react
```

--------------------------------

### Full ReelPlayerPage.tsx example with thumbnail grid and initialIndex

Source: https://reelkit.dev/docs/reel-player

Complete example from ReelPlayerPage.tsx that builds a thumbnail grid, opens the overlay on click, and uses initialIndex to resume from the selected item. Includes multiple content items with mixed media types.

```tsx
import { useState } from 'react';
import { ReelPlayerOverlay, type ContentItem } from '@reelkit/react-reel-player';
import '@reelkit/react-reel-player/styles.css';

const content: ContentItem[] = [
  {
    id: '1',
    media: [{
      id: 'v1',
      type: 'video',
      src: '/cdn/samples/videos/video-01.mp4',
      poster: '/cdn/samples/videos/video-poster-01.jpg',
      aspectRatio: 16 / 9,
    }],
    author: { name: 'Alex Johnson', avatar: '/cdn/samples/avatars/avatar-01.jpg' },
    likes: 1234,
    description: 'Amazing sunset vibes',
  },
  {
    id: '2',
    media: [{
      id: 'img1',
      type: 'image',
      src: '/cdn/samples/images/image-01.jpg',
      aspectRatio: 2 / 3,
    }],
    author: { name: 'Sarah Miller', avatar: '/cdn/samples/avatars/avatar-02.jpg' },
    likes: 5678,
    description: 'Nature at its finest',
  },
  {
    id: '3',
    media: [{
      id: 'v2',
      type: 'video',
      src: '/cdn/samples/videos/video-04.mp4',
      poster: '/cdn/samples/videos/video-poster-04.jpg',
      aspectRatio: 16 / 9,
    }],
    author: { name: 'James Wilson', avatar: '/cdn/samples/avatars/avatar-03.jpg' },
    likes: 3456,
    description: 'City life adventures',
  },
  {
    id: '4',
    media: [
      { id: 'img2', type: 'image', src: '/cdn/samples/images/image-02.jpg', aspectRatio: 2 / 3 },
      { id: 'img3', type: 'image', src: '/cdn/samples/images/image-03.jpg', aspectRatio: 3 / 4 },
    ],
    author: { name: 'Emma Davis', avatar: '/cdn/samples/avatars/avatar-04.jpg' },
    likes: 8901,
    description: 'Travel moments',
  },
  {
    id: '5',
    media: [{
      id: 'img4',
      type: 'image',
      src: '/cdn/samples/images/image-04.jpg',
      aspectRatio: 2 / 3,
    }],
    author: { name: 'Michael Brown', avatar: '/cdn/samples/avatars/avatar-05.jpg' },
    likes: 2345,
    description: 'Golden hour magic',
  },
  {
    id: '6',
    media: [{
      id: 'v3',
      type: 'video',
      src: '/cdn/samples/videos/video-05.mp4',
      poster: '/cdn/samples/videos/video-poster-05.jpg',
      aspectRatio: 16 / 9,
    }],
    author: { name: 'Alex Johnson', avatar: '/cdn/samples/avatars/avatar-01.jpg' },
    likes: 7890,
    description: 'Living the moment',
  },
];

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [initialIndex, setInitialIndex] = useState(0);

  return (
    <div style={{ padding: 16, background: '#0f172a', minHeight: '100vh' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
        {content.map((item, i) => (
          <button
            key={item.id}
            onClick={() => { setInitialIndex(i); setIsOpen(true); }}
            style={{
              position: 'relative', aspectRatio: '9 / 16', borderRadius: 8,
              overflow: 'hidden', border: 'none', padding: 0, cursor: 'pointer',
              background: '#1e293b',
            }}
          >
            <img
              src={item.media[0].poster || item.media[0].src}
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
            />
          </button>
        ))}
      </div>

      <ReelPlayerOverlay
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        content={content}
        initialIndex={initialIndex}
      />
    </div>
  );
}
```

--------------------------------

### Install @reelkit/vue-lightbox with npm

Source: https://reelkit.dev/docs/vue-lightbox

Install the required packages for the Vue Lightbox component.

```bash
npm install @reelkit/vue-lightbox @reelkit/vue lucide-vue-next
```

--------------------------------

### Install @reelkit/stories-core with npm

Source: https://reelkit.dev/docs/stories-core

Install the framework-agnostic stories engine for use in Angular, Vue, or vanilla JS projects.

```bash
npm i @reelkit/stories-core
```

--------------------------------

### controller.next

Source: https://reelkit.dev/docs/core/guide

Navigates to the next slide.

```APIDOC
## controller.next

### Description
Navigates to the next slide.

### Method
`next()`

### Parameters
None.

### Returns
- **void**

### Example
```typescript
controller.next();
```
```

--------------------------------

### controller.prev

Source: https://reelkit.dev/docs/core/guide

Navigates to the previous slide.

```APIDOC
## controller.prev

### Description
Navigates to the previous slide.

### Method
`prev()`

### Parameters
None.

### Returns
- **void**

### Example
```typescript
controller.prev();
```
```

--------------------------------

### Install Vue Reel Player with npm

Source: https://reelkit.dev/docs/vue-reel-player

Install the required packages for the Vue Reel Player: the player itself, the Vue integration, and the icon library.

```bash
npm install @reelkit/vue-reel-player @reelkit/vue lucide-vue-next
```

--------------------------------

### Install Angular Lightbox packages

Source: https://reelkit.dev/docs/angular-lightbox

Install the required npm packages for the Angular lightbox.

```bash
npm install @reelkit/angular-lightbox @reelkit/angular lucide-angular
```

--------------------------------

### Install @reelkit/vue-stories-player

Source: https://reelkit.dev/docs/vue-stories-player

Install the Vue stories player package along with its peer dependencies using npm.

```bash
npm install @reelkit/vue-stories-player @reelkit/vue lucide-vue-next
```

--------------------------------

### Install Angular Reel Player packages

Source: https://reelkit.dev/docs/angular-reel-player

Install the required packages for the Angular Reel Player: @reelkit/angular-reel-player, @reelkit/angular, and lucide-angular.

```bash
npm install @reelkit/angular-reel-player @reelkit/angular lucide-angular
```

--------------------------------

### Install Angular Stories Player with npm

Source: https://reelkit.dev/docs/angular-stories-player

Install the Angular stories player package along with its Angular dependency and lucide-angular for icons.

```bash
npm install @reelkit/angular-stories-player @reelkit/angular lucide-angular
```

--------------------------------

### controller.adjust

Source: https://reelkit.dev/docs/core/guide

Recalculates positions.

```APIDOC
## controller.adjust

### Description
Recalculates positions.

### Method
`adjust()`

### Parameters
None.

### Returns
- **void**

### Example
```typescript
controller.adjust();
```
```

--------------------------------

### Vue vertical slider with Reel component

Source: https://reelkit.dev/docs/getting-started

Minimal Vue 3 script setup component using @reelkit/vue. Imports Reel and ReelIndicator. The template renders a vertical reel with 3 items via a scoped slot, and includes a ReelIndicator.

```vue
<script setup lang="ts">
import { Reel, ReelIndicator } from '@reelkit/vue';

const items = [
  { id: 1, title: 'Slide 1', color: '#6366f1' },
  { id: 2, title: 'Slide 2', color: '#8b5cf6' },
  { id: 3, title: 'Slide 3', color: '#ec4899' },
];
</script>

<template>
  <Reel
    :count="items.length"
    :size="[400, 600]"
    direction="vertical"
    enable-wheel
  >
    <template #item="{ index, size }">
      <div
        :style="{
          width: size[0] + 'px',
          height: size[1] + 'px',
          background: items[index].color,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '2rem',
          color: '#fff',
        }"
      >
        {{ items[index].title }}
      </div>
    </template>

    <ReelIndicator />
  </Reel>
</template>
```

--------------------------------

### ReelIndicator Component

Source: https://reelkit.dev/docs/getting-started

Optional component that displays Instagram-style progress indicators showing the current position in the slider. It is used as a child of the Reel component.

```APIDOC
## ReelIndicator Component

### Description
Optional component that displays Instagram-style progress indicators showing the current position in the slider. It is used as a child of the Reel component.

### Usage
Place inside the Reel component as a child.

### Example (React)
```tsx
<Reel count={items.length} size={[400, 600]} itemBuilder={(index) => <Slide data={items[index]} />}>
  <ReelIndicator />
</Reel>
```

### Example (Angular)
```html
<rk-reel [count]="items.length" [size]="[400, 600]">
  <ng-template rkReelItem let-index>
    <app-slide [data]="items[index]" />
  </ng-template>
  <rk-reel-indicator />
</rk-reel>
```

### Example (Vue)
```vue-html
<Reel :count="items.length" :size="[400, 600]">
  <template #item="{ index }">
    <Slide :data="items[index]" />
  </template>
  <ReelIndicator />
</Reel>
```
```

--------------------------------

### Basic Reel with ReelIndicator (Angular)

Source: https://reelkit.dev/docs/getting-started

Angular template using rk-reel with rkReelItem template and rk-reel-indicator. The ng-template receives the index via let-index.

```html
<rk-reel [count]="items.length" [size]="[400, 600]">
  <ng-template rkReelItem let-index>
    <app-slide [data]="items[index]" />
  </ng-template>
  <rk-reel-indicator />
</rk-reel>
```

--------------------------------

### Basic Reel with ReelIndicator (Vue)

Source: https://reelkit.dev/docs/getting-started

Vue template using Reel with a scoped slot #item that provides the index. Includes ReelIndicator as a child component.

```vue-html
<Reel :count="items.length" :size="[400, 600]">
  <template #item="{ index }">
    <Slide :data="items[index]" />
  </template>
  <ReelIndicator />
</Reel>
```

--------------------------------

### useOverlayUrlState

Source: https://reelkit.dev/docs/vue/api

Builds a URL-state controller for an overlay, which you hand to a `<LightboxUrlOverlay>` as its `:controller` prop. See URL State in the Vue guide for the walkthrough and examples.

```APIDOC
## useOverlayUrlState

### Description
Builds a URL-state controller for an overlay, which you hand to a `<LightboxUrlOverlay>` as its `:controller` prop. See URL State in the Vue guide for the walkthrough and examples.

### Options
| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `param` | `string` | required | Query parameter carrying the active slide, e.g. "photo". |
| `adapter` | `UrlAdapter` | History API | Navigation system to read and write through. Pass a router-backed adapter in a routed app so the router's own location does not go stale. |
| `codec` | `{ decode(raw) => Id | null; encode(id) => string }` | required | Wire format: parameter text ↔ a stable identity, collection-blind. Travels with locator as a matched pair sharing the same Id — spread ...urlIndexKey(() => props.images.length) for the default ?photo=3 index gallery, or supply your own (base64, slug) so a bookmark survives the gallery being reordered. |
| `locator` | `{ locate(id) => number | null; locateAsync?(id) => Promise<number | null>; identify(index) => id }` | required | Maps the identity to a position and owns its own validity: locate (sync), locateAsync (async fallback for a paginated gallery), identify (writes). For a plain index gallery spread ...urlIndexKey(() => props.images.length) — it supplies this locator plus the matching codec and bounds ?photo=3 against the live count, so a stale ?photo=99 heals out of the URL instead of opening a slide that was never named. Pass a getter, not a number, because a Vue setup runs once and a captured length would go stale as a paginated feed grows. A paginated feed or an identity-keyed gallery supplies its own matched codec + locator instead. |
```

--------------------------------

### ReelApi Methods

Source: https://reelkit.dev/docs/getting-started

Programmatic navigation methods exposed via apiRef (React), apiReady event (Angular), or ref (Vue). These methods allow controlling the slider programmatically.

```APIDOC
## ReelApi Methods

### Description
Programmatic navigation methods exposed via apiRef (React), apiReady event (Angular), or ref (Vue). These methods allow controlling the slider programmatically.

### Methods
- `next()` - Navigates to the next slide.
- `prev()` - Navigates to the previous slide.
- `goTo(index)` - Navigates to the slide at the specified index.

### Example (React)
```tsx
import { useRef } from 'react';
import { Reel, type ReelApi } from '@reelkit/react';

function App() {
  const apiRef = useRef<ReelApi>(null);

  return (
    <>
      <Reel
        count={10}
        size={[400, 600]}
        apiRef={apiRef}
        itemBuilder={(index) => <Slide index={index} />}
      />
      <button onClick={() => apiRef.current?.prev()}>Prev</button>
      <button onClick={() => apiRef.current?.next()}>Next</button>
      <button onClick={() => apiRef.current?.goTo(5)}>Go to 5</button>
    </>
  );
}
```

### Example (Angular)
```html
<rk-reel
  [count]="10"
  [size]="[400, 600]"
  (apiReady)="reelApi = $event"
>
  <ng-template rkReelItem let-index>
    <app-slide [index]="index" />
  </ng-template>
</rk-reel>

<button (click)="reelApi?.prev()">Prev</button>
<button (click)="reelApi?.next()">Next</button>
<button (click)="reelApi?.goTo(5)">Go to 5</button>
```

### Example (Vue)
```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Reel, type ReelExpose } from '@reelkit/vue';

const reelRef = ref<InstanceType<typeof Reel> & ReelExpose>();
</script>

<template>
  <Reel ref="reelRef" :count="10" :size="[400, 600]">
    <template #item="{ index }">
      <Slide :index="index" />
    </template>
  </Reel>

  <button @click="reelRef?.prev()">Prev</button>
  <button @click="reelRef?.next()">Next</button>
  <button @click="reelRef?.goTo(5)">Go to 5</button>
</template>
```
```

--------------------------------

### Basic Reel with ReelIndicator (React)

Source: https://reelkit.dev/docs/getting-started

Use the Reel component with itemBuilder to render slides and ReelIndicator for progress indicators. The itemBuilder receives the index and returns slide content, enabling virtualization.

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

function App() {
  return (
    <Reel
      count={items.length}
      size={[400, 600]}
      itemBuilder={(index) => <Slide data={items[index]} />}
    >
      <ReelIndicator />
    </Reel>
  );
}
```

--------------------------------

### Programmatic navigation with template ref

Source: https://reelkit.dev/docs/vue/guide

Use a template ref to access `next()`, `prev()`, and `goTo()` methods for programmatic navigation. The example includes buttons that call these methods on the slider ref.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Reel, type ReelExpose } from '@reelkit/vue';

const sliderRef = ref<ReelExpose | null>(null);
</script>

<template>
  <Reel
    ref="sliderRef"
    :count="10"
    :size="[400, 600]"
  >
    <template #item="{ index, size }">
      <div :style="{ width: size[0] + 'px', height: size[1] + 'px' }">
        Slide {{ index + 1 }}
      </div>
    </template>
  </Reel>

  <button @click="sliderRef?.prev()">Prev</button>
  <button @click="sliderRef?.next()">Next</button>
  <button @click="sliderRef?.goTo(5)">Go to 6</button>
</template>
```

--------------------------------

### LightboxOverlay with transition picker (LightboxPage.tsx)

Source: https://reelkit.dev/docs/lightbox

Full example with multiple images and a transition picker using slideTransition, lightboxFadeTransition, flipTransition, and lightboxZoomTransition. Demonstrates the transitionFn prop and includes a grid of clickable thumbnails.

```tsx
import { useState } from 'react';
import {
  LightboxOverlay,
  flipTransition,
  lightboxFadeTransition,
  lightboxZoomTransition,
  slideTransition,
  type LightboxItem,
} from '@reelkit/react-lightbox';
import type { TransitionTransformFn } from '@reelkit/react';
import '@reelkit/react-lightbox/styles.css';

const images: LightboxItem[] = [
  {
    src: '/cdn/samples/images/image-01.jpg',
    title: 'Mountain River',
    description: 'A beautiful mountain river flowing through the forest',
    width: 1600,
    height: 1000,
  },
  {
    src: '/cdn/samples/images/image-02.jpg',
    title: 'Snowy Peaks',
    description: 'Majestic snow-capped mountains reaching for the sky',
    width: 1000,
    height: 1600,
  },
  {
    src: '/cdn/samples/images/image-03.jpg',
    title: 'Foggy Forest',
    description: 'Misty morning in the dense forest',
    width: 1600,
    height: 900,
  },
  {
    src: '/cdn/samples/images/image-04.jpg',
    title: 'Ocean Waves',
    description: 'Powerful ocean waves crashing against the rocky shore',
    width: 900,
    height: 1400,
  },
  {
    src: '/cdn/samples/images/image-05.jpg',
    title: 'Autumn Path',
    description: 'A winding path through the autumn forest',
    width: 1600,
    height: 1067,
  },
  {
    src: '/cdn/samples/images/image-06.jpg',
    title: 'Coastal Cliffs',
    description: 'Dramatic coastal cliffs overlooking the deep blue sea',
    width: 1600,
    height: 1067,
  },
];

const transitions: { label: string; fn: TransitionTransformFn }[] = [
  { label: 'slide', fn: slideTransition },
  { label: 'fade', fn: lightboxFadeTransition },
  { label: 'flip', fn: flipTransition },
  { label: 'zoom-in', fn: lightboxZoomTransition },
];

export default function App() {
  const [index, setIndex] = useState<number | null>(null);
  const [transitionFn, setTransitionFn] = useState<TransitionTransformFn>(
    () => slideTransition,
  );

  return (
    <div style={{ padding: 16, background: '#f8fafc', minHeight: '100vh' }}>
      {/* Transition picker */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
        {transitions.map((t) => (
          <button
            key={t.label}
            onClick={() => setTransitionFn(() => t.fn)}
            style={{
              padding: '6px 14px', borderRadius: 8, border: 'none', cursor: 'pointer',
              fontSize: 13, fontWeight: 500,
              background: transitionFn === t.fn ? '#6366f1' : '#e2e8f0',
              color: transitionFn === t.fn ? '#fff' : '#334155',
            }}
          >
            {t.label}
          </button>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
        {images.map((img, i) => (
          <button
            key={i}
            onClick={() => setIndex(i)}
            style={{
              position: 'relative', aspectRatio: '4 / 3', borderRadius: 8,
              overflow: 'hidden', border: 'none', padding: 0, cursor: 'pointer',
              background: '#e2e8f0',
            }}
          >
            <img
              src={img.src}
              alt={img.title}
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
            />
          </button>
        ))}
      </div>
      <LightboxOverlay
        isOpen={index !== null}
        images={images}
        initialIndex={index ?? 0}
        onClose={() => setIndex(null)}
        transitionFn={transitionFn}
      />
    </div>
  );
}
```

--------------------------------

### Programmatic Navigation with apiRef (React)

Source: https://reelkit.dev/docs/getting-started

Use apiRef to access ReelApi methods next(), prev(), and goTo() for programmatic navigation. The apiRef is passed to the Reel component and used in button onClick handlers.

```tsx
import { useRef } from 'react';
import { Reel, type ReelApi } from '@reelkit/react';

function App() {
  const apiRef = useRef<ReelApi>(null);

  return (
    <>
      <Reel
        count={10}
        size={[400, 600]}
        apiRef={apiRef}
        itemBuilder={(index) => <Slide index={index} />}
      />
      <button onClick={() => apiRef.current?.prev()}>Prev</button>
      <button onClick={() => apiRef.current?.next()}>Next</button>
      <button onClick={() => apiRef.current?.goTo(5)}>Go to 5</button>
    </>
  );
}
```

--------------------------------

### Reel Component

Source: https://reelkit.dev/docs/getting-started

The Reel component is the main container that manages slider state, handles touch gestures, keyboard navigation, and animations. It uses a render prop pattern via itemBuilder for rendering slides.

```APIDOC
## Reel Component

### Description
The Reel component is the main container that manages slider state, handles touch gestures, keyboard navigation, and animations. It uses a render prop pattern via itemBuilder for rendering slides.

### Props
- `count` (number) - Required - The number of slides.
- `size` (array) - Required - The dimensions of the slider as [width, height].
- `itemBuilder` (function) - Required - A function that receives the index and returns the content for each slide.
- `apiRef` (ref) - Optional - A reference to the Reel API for programmatic navigation.
- `enableWheel` (boolean) - Optional - Enables mouse wheel navigation.

### Example (React)
```tsx
import { Reel, ReelIndicator } from '@reelkit/react';

function App() {
  return (
    <Reel
      count={items.length}
      size={[400, 600]}
      itemBuilder={(index) => <Slide data={items[index]} />}
    >
      <ReelIndicator />
    </Reel>
  );
}
```

### Example (Angular)
```html
<rk-reel [count]="items.length" [size]="[400, 600]">
  <ng-template rkReelItem let-index>
    <app-slide [data]="items[index]" />
  </ng-template>
  <rk-reel-indicator />
</rk-reel>
```

### Example (Vue)
```vue-html
<Reel :count="items.length" :size="[400, 600]">
  <template #item="{ index }">
    <Slide :data="items[index]" />
  </template>
  <ReelIndicator />
</Reel>
```
```

--------------------------------

### Signal system: createSignal, createComputed, reaction

Source: https://reelkit.dev/docs/core/guide

Demonstrates the lightweight signal system: creating a signal, observing changes, updating a value, creating a computed signal with a deps factory, and running side effects with reaction. Includes cleanup via disposer functions.

```typescript
import { createSignal, createComputed, reaction } from '@reelkit/core';

// Create a signal
const count = createSignal(0);

// Observe changes (returns a disposer function)
const dispose = count.observe(() => console.log(count.value));

// Update value
count.value = 5;

// Create computed signal (requires a deps factory)
const doubled = createComputed(() => count.value * 2, () => [count]);

// Run side effects on signal changes
const disposeReaction = reaction(
  () => [count],
  () => console.log('Count changed:', count.value)
);

// Cleanup
dispose();
disposeReaction();
```

--------------------------------

### Event callbacks for slider state tracking

Source: https://reelkit.dev/docs/vue/guide

The `<Reel>` component emits events for tracking slider state: `before-change`, `after-change`, `slide-drag-start`, and `slide-drag-end`. The script setup defines handlers that log transition and drag events.

```vue
<script setup lang="ts">
import { Reel } from '@reelkit/vue';

const onBeforeChange = (index: number, nextIndex: number, rangeIndex: number) => {
  console.log('Transitioning from', index, 'to', nextIndex);
};

const onAfterChange = (index: number, rangeIndex: number) => {
  console.log('Arrived at slide', index);
};

const onSlideDragStart = (index: number) => {
  console.log('Started dragging slide', index);
};

const onSlideDragEnd = (index: number) => {
  console.log('Stopped dragging slide', index);
};
</script>

<template>
  <Reel
    :count="20"
    style="width: 100%; height: 100dvh"
    @before-change="onBeforeChange"
    @after-change="onAfterChange"
    @slide-drag-start="onSlideDragStart"
    @slide-drag-end="onSlideDragEnd"
  >
    <template #item="{ index, size }"> ... </template>
  </Reel>
</template>
```

--------------------------------

### Mock backend data for grid-to-player (./api)

Source: https://reelkit.dev/docs/recipes/grid-to-player

Stands in for your backend: `posts` is the list a profile or search would load, shaped as the player's `ContentItem`, and `thumbnailOf` picks the picture a grid cell shows. Replace `posts` and `thumbnailOf` with your own data. Note that `cdnUrl` builds links to cdn.reelkit.dev, which serves files only to ReelKit sites; in your app those images and videos fail to load, so point `media` and `avatar` at your own files before copying.

```typescript
import { cdnUrl } from '@reelkit/example-data';

// Stands in for your backend: the posts a profile or a search result would
// load. Each one has the shape of `ContentItem` from the reel player of your
// framework, so the list goes to the player as it is.

export interface Post {
  id: string;
  media: {
    id: string;
    type: 'image' | 'video';
    src: string;
    poster?: string;
    aspectRatio: number;
  }[];
  author: { name: string; avatar: string };
  likes: number;
  description: string;
}

const kAuthors = ['Alex Johnson', 'Sarah Miller', 'Mike Chen', 'Emma Davis'];

const pad = (n: number) => String(n).padStart(2, '0');

export const posts: Post[] = Array.from({ length: 12 }, (_, i) => {
  const isVideo = i % 4 === 0;
  const n = (i % (isVideo ? 3 : 9)) + 1;
  return {
    id: `post-${i + 1}`,
    media: [
      isVideo
        ? {
            id: `video-${i + 1}`,
            type: 'video' as const,
            src: cdnUrl(`samples/videos/video-${pad(n)}.mp4`),
            poster: cdnUrl(`samples/videos/video-poster-${pad(n)}.jpg`),
            aspectRatio: 16 / 9,
          }
        : {
            id: `image-${i + 1}`,
            type: 'image' as const,
            src: cdnUrl(`samples/images/image-${pad(n)}.jpg`),
            aspectRatio: 2 / 3,
          },
    ],
    author: {
      name: kAuthors[i % kAuthors.length],
      avatar: cdnUrl(`samples/avatars/avatar-${pad((i % 8) + 1)}.jpg`),
    },
    likes: 120 + i * 37,
    description: `Post ${i + 1}`,
  };
});

/** The picture a grid cell shows: a video's poster, or the image itself. */
export const thumbnailOf = (post: Post) =>
  post.media[0].poster ?? post.media[0].src;
```

--------------------------------

### Basic Slider with Reel and ReelIndicator (App.vue)

Source: https://reelkit.dev/docs/vue/guide

Use the <Reel> component with the #item slot for virtualization. The example sets vertical direction, enables wheel scrolling, and includes a ReelIndicator. The onAfterChange callback logs the current index.

```vue
<script setup lang="ts">
import { Reel, ReelIndicator } from '@reelkit/vue';

const items = [
  { title: 'Virtualized', subtitle: 'Only 3 slides in DOM', color: '#6366f1' },
  { title: 'Touch First', subtitle: 'Native swipe gestures', color: '#8b5cf6' },
  { title: 'Zero Deps', subtitle: 'Tiny bundle size', color: '#7c3aed' },
  { title: 'Keyboard Nav', subtitle: 'Full a11y support', color: '#ec4899' },
  { title: 'SSR Ready', subtitle: 'Works everywhere', color: '#14b8a6' },
  { title: '60fps', subtitle: 'Smooth animations', color: '#f59e0b' },
];

const onAfterChange = (index: number) => {
  console.log('Current index:', index);
};
</script>

<template>
  <Reel
    :count="items.length"
    style="width: 100%; height: 100dvh"
    direction="vertical"
    :enable-wheel="true"
    @after-change="onAfterChange"
  >
    <template #item="{ index, size }">
      <div
        :style="{
          width: size[0] + 'px',
          height: size[1] + 'px',
          background: items[index].color,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          color: '#fff',
        }"
      >
        <div style="font-size: 1.5rem; font-weight: bold">
          {{ items[index].title }}
        </div>
        <div style="font-size: 0.875rem; opacity: 0.8">
          {{ items[index].subtitle }}
        </div>
      </div>
    </template>

    <div style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 10">
      <ReelIndicator direction="vertical" />
    </div>
  </Reel>
</template>
```

--------------------------------

### createTimerController usage

Source: https://reelkit.dev/docs/core/guide

Counts one duration from 0 to 1 and calls back when done. start() always begins from 0, optionally with another duration; pause() and resume() keep the exact position. Observe progress with reaction and clean up with dispose().

```typescript
import { createTimerController, reaction } from '@reelkit/core';

const timer = createTimerController({
  duration: 5000,
  onComplete: () => console.log('Timer finished!'),
});

// Observe progress (0 to 1)
const dispose = reaction(
  () => [timer.progress],
  () => {
    console.log('Progress:', timer.progress.value);
  },
);

// Start with default duration
timer.start();

// Or override duration for a specific story
timer.start(8000);

// Pause/resume preserves exact position
timer.pause();
timer.resume();

// Reset to 0
timer.reset();

// Cleanup
dispose();
timer.dispose();
```

--------------------------------

### useOverlayUrlState with urlIndexKey

Source: https://reelkit.dev/docs/lightbox

Build a URL state controller with useOverlayUrlState and urlIndexKey, then pass it to LightboxUrlOverlay. Opening is a link; the overlay reads the URL and opens itself.

```tsx
import { useOverlayUrlState, urlIndexKey, urlStableIdKey } from '@reelkit/react';
import { LightboxUrlOverlay } from '@reelkit/react-lightbox';
import { Link } from 'react-router-dom';

const photo = useOverlayUrlState({
  param: 'photo',
  ...urlIndexKey(() => images.length),
});

// Opening is a link — the href is the open action. No open flag, no handler:
// the overlay reads the URL and opens itself.
{images.map((image, i) => (
  <Link key={image.src} to={`?photo=${i}`}>
    <img src={image.src} />
  </Link>
))}

<LightboxUrlOverlay controller={photo} images={images} />
```

--------------------------------

### Navigation Methods: goTo, next, prev

Source: https://reelkit.dev/docs/core/guide

Navigate to a specific index with optional animation, or move to next/previous slide.

```typescript
// Go to specific index
controller.goTo(5);           // instant
controller.goTo(5, true);     // animated, returns Promise

// Navigate to next/previous
controller.next();
controller.prev();
```
Tokens:
Raw