Ticker Flip Board

Работает для слоганов, статусов, новостных маркеров и коротких brand-message модулей.

Framer MotionText transitions

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

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

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

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

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

React component

Ticker Flip Board

'use client';

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

const words = ['SIGNAL', 'MOTION', 'DISPLAY'];

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

  useEffect(() => {
    const timer = window.setInterval(() => setIndex((value) => (value + 1) % words.length), 1600);
    return () => window.clearInterval(timer);
  }, []);

  return <AnimatePresence mode="wait"><motion.div key={words[index]}>{words[index]}</motion.div></AnimatePresence>;
}