Film Strip Slider

Хорошо работает для галерей, лукбуков и серийных карточек, где нужен монтажный ритм.

React stateThumbnail navigation

Готовый сниппет для переноса

У каждой демки есть React-компонент, который можно скопировать и адаптировать под HTML embed или кастомный блок в Tilda. Библиотека собрана Luneka Lab как showroom motion-подходов для клиентских сайтов.

Написать нам Работать с нами

Назад в библиотеку

Загрузка сцены

React component

Film Strip Slider

'use client';

import { useState } from 'react';

const frames = ['A', 'B', 'C', 'D'];

export function FilmStripSlider() {
  const [active, setActive] = useState(0);

  return (
    <div>
      <div>{frames[active]}</div>
      <div>{frames.map((frame, index) => <button key={frame} onClick={() => setActive(index)}>{frame}</button>)}</div>
    </div>
  );
}