Infinite Marquee

Подходит для логотипов, кадров, постеров и текстурных лупов с кликом на разворот движения.

CSS animationFramer Motion

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

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

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

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

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

React component

Infinite Marquee

'use client';

import { useState } from 'react';

export function InfiniteMarquee() {
  const [reverse, setReverse] = useState(false);

  return (
    <button onClick={() => setReverse((value) => !value)} className="overflow-hidden rounded-[24px] border border-white/10">
      <div className={reverse ? 'animate-[marquee_18s_linear_infinite_reverse]' : 'animate-[marquee_18s_linear_infinite]'}>
        {'POSTER LOOP '.repeat(16)}
      </div>
    </button>
  );
}