Split Text Reveal

Типографический reveal для hero-экранов, манифестов, цитат и сильных первых экранов.

Framer MotionStagger

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

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

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

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

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

React component

Split Text Reveal

'use client';

import { motion } from 'framer-motion';

export function SplitTextReveal() {
  return (
    <div>
      {'Split Text Reveal'.split(' ').map((word, index) => (
        <motion.span key={word} initial={{ y: 24, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: index * 0.08 }}>
          {word}{' '}
        </motion.span>
      ))}
    </div>
  );
}