Animated terminal

import { useEffect, useState } from 'react';
import { useReducedMotion } from 'motion/react';

type Line = { type: 'command' | 'output'; text: string };

const SCRIPT: Line[] = [
  {
    type: 'command',
    text: 'npm create vite@latest my-app -- --template react-ts'
  },
  { type: 'output', text: 'Scaffolding project in ./my-app...' },
  { type: 'output', text: 'Done.' },
  { type: 'command', text: 'cd my-app && npm install' },
  { type: 'output', text: 'added 192 packages in 6s' },
  { type: 'command', text: 'npm run dev' },
  { type: 'output', text: '➜  Local:   http://localhost:5173/' }
];
const TYPE_MS = 50; // per character of a command
const OUTPUT_MS = 120; // per output line
const HOLD_MS = 4000; // finished screen, before it starts over

export function AnimatedTerminal() {
  const reduceMotion = useReducedMotion();
  // How many lines are done, and how many characters of the next one are typed.
  const [{ line, chars }, setStep] = useState({ line: 0, chars: 0 });
  const current = SCRIPT[line];

  useEffect(() => {
    if (reduceMotion) return;
    const typing = current?.type === 'command' && chars < current.text.length;
    const delay = !current ? HOLD_MS : typing ? TYPE_MS : OUTPUT_MS;
    const id = setTimeout(() => {
      if (!current) setStep({ line: 0, chars: 0 });
      else if (typing) setStep({ line, chars: chars + 1 });
      else setStep({ line: line + 1, chars: 0 });
    }, delay);
    return () => clearTimeout(id);
  }, [reduceMotion, current, line, chars]);

  const shown = reduceMotion ? SCRIPT.length : line;

  return (
    <div className='w-[560px] overflow-hidden rounded-xl bg-neutral-950 font-mono text-sm text-neutral-200 shadow-xl'>
      <div
        aria-hidden='true'
        className='flex gap-1.5 px-4 py-3 *:size-3 *:rounded-full *:bg-neutral-700'
      >
        <i />
        <i />
        <i />
      </div>
      {/* Screen readers get the whole transcript at once. */}
      <p className='sr-only'>{SCRIPT.map((step) => step.text).join('\n')}</p>
      <div
        aria-hidden='true'
        className='min-h-56 px-4 pb-4 leading-6 whitespace-pre-wrap'
      >
        {SCRIPT.slice(0, shown).map((step, i) => (
          <div
            key={i}
            className={step.type === 'output' ? 'text-neutral-400' : ''}
          >
            {step.type === 'command' && (
              <span className='text-green-400'>$ </span>
            )}
            {step.text}
          </div>
        ))}
        {current?.type === 'command' && !reduceMotion && (
          <div>
            <span className='text-green-400'>$ </span>
            {current.text.slice(0, chars)}
            <span className='animate-pulse'>▋</span>
          </div>
        )}
      </div>
    </div>
  );
}