Orbit Thumbnail Slider

Слайдер для премиальных коллекций и hero-блоков, где превью образуют орбиту вокруг центральной сцены.

Framer MotionPolar layout

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

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

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

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

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

React component

Orbit Thumbnail Slider

'use client';

import { motion } from 'framer-motion';
import { useState } from 'react';

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

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

  return (
    <div className="relative h-80 rounded-[28px] border border-white/10">
      {cards.map((card, index) => (
        <motion.button key={card} onClick={() => setActive(index)} animate={{ scale: active === index ? 1.05 : 0.9 }} className="absolute left-1/2 top-1/2 h-16 w-16 rounded-full bg-neutral-800" />
      ))}
    </div>
  );
}