Spring Pop

Scale

Spring pop entrance — a natural ~1.05 overshoot that emerges from the spring itself.

Pops in

with overshoot

— never titles

Installation

One command drops the source into your repo — editable, with the provider and motion pulled in automatically.

npx shadcn add https://motion.asmitsah.dev/r/spring-pop.json

PrerequisiteInstall the provider base first

This component imports from @/lib/motion and needs <MotionProvider> mounted in your root layout — install the base once, before copying this component.

npx shadcn add https://motion.asmitsah.dev/r/provider.json

Step 1Install the runtime dependency

npm install motion

Step 2Copy the source into components/motion/spring-pop.tsx

components/motion/spring-pop.tsx

"use client";

import * as m from "motion/react-m";
import type { CSSProperties, ReactNode } from "react";
import { springPop, springPopTransition } from "@/lib/motion";

type SpringPopProps = {
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
  delay?: number;
};

// The ~1.05 overshoot emerges from the spring itself — never keyframe it.
// Reduced motion drops the scale (a transform), leaving a clean opacity fade.
export function SpringPop({ children, className, style, delay = 0 }: SpringPopProps) {
  return (
    <m.div
      className={className}
      style={style}
      initial={springPop.initial}
      animate={springPop.animate}
      transition={{ ...springPopTransition, delay }}
    >
      {children}
    </m.div>
  );
}

Usage

Basic

Wrap a badge, chip, or icon — it springs opacity 0 → 1 and scale 0.8 → ~1.05 → 1, the one deliberate overshoot in the engine. Never wrap titles or headings with it.

import { SpringPop } from "@/components/motion/spring-pop";

<SpringPop className="rounded-full border px-3 py-1 text-sm">
  New
</SpringPop>

Staggered group

Offset a cluster of pops by a beat each so they don't all land at once.

<div className="flex gap-3">
  <SpringPop>First</SpringPop>
  <SpringPop delay={0.1}>Second</SpringPop>
  <SpringPop delay={0.2}>Third</SpringPop>
</div>

Props

Prop	Type	Default	Description
children	ReactNode	—	Content that pops in on mount.
className	string	—	Passed straight through — SpringPop becomes your layout element.
style	CSSProperties	—	Inline style passthrough.
delay	number	0	Seconds before this instance animates.