Fog Text Reveal Demo

1"use client";
2 
3import {
4  FogTextReveal,
5  type FogTextRevealProps,
6} from "@/components/sora-ui/texts/fog-text-reveal";
7 
8export default function FogTextRevealExample({
9  loop = true,
10  startOnView = true,
11  holdDuration = 320,
12  maxBlur = 16,
13}: Partial<FogTextRevealProps>) {
14  return (
15    <div className="flex w-full items-center justify-center px-6 py-16">
16      <p className="max-w-xl text-left font-serif text-4xl leading-tight tracking-tight">
17        Type can move like{" "}
18        <FogTextReveal
19          holdDuration={holdDuration}
20          loop={loop}
21          maxBlur={maxBlur}
22          startOnView={startOnView}
23          text={["weather.", "fog.", "breath."]}
24        />
25      </p>
26    </div>
27  );
28}