Ribbon Wave Slider

Плавный ленточный слайдер для витрин, подборок кейсов и визуальных линеек с мягкой волной по оси Y.

Framer MotionLoop motion

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

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

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

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

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

React component

Ribbon Wave Slider

'use client';

import { motion } from 'framer-motion';

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

export function RibbonWaveSlider() {
  return (
    <div className="flex gap-4 overflow-hidden rounded-[28px] border border-white/10 p-4">
      {cards.map((card, index) => (
        <motion.div key={card} animate={{ y: [0, index % 2 === 0 ? -10 : 10, 0] }} transition={{ duration: 2, repeat: Infinity, delay: index * 0.08 }} className="h-48 w-40 rounded-[20px] bg-neutral-900" />
      ))}
    </div>
  );
}