Bottom Up Letters

1"use client";
2 
3import { motion, useInView, useReducedMotion } from "motion/react";
4import { useRef } from "react";
5 
6export interface BottomUpLettersProps {
7  children: string;
8  className?: string;
9  /** Delay before the animation starts, in milliseconds. */
10  delay?: number;
11  /** Per-character stagger, in milliseconds. */
12  stagger?: number;
13  /** Animate only once the text scrolls into view. */
14  triggerOnView?: boolean;
15}
16 
17const DURATION_S = 0.4;
18const MS = 1000;
19// Pronounced ease-out for a tall, staged lift from below.
20const EASE = [0.18, 1, 0.32, 1] as const;
21 
22/**
23 * BottomUpLetters — letters rise from below in a pronounced staircase,
24 * one symbol at a time, with zero blur. Best for short single words or
25 * compact headlines at 40px+. From the animate-text catalog (`bottom-up-letters`).
26 */
27export default function BottomUpLetters({
28  children,
29  className = "",
30  delay = 0,
31  stagger = 88,
32  triggerOnView = false,
33}: BottomUpLettersProps) {
34  const ref = useRef<HTMLSpanElement>(null);
35  const inView = useInView(ref, { once: true });
36  const shouldReduceMotion = useReducedMotion();
37  const play = (!triggerOnView || inView) && !shouldReduceMotion;
38  const characters = Array.from(children);
39 
40  return (
41    <span aria-label={children} className={className} ref={ref}>
42      {characters.map((char, index) => (
43        <motion.span
44          animate={play ? { opacity: 1, y: 0 } : undefined}
45          aria-hidden="true"
46          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 46 }}
47          // biome-ignore lint/suspicious/noArrayIndexKey: characters have no stable id
48          key={index}
49          style={{ display: "inline-block", whiteSpace: "pre" }}
50          transition={
51            shouldReduceMotion
52              ? { duration: 0 }
53              : {
54                  delay: delay / MS + (index * stagger) / MS,
55                  duration: DURATION_S,
56                  ease: EASE,
57                }
58          }
59        >
60          {char === " " ? " " : String(char)}
61        </motion.span>
62      ))}
63    </span>
64  );
65}