Text Effect

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