слайдеры
Built by Luneka Lab digital agency

Fade Slider

Мягкий fade-слайдер для постеров, портретов и продуктовых кадров, который легко встраивается в промо-блоки.

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

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

Написать намРаботать с нами
Назад в библиотеку
Загрузка сцены
React component

Fade Slider

'use client';

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

const slides = ['Aurora', 'Monolith', 'Glass', 'Signal'];

export function FadeSlider() {
  const [index, setIndex] = useState(0);

  return (
    <div className="relative overflow-hidden rounded-[28px] border border-white/10 bg-black p-4">
      <AnimatePresence mode="wait">
        <motion.div
          key={index}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="aspect-[16/10] rounded-[20px] bg-neutral-900"
        >
          {slides[index]}
        </motion.div>
      </AnimatePresence>
      <div className="mt-4 flex gap-2">
        <button onClick={() => setIndex((index - 1 + slides.length) % slides.length)}>Prev</button>
        <button onClick={() => setIndex((index + 1) % slides.length)}>Next</button>
      </div>
    </div>
  );
}