Spotlight Stage Slider

Сценический слайдер для портфолио, тарифов и feature-карточек с акцентом на центральный элемент.

Framer MotionFocus states

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

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

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

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

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

React component

Spotlight Stage Slider

'use client';

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

const items = ['Atlas', 'Signal', 'Prism', 'Nova'];

export function SpotlightStageSlider() {
  const [active, setActive] = useState(1);

  return (
    <div className="grid grid-cols-4 gap-4">
      {items.map((item, index) => (
        <motion.button key={item} onClick={() => setActive(index)} animate={{ filter: active === index ? 'brightness(1.1)' : 'brightness(0.55)' }} className="aspect-[4/5] rounded-[20px] bg-neutral-900" />
      ))}
    </div>
  );
}