Palabra que se enfoca

"use client";

import { useEffect, useRef, useState, type CSSProperties } from "react";

/** Palabra que se enfoca desde el desenfoque y cambia de una frase a otra, como una lente que busca el punto. Se pausa fuera de pantalla. React + TypeScript, sin dependencias. */
export type TextoEnfoqueProps = {
  prefix?: string;
  words?: string[];
  interval?: number;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gctef-root { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .3em; max-width: 100%; color: var(--gctef-fg, #e9ecf2); font: 600 clamp(28px, 6vw, 60px)/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.03em; }
.gctef-root *, .gctef-root *::before, .gctef-root *::after { box-sizing: border-box; }
.gctef-slot { position: relative; display: inline-grid; }
.gctef-word { grid-area: 1 / 1; color: var(--gctef-hi, #6fb1ff); animation: gctef-in 1s cubic-bezier(.16, 1, .3, 1) both; white-space: nowrap; }
.gctef-sizer { grid-area: 1 / 1; visibility: hidden; height: 0; overflow: hidden; white-space: nowrap; }
@keyframes gctef-in { from { filter: blur(14px); opacity: 0; letter-spacing: .25em; transform: scale(1.06); } to { filter: blur(0); opacity: 1; letter-spacing: inherit; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gctef-word { animation: none; } }`;

export function TextoEnfoque({ prefix = "Software para", words = ["ordenar", "automatizar", "conectar", "escalar"], interval = 2600, className = "", style }: TextoEnfoqueProps) {
  const ref = useRef<HTMLSpanElement>(null);
  const [i, setI] = useState(0);
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting), { threshold: 0.1 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  useEffect(() => {
    if (!visible || words.length < 2 || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const id = window.setInterval(() => {
      if (!document.hidden) setI((value) => (value + 1) % words.length);
    }, interval);
    return () => window.clearInterval(id);
  }, [visible, words.length, interval]);

  return (
    <span ref={ref} className={`gctef-root ${className}`} style={style}>
      <style>{CSS}</style>
      <span>{prefix}</span>
      <span className="gctef-slot">
        {words.map((word) => (
          <span key={word} className="gctef-sizer" aria-hidden="true">
            {word}
          </span>
        ))}
        <span key={i} className="gctef-word" aria-label={words[i]}>
          {words[i]}
        </span>
      </span>
    </span>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/texto-enfoque

import { TextoEnfoque } from "./texto-enfoque";

export default function Ejemplo() {
  return <TextoEnfoque prefix="Ejemplo" />;
}