эффекты

Бесконечная лента

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

CSS animationFramer Motion

Подробнее и перенос

Здесь собраны живое демо, prompt для генерации похожего решения и готовый React-сниппет для переноса в HTML embed или кастомный блок Tilda.

Prompt для GPT

Готовая формулировка для генерации похожего эффекта

Создай современную веб-анимацию «Бесконечная лента» для Next.js и React. Нужен эффект: бесконечная медиа-лента с мгновенной сменой направления. Используй CSS animation, Framer Motion, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

React-компонент

Бесконечная лента

'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>
  );
}