Cursor Trail Reveal Demo

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { catalogPreviewScreenClassName } from "@/components/catalog/catalog-preview-classes";
5import { CursorTrailReveal } from "@/components/sora-ui/effects/cursor-trail-reveal";
6import { TextRevealBlock } from "@/components/sora-ui/texts/text-reveal-block";
7 
8import { DEMO_TRAIL_IMAGES } from "./trail-images";
9 
10export function CursorTrailRevealExample() {
11  return (
12    <div
13      className={cn("relative overflow-hidden", catalogPreviewScreenClassName)}
14    >
15      <CursorTrailReveal images={DEMO_TRAIL_IMAGES} maskColor="#1a1a1a" />
16 
17      <div className="absolute inset-0 z-1 flex items-center justify-center">
18        <div className="mx-auto flex w-3/4 flex-col items-center gap-8 text-center max-lg:w-[90%]">
19          <TextRevealBlock
20            animateOnScroll={false}
21            blockColor="#c8e600"
22            delay={0.65}
23          >
24            <div className="flex w-full flex-col items-center">
25              <h6 className="m-0 font-medium text-[2.5rem] uppercase leading-none tracking-[-0.05rem] max-lg:text-[1.75rem]">
26                Move your cursor to reveal the trail
27              </h6>
28            </div>
29          </TextRevealBlock>
30        </div>
31      </div>
32    </div>
33  );
34}
35 
36export default CursorTrailRevealExample;