Motion

ScaleIn

Opacity + scale 0.96→1 on entrance, `easing.standard`. The subtle, non-overshoot alternative to PopIn — for cards and panels entering the layout.

Preview

Scales in from 0.96

Code

src/components/motion/ScaleIn.tsx

"use client";

import { motion, useReducedMotion, type HTMLMotionProps } from "framer-motion";
import { scaleIn, reducedFade } from "@/lib/motion";

/**
 * ScaleIn — opacity + scale 0.96→1, `easing.standard`. The subtle,
 * non-overshoot alternative to PopIn for cards/panels entering the layout.
 */
export function ScaleIn(props: HTMLMotionProps<"div">) {
  const reduced = useReducedMotion();
  return <motion.div variants={reduced ? reducedFade : scaleIn} {...props} />;
}

Installation

Usage

import { ScaleIn } from "@/components/motion/ScaleIn";

<ScaleIn initial="hidden" animate="show">
  <WindowCard>...</WindowCard>
</ScaleIn>

Props

Prop	Type	Default	Description
...props	HTMLMotionProps<'div'>	—	Any framer-motion div prop.

Accessibility

Same reduced-motion fallback as FadeUp.