Scale In

Scale

Soft 0.95 → 1 grow + fade on a straight ease tween, never a spring.

0.95 → 1

default

a beat later

delay={0.15}

plays on mount

trigger="mount"

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/scale-in.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/scale-in.tsx

components/motion/scale-in.tsx

"use client";

import * as m from "motion/react-m";
import type { CSSProperties, ReactNode } from "react";
import { revealTransition, scaleIn, viewportOnce } from "@/lib/motion";

type ScaleInProps = {
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
  delay?: number;
  trigger?: "inView" | "mount";
};

/** Soft 0.95 → 1 grow + fade — a straight ease tween, never a spring. */
export function ScaleIn({
  children,
  className,
  style,
  delay = 0,
  trigger = "inView",
}: ScaleInProps) {
  const play =
    trigger === "mount"
      ? ({ animate: scaleIn.animate } as const)
      : ({ whileInView: scaleIn.animate, viewport: viewportOnce } as const);

  return (
    <m.div
      className={className}
      style={style}
      initial={scaleIn.initial}
      {...play}
      transition={{ ...revealTransition, delay }}
    >
      {children}
    </m.div>
  );
}

Usage

Basic

Wrap any element — it settles 0.95 → 1 scale + fades in the first time it is 30% in view.

import { ScaleIn } from "@/components/motion/scale-in";

<ScaleIn className="rounded-sm border border-border bg-panel-2 p-4">
  <Card />
</ScaleIn>

With delay

Offset sibling scale-ins by a beat to sequence them without a full Stagger.

<ScaleIn>
  <Card>Leads</Card>
</ScaleIn>
<ScaleIn delay={0.15}>
  <Card>Follows, a beat later</Card>
</ScaleIn>

Trigger on mount

Play immediately instead of waiting for scroll — for above-the-fold content, e.g. a modal or popover.

<ScaleIn trigger="mount">
  <Dialog.Content />
</ScaleIn>

Props

Prop	Type	Default	Description
children	ReactNode	—	Content that grows + fades in.
className	string	—	Passed straight through — ScaleIn becomes your layout element.
style	CSSProperties	—	Inline style passthrough.
delay	number	0	Seconds before this instance animates.
trigger	"inView" \| "mount"	"inView"	Animate on scroll-into-view (once) or immediately on mount.