Center Mode Carousel

Паттерн для витрин, feature-линеек и премиальных слайдеров с сильным акцентом на текущий элемент.

Framer MotionScale choreography

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

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

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

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

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

React component

Center Mode Carousel

'use client';

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

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

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

  return slides.map((slide, index) => (
    <motion.button key={slide} onClick={() => setActive(index)} animate={{ scale: index === active ? 1 : 0.82, opacity: index === active ? 1 : 0.42 }}>
      {slide}
    </motion.button>
  ));
}