Typing animation

// Typing Animation Component
// React + Tailwind CSS + GSAP

import React, { useState, useEffect, useRef, useMemo } from "react";
import gsap from "gsap";

export function TypingRevealHeadline({
  text = "Design is intelligence made visible.",
  speed = 0.05,
  className = "",
  cursor = true,
  onComplete
}) {
  const containerRef = useRef(null);
  const cursorRef = useRef(null);
  const charsRef = useRef([]);
  charsRef.current = [];

  const splitText = useMemo(() => {
    return text.split("").map((char, index) => ({
      char,
      id: `char-${index}`
    }));
  }, [text]);

  useEffect(() => {
    if (!containerRef.current) return;
    const ctx = gsap.context(() => {
      gsap.set(charsRef.current, { opacity: 0, display: "none" });
      if (cursor && cursorRef.current) gsap.set(cursorRef.current, { opacity: 1 });
      const tl = gsap.timeline({
        onComplete: () => {
          onComplete?.();
          if (cursor && cursorRef.current) {
            gsap.to(cursorRef.current, {
              opacity: 0,
              duration: 0.5,
              repeat: -1,
              yoyo: true,
              ease: "steps(1)"
            });
          }
        }
      });
      tl.to(charsRef.current, {
        display: "inline-block",
        opacity: 1,
        duration: 0,
        stagger: speed
      });
    }, containerRef);
    return () => ctx.revert();
  }, [text, speed, cursor, onComplete]);

  return (
    <h1 ref={containerRef} className={`font-medium tracking-tight ${className}`}>
      {splitText.map((item, index) => (
        <span
          key={item.id}
          ref={(el) => { if (el) charsRef.current[index] = el; }}
          className="inline-block whitespace-pre"
        >
          {item.char}
        </span>
      ))}
      {cursor && (
        <span ref={cursorRef} className="inline-block ml-1 font-light text-current">
          |
        </span>
      )}
    </h1>
  );
}

export default function App() {
  const [key, setKey] = useState(0);
  return (
    <div className="min-h-screen w-full flex items-center justify-center bg-[#F9F9F9] p-8 md:p-20">
      <div className="relative w-full max-w-4xl mx-auto bg-white rounded-3xl p-12 md:p-24 shadow-sm border border-black/5">
        <TypingRevealHeadline
          key={key}
          text="Design is intelligence made visible."
          speed={0.05}
          className="text-4xl md:text-6xl font-medium text-[#1A1A1B]"
        />
        <button
          onClick={() => setKey(k => k + 1)}
          className="mt-8 px-4 py-2 text-xs uppercase tracking-widest bg-gray-100 rounded-full hover:bg-gray-200 transition"
        >
          Rejouer l’animation ↻
        </button>
      </div>
    </div>
  );
}

Superdesign UI · Fichier source du composant. Les imports et dépendances indiqués sont nécessaires à son intégration.