Spring Scale In

A text animation component that scales words in with a soft overshoot effect. It renders each word individually and animates them with a delay and stagger. Use it to add a subtle, dynamic entrance to text on scroll or when visibility is detected.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/spring-scale-in

npx layro-cli add @educlopez/spring-scale-in

npx layro-cli add @educlopez/spring-scale-in

bunx layro-cli add @educlopez/spring-scale-in

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { motion, useInView, useReducedMotion } from "motion/react";
import { useRef } from "react";

/**
 * SpringScaleIn — per-word scale-in with a soft overshoot, iOS app icon-style pop.
 * From the animate-text catalog (`spring-scale-in`).
 */
export interface SpringScaleInProps {
  children: string;
  className?: string;
  /** Delay before the animation starts, in milliseconds. */
  delay?: number;