Text Effect

1"use client";
2 
3import { cn } from "@/registry/default/utils";
4import {
5	AnimatePresence,
6	motion,
7	type TargetAndTransition,
8	type Transition,
9	type Variant,
10	type Variants,
11} from "motion/react";
12import React from "react";
13 
14export type PresetType = "blur" | "fade-in-blur" | "scale" | "fade" | "slide";
15 
16export type PerType = "word" | "char" | "line";
17 
18export type TextEffectProps = {
19	children: string;
20	per?: PerType;
21	as?: keyof React.JSX.IntrinsicElements;
22	variants?: {
23		container?: Variants;
24		item?: Variants;
25	};
26	className?: string;
27	preset?: PresetType;
28	delay?: number;
29	speedReveal?: number;
30	speedSegment?: number;
31	trigger?: boolean;
32	onAnimationComplete?: () => void;
33	onAnimationStart?: () => void;
34	segmentWrapperClassName?: string;
35	containerTransition?: Transition;
36	segmentTransition?: Transition;
37	style?: React.CSSProperties;
38};
39 
40const defaultStaggerTimes: Record<PerType, number> = {
41	char: 0.03,
42	word: 0.05,
43	line: 0.1,
44};
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	segmentWrapperClassName?: string;
118// … truncated