Text Reveal

"use client";

import { useRef } from "react";

import { TextReveal } from "@/lab/magicui/ui/text-reveal";

export default function TextRevealDemo() {
  const ref = useRef<HTMLDivElement>(null);
  return (
    <div className="relative h-full w-full">
      <div ref={ref} className="h-full w-full overflow-y-auto">
        <TextReveal container={ref}>Magic UI will change the way you design.</TextReveal>
      </div>
      <span className="pointer-events-none absolute top-3 right-4 font-mono text-[10px] tracking-widest text-neutral-400 uppercase">
        scroll ↓
      </span>
    </div>
  );
}