text-effect

1"use client";
2import { cn } from "@/lib/utils";
3import type {
4	TargetAndTransition,
5	Transition,
6	Variant,
7	Variants,
8} from "motion/react";
9import { AnimatePresence, motion } from "motion/react";
10import React from "react";
11 
12export type PresetType = "blur" | "fade-in-blur" | "scale" | "fade" | "slide";
13 
14export type PerType = "word" | "char" | "line";
15 
16export type TextEffectProps = {
17	children: string;
18	per?: PerType;
19	as?: keyof React.JSX.IntrinsicElements;
20	variants?: {
21		container?: Variants;
22		item?: Variants;
23	};
24	className?: string;
25	preset?: PresetType;
26	delay?: number;
27	speedReveal?: number;
28	speedSegment?: number;
29	trigger?: boolean;
30	onAnimationComplete?: () => void;
31	onAnimationStart?: () => void;
32	segmentWrapperClassName?: string;
33	containerTransition?: Transition;
34	segmentTransition?: Transition;
35	style?: React.CSSProperties;
36};
37 
38const defaultStaggerTimes: Record<PerType, number> = {
39	char: 0.03,
40	word: 0.05,
41	line: 0.1,
42};
43 
44const WHITESPACE_SPLIT_REGEX = /(\s+)/;
45 
46const defaultContainerVariants: Variants = {
47	hidden: { opacity: 0 },
48	visible: {
49		opacity: 1,
50		transition: {
51			staggerChildren: 0.05,
52		},
53	},
54	exit: {
55		transition: { staggerChildren: 0.05, staggerDirection: -1 },
56	},
57};
58 
59const defaultItemVariants: Variants = {
60	hidden: { opacity: 0 },
61	visible: {
62		opacity: 1,
63	},
64	exit: { opacity: 0 },
65};
66 
67const presetVariants: Record<
68	PresetType,
69	{ container: Variants; item: Variants }
70> = {
71	blur: {
72		container: defaultContainerVariants,
73		item: {
74			hidden: { opacity: 0, filter: "blur(12px)" },
75			visible: { opacity: 1, filter: "blur(0px)" },
76			exit: { opacity: 0, filter: "blur(12px)" },
77		},
78	},
79	"fade-in-blur": {
80		container: defaultContainerVariants,
81		item: {
82			hidden: { opacity: 0, y: 20, filter: "blur(12px)" },
83			visible: { opacity: 1, y: 0, filter: "blur(0px)" },
84			exit: { opacity: 0, y: 20, filter: "blur(12px)" },
85		},
86	},
87	scale: {
88		container: defaultContainerVariants,
89		item: {
90			hidden: { opacity: 0, scale: 0 },
91			visible: { opacity: 1, scale: 1 },
92			exit: { opacity: 0, scale: 0 },
93		},
94	},
95	fade: {
96		container: defaultContainerVariants,
97		item: {
98			hidden: { opacity: 0 },
99			visible: { opacity: 1 },
100			exit: { opacity: 0 },
101		},
102	},
103	slide: {
104		container: defaultContainerVariants,
105		item: {
106			hidden: { opacity: 0, y: 20 },
107			visible: { opacity: 1, y: 0 },
108			exit: { opacity: 0, y: 20 },
109		},
110	},
111};
112 
113const AnimationComponent: React.FC<{
114	segment: string;
115	variants: Variants;
116	per: "line" | "word" | "char";
117// … truncated