Scale In

1"use client";
2 
3import * as m from "motion/react-m";
4import type { CSSProperties, ReactNode } from "react";
5import { revealTransition, scaleIn, viewportOnce } from "@/lib/motion";
6 
7type ScaleInProps = {
8  children: ReactNode;
9  className?: string;
10  style?: CSSProperties;
11  delay?: number;
12  trigger?: "inView" | "mount";
13};
14 
15/** Soft 0.95 → 1 grow + fade — a straight ease tween, never a spring. */
16export function ScaleIn({
17  children,
18  className,
19  style,
20  delay = 0,
21  trigger = "inView",
22}: ScaleInProps) {
23  const play =
24    trigger === "mount"
25      ? ({ animate: scaleIn.animate } as const)
26      : ({ whileInView: scaleIn.animate, viewport: viewportOnce } as const);
27 
28  return (
29    <m.div
30      className={className}
31      style={style}
32      initial={scaleIn.initial}
33      {...play}
34      transition={{ ...revealTransition, delay }}
35    >
36      {children}
37    </m.div>
38  );
39}