Terminal Type Loop

Полезно для dev-сайтов, SaaS-витрин, AI-интерфейсов и технологичных hero-секций.

React effectsTypewriter loop

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

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

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

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

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

React component

Terminal Type Loop

'use client';

import { useEffect, useState } from 'react';

const words = ['npm run showroom', 'deploy --motion stable'];

export function TerminalTypeLoop() {
  const [index, setIndex] = useState(0);
  const [typed, setTyped] = useState('');

  useEffect(() => {
    const target = words[index];
    let position = 0;

    const timer = window.setInterval(() => {
      position += 1;
      setTyped(target.slice(0, position));
      if (position >= target.length) {
        window.clearInterval(timer);
        window.setTimeout(() => {
          setTyped('');
          setIndex((value) => (value + 1) % words.length);
        }, 900);
      }
    }, 28);

    return () => window.clearInterval(timer);
  }, [index]);

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