Text Effect

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