Text Effect Demo

1"use client";
2 
3import {
4  TextEffect,
5  type TextEffectPer,
6  type TextEffectPreset,
7} from "@/components/sora-ui/texts/text-effect";
8 
9interface TextEffectDemoProps {
10  children?: string;
11  className?: string;
12  delay?: number;
13  per?: TextEffectPer;
14  preset?: TextEffectPreset;
15  scrollTrigger?: boolean;
16  speedReveal?: number;
17  speedSegment?: number;
18}
19 
20/** Docs preview — scroll-triggered preset text reveal. */
21export default function TextEffectDemo({
22  children = "Motion-first text effects",
23  className = "text-center font-bold text-3xl",
24  delay = 0,
25  per = "word",
26  preset = "fade-in-blur",
27  scrollTrigger = true,
28  speedReveal = 1,
29  speedSegment = 1,
30}: TextEffectDemoProps) {
31  return (
32    <div className="flex min-h-[140px] items-center justify-center px-4">
33      <TextEffect
34        as="h2"
35        className={className}
36        delay={delay}
37        per={per}
38        preset={preset}
39        scrollTrigger={scrollTrigger}
40        speedReveal={speedReveal}
41        speedSegment={speedSegment}
42      >
43        {children}
44      </TextEffect>
45    </div>
46  );
47}