Breathing Text

1"use client"
2 
3import { ElementType } from "react"
4import { motion, Transition, Variants } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8interface TextProps extends React.HTMLAttributes<HTMLElement> {
9  /**
10   * The content to be displayed and animated
11   */
12  children: React.ReactNode
13 
14  /**
15   * HTML Tag to render the component as
16   */
17  as?: ElementType
18 
19  /**
20   * Initial font variation settings
21   */
22  fromFontVariationSettings: string
23 
24  /**
25   * Target font variation settings to animate to
26   */
27  toFontVariationSettings: string
28 
29  /**
30   * Animation transition configuration
31   * @default { duration: 1.5, ease: "easeInOut" }
32   */
33  transition?: Transition
34 
35  /**
36   * Duration of stagger delay between elements in seconds
37   * @default 0.1
38   */
39  staggerDuration?: number
40 
41  /**
42   * Direction to stagger animations from
43   * @default "first"
44   */
45  staggerFrom?: "first" | "last" | "center" | number
46 
47  /**
48   * Delay between animation repeats in seconds
49   * @default 0.1
50   */
51  repeatDelay?: number
52}
53 
54const BreathingText = ({
55  children,
56  as = "span",
57  fromFontVariationSettings,
58  toFontVariationSettings,
59  transition = {
60    duration: 1.5,
61    ease: "easeInOut",
62  },
63  staggerDuration = 0.1,
64  staggerFrom = "first",
65  repeatDelay = 0.1,
66  className,
67  ...props
68}: TextProps) => {
69  const letterVariants: Variants = {
70    initial: { fontVariationSettings: fromFontVariationSettings },
71    animate: (i) => ({
72      fontVariationSettings: toFontVariationSettings,
73      transition: {
74        ...transition,
75        repeat: Infinity,
76        repeatType: "mirror",
77        delay: i * staggerDuration,
78        repeatDelay: repeatDelay,
79      },
80    }),
81  }
82 
83  const getCustomIndex = (index: number, total: number) => {
84    if (typeof staggerFrom === "number") {
85      return Math.abs(index - staggerFrom)
86    }
87    switch (staggerFrom) {
88      case "first":
89        return index
90      case "last":
91        return total - 1 - index
92      case "center":
93      default:
94        return Math.abs(index - Math.floor(total / 2))
95    }
96  }
97 
98  const letters = String(children).split("")
99  const ElementTag = as
100 
101  return (
102    <ElementTag
103      className={cn(
104        className,
105        // an after pseudo element is used to create a container large enough to hold the text with full weight. Helps avoid layout shifts
106// … truncated