NUVORIQ

DEMO EN DIRECTO
Pasa el cursor sobre la vista previa para volver a dibujar el contorno. Muévelo sobre las letras para revelar el color. En pantallas táctiles, toca o arrastra.
DEMO INTERACTIVA / 01
Tipografía que te sigue.

Mueve el punto sobre las letras para revelar el verde lima de NUVORIQ. Prueba la animación SVG y copia el prompt para crear tu propia versión.
VER PROMPT
Añade únicamente la animación SVG de texto suministrada a mi pie de página actual. Conserva su estructura, espaciado, enlaces, datos de contacto, colores y comportamiento adaptable. No añadas ni sustituyas el pie de página completo.

Usa la grabación como referencia visual. El contorno de la palabra grande debe dibujarse en unos cuatro segundos, mientras un degradado radial suave sigue al ratón sobre las letras. El texto base permanece visible cuando el cursor sale.

Implementación:
- Usa React, TypeScript y Motion. Reutiliza la estructura y las dependencias existentes; añade motion solo si falta.
- Integra el componente de abajo en el pie de página existente. Pasa el nombre de la marca mediante text: <TextHoverEffect text="TU MARCA" />.
- Conserva las capas SVG, svgRef, el cálculo del cursor, maskPosition, motion.radialGradient, revealMask, textMask y la animación de strokeDashoffset/strokeDasharray. No los sustituyas por un encabezado HTML o un color CSS al pasar el ratón.
- Mantén el área radial de aproximadamente el 20% y el seguimiento suave. Usa identificadores SVG únicos en cada instancia.
- El ejemplo utiliza el contorno blanco cálido y una revelación verde lima (#C8FF4D) con un pequeño punto que sigue al ratón. Oculta el cursor nativo solo sobre el SVG interactivo.
- Respeta prefers-reduced-motion, evita efectos de ratón en pantallas táctiles y mantén el texto adaptable sin recortes ni desbordamiento horizontal.
- No añadas el pie de página de demostración, marcas de ejemplo, enlaces adicionales, datos de contacto, iconos sociales, imágenes de archivo ni enlaces provisionales.
- Corrige los errores de TypeScript e integración y comprueba el dibujo del contorno y el efecto que sigue al cursor.

Componente:

```tsx
'use client';

import { useId, useRef, useState, type PointerEvent } from 'react';
import { motion, useReducedMotion } from 'motion/react';

type TextHoverEffectProps = {
  text: string;
  duration?: number;
  className?: string;
  label?: string;
};

export function TextHoverEffect({
  text,
  duration = 0.25,
  className,
  label,
}: TextHoverEffectProps) {
  const svgRef = useRef<SVGSVGElement>(null);
  const [hovered, setHovered] = useState(false);
  const [mousePointer, setMousePointer] = useState(false);
  const [maskPosition, setMaskPosition] = useState({ cx: '50%', cy: '50%' });
  const reducedMotion = useReducedMotion();
  const id = useId().replace(/:/g, '');
  const revealMask = `revealMask-${id}`;
  const textMask = `textMask-${id}`;
  const textGradient = `textGradient-${id}`;
  const lettering = {
    x: '50%',
    y: '50%',
    textAnchor: 'middle' as const,
    dominantBaseline: 'middle' as const,
    fontFamily: 'Helvetica, Arial, sans-serif',
    fontWeight: 700,
    fontSize: 76,
    textLength: 280,
    lengthAdjust: 'spacingAndGlyphs' as const,
    strokeWidth: 0.3,
  };

  function followCursor(event: PointerEvent<SVGSVGElement>) {
    if (
      event.pointerType === 'touch' &&
      event.type === 'pointermove' &&
      event.buttons === 0
    )
      return;
    const rect = svgRef.current?.getBoundingClientRect();
    if (!rect?.width || !rect.height) return;
    setHovered(true);
    setMousePointer(event.pointerType === 'mouse');
    setMaskPosition({
      cx: `${Math.max(0, Math.min(100, ((event.clientX - rect.left) / rect.width) * 100))}%`,
      cy: `${Math.max(0, Math.min(100, ((event.clientY - rect.top) / rect.height) * 100))}%`,
    });
  }

  return (
    <svg
      ref={svgRef}
      viewBox="0 0 300 100"
      width="100%"
      className={className}
      role="img"
      aria-label={label || text}
      tabIndex={0}
      onFocus={() => {
        setHovered(true);
        setMaskPosition({ cx: '50%', cy: '50%' });
      }}
      onBlur={() => setHovered(false)}
      onKeyDown={(event) => {
        const offsets: Record<string, [number, number]> = {
          ArrowLeft: [-8, 0],
          ArrowRight: [8, 0],
          ArrowUp: [0, -8],
          ArrowDown: [0, 8],
        };
        const offset = offsets[event.key];
        if (!offset) return;
        event.preventDefault();
        setHovered(true);
        setMaskPosition((position) => ({
          cx: `${Math.max(0, Math.min(100, parseFloat(position.cx) + offset[0]))}%`,
          cy: `${Math.max(0, Math.min(100, parseFloat(position.cy) + offset[1]))}%`,
        }));
      }}
      onPointerDown={followCursor}
      onPointerEnter={followCursor}
      onPointerMove={followCursor}
      onPointerLeave={() => setHovered(false)}
      style={{ display: 'block', userSelect: 'none', cursor: hovered && mousePointer ? 'none' : 'default' }}
    >
      <title>{text}</title>
      <defs>
        <linearGradient id={textGradient} gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#C8FF4D" />
          <stop offset="100%" stopColor="#C8FF4D" />
        </linearGradient>
        <motion.radialGradient
          id={revealMask}
          gradientUnits="userSpaceOnUse"
          r="20%"
          initial={{ cx: '50%', cy: '50%' }}
          animate={maskPosition}
          transition={{
            duration: reducedMotion ? 0 : duration,
            ease: 'easeOut',
          }}
        >
          <stop offset="0%" stopColor="white" />
          <stop offset="100%" stopColor="black" />
        </motion.radialGradient>
        <mask id={textMask} style={{ maskType: 'luminance' }}>
          <rect width="300" height="100" fill={`url(#${revealMask})`} />
        </mask>
      </defs>
      <text
        {...lettering}
        fill="transparent"
        stroke="#F4F2ED"
        opacity={0.45}
        aria-hidden="true"
      >
        {text}
      </text>
      <motion.text
        {...lettering}
        fill="transparent"
        stroke="#C8FF4D"
        aria-hidden="true"
        initial={{
          opacity: 0,
          strokeDashoffset: reducedMotion ? 0 : 1000,
          strokeDasharray: 1000,
        }}
        whileInView={{ strokeDashoffset: 0, strokeDasharray: 1000, opacity: reducedMotion ? 0 : [1, 1, 0] }}
        viewport={{ once: true, amount: 0.25 }}
        transition={{ duration: reducedMotion ? 0 : 4, ease: 'easeInOut', opacity: { duration: reducedMotion ? 0 : 4, times: [0, 0.85, 1] } }}
      >
        {text}
      </motion.text>
      <text
        {...lettering}
        fill="transparent"
        stroke={`url(#${textGradient})`}
        mask={`url(#${textMask})`}
        opacity={hovered ? 1 : 0}
        aria-hidden="true"
      >
        {text}
      </text>
      <circle
        cx={maskPosition.cx}
        cy={maskPosition.cy}
        r="1.2"
        fill="#C8FF4D"
        opacity={hovered && mousePointer ? 1 : 0}
        pointerEvents="none"
        aria-hidden="true"
      />
    </svg>
  );
}

```
IDEAS PARA LO QUE VIENE.

Tipografía que te sigue.

Un mejor brief empieza con una mejor pregunta.

La IA gana su lugar dentro del proceso.

La claridad es una función del producto.

¿TIENES UNA IDEA?VAMOS A CREARLA.
