"use client"; /** * Layered stroke text that follows pointer movement. Content is the `text` string only * (not arbitrary children) so layers stay plain text. Depends on `cn` from registry `utils`. */ import * as React from "react"; import { cn } from "@/lib/utils"; export type EchoTextProps = React.ComponentProps<"div"> & { text?: string; fontClassName?: string; }; export function EchoText({ text = "text", className, fontClassName, "aria-label": ariaLabel, role = "img", onPointerMove, onPointerLeave, ...props }: EchoTextProps) { const [offset, setOffset] = React.useState({ x: 0, y: 0 }); const handlePointerMove = (event: React.PointerEvent) => { onPointerMove?.(event); if (event.defaultPrevented) { return; } const rect = event.currentTarget.getBoundingClientRect(); const nx = (event.clientX - rect.left - rect.width / 2) / (rect.width / 2); const ny = (event.clientY - rect.top - rect.height / 2) / (rect.height / 2); setOffset({ x: -nx, y: -ny }); }; const handlePointerLeave = (event: React.PointerEvent) => { onPointerLeave?.(event); if (event.defaultPrevented) { return; } setOffset({ x: 0, y: 0 }); }; const layerClassName = cn( "text-foreground pointer-events-none absolute inset-0 text-[180px] leading-none font-medium transition-transform duration-300 ease-out", fontClassName, ); const baseClassName = cn( "text-foreground relative text-[180px] leading-none font-medium", fontClassName, ); return (

{text}

); }