Text Scramble

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

React effectsTypography motion

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

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

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

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

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

React component

Text Scramble

'use client';

import { useEffect, useState } from 'react';

const target = 'TEXT SCRAMBLE';
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

export function TextScramble() {
  const [display, setDisplay] = useState(target);

  useEffect(() => {
    let iteration = 0;
    const timer = window.setInterval(() => {
      setDisplay(target.split('').map((character, index) => index < iteration ? target[index] : alphabet[Math.floor(Math.random() * alphabet.length)]).join(''));
      iteration += 1 / 2;
      if (iteration >= target.length) window.clearInterval(timer);
    }, 40);
    return () => window.clearInterval(timer);
  }, []);

  return <div>{display}</div>;
}