NUVORIQ

LIVE DEMO
Beweeg je muis over het voorbeeld om de contour opnieuw te tekenen. Beweeg over de letters om kleur te onthullen. Tik of sleep op een aanraakscherm.
INTERACTIEVE DEMO / 01
Typografie die je volgt.

Beweeg de stip over de letters om de limoengroene NUVORIQ-kleur te onthullen. Probeer de SVG-animatie en kopieer de prompt voor je eigen versie.
BEKIJK PROMPT
Voeg uitsluitend de meegeleverde SVG-tekstanimatie toe aan mijn bestaande footer. Behoud de huidige indeling, witruimte, links, contactgegevens, kleuren en responsieve werking. Voeg geen nieuwe footer toe.

Gebruik de opname als visuele referentie. De grote lettercontouren worden in ongeveer vier seconden getekend. Een zacht radiaal kleurverloop volgt de muis over de contouren. De basistekst blijft zichtbaar wanneer de muis weggaat.

Implementatie:
- Gebruik React, TypeScript en Motion. Hergebruik de bestaande projectstructuur en pakketten; voeg motion alleen toe als het ontbreekt.
- Integreer het onderstaande component in de bestaande footer. Geef de bestaande merknaam door via text: <TextHoverEffect text="JOUW MERK" />.
- Behoud de SVG-lagen, svgRef, cursorberekening, maskPosition, motion.radialGradient, revealMask, textMask en de geanimeerde strokeDashoffset/strokeDasharray. Vervang dit niet door een HTML-kop of een CSS-hoverkleur.
- Behoud het radiale masker van ongeveer 20% en de vloeiende cursorreactie. Gebruik unieke SVG-ID's per instantie.
- Het voorbeeld gebruikt de warmwitte contour en een limoengroene (#C8FF4D) onthulling met een kleine stip die de muis volgt. Verberg de standaardcursor alleen boven de interactieve SVG.
- Respecteer prefers-reduced-motion, vermijd muiseffecten bij aanraakinvoer en houd de tekst responsief zonder afsnijding of horizontale overloop.
- Voeg geen demofooter, voorbeeldmerk, extra links, contactgegevens, sociale pictogrammen, stockfoto's of tijdelijke links toe.
- Los TypeScript- en integratiefouten op en controleer de contouranimatie en de cursorvolgende onthulling.

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>
  );
}

```
IDEEËN VOOR WAT HIERNA KOMT.

Typografie die je volgt.

Een betere briefing begint met een betere vraag.

AI verdient zijn plek in het werkproces.

Duidelijkheid is een productfunctie.

HEB JE EEN IDEE?LATEN WE HET BOUWEN.
