NUVORIQ

LIVE DEMO
Hover over the preview to replay the outline. Move across the letters to reveal color. On touch screens, tap or drag.
INTERACTIVE DEMO / 01
Typography that follows you.

Move the dot across the letters to reveal the NUVORIQ lime highlight. Try the SVG animation, then copy the prompt to create your own version.
VIEW PROMPT
Add only the supplied SVG text-hover animation to my existing footer. Keep the current footer layout, spacing, links, contact details, colors and responsive behavior. Do not add or replace the footer itself.

Use the reference recording as a visual guide. The large outlined word should draw in over roughly four seconds, and a soft radial gradient should follow the mouse across the letter outlines. Keep the base text visible when the pointer leaves.

Implementation:
- Use React, TypeScript and Motion. Reuse the existing project structure and dependencies; add the motion package only if missing.
- Integrate the component below into the existing footer. Pass the existing brand word through the text prop. Render it as <TextHoverEffect text="YOUR BRAND" />.
- Preserve the real SVG layers, svgRef, cursor-position calculation, maskPosition, motion.radialGradient, revealMask, textMask and animated strokeDashoffset/strokeDasharray. Do not approximate them with an HTML heading or a CSS hover color.
- Keep the approximately 20% radial mask and smooth cursor response. Use unique SVG IDs for every instance.
- Use warm white outlines, an acid-lime (#C8FF4D) reveal and a small lime dot at the mouse position. Hide the native cursor only over the interactive SVG; restore it on leave.
- Respect prefers-reduced-motion, avoid pointer effects on touch input, and keep the text responsive without clipping or horizontal overflow.
- Do not add the demo footer, sample branding, About Us links, contact details, social icons, stock images or placeholder links.
- Fix any TypeScript or integration errors and verify the outline draw and cursor-following reveal.

Component:

```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 FOR WHAT COMES NEXT.

Typography that follows you.

The better brief starts with a better question.

AI earns its place inside the workflow.

Clarity is a product feature.

HAVE AN IDEA?LET’S BUILD IT.
