Grow from Origin

1"use client";
2 
3import type { TargetAndTransition, Variants } from "motion/react";
4import * as m from "motion/react-m";
5import type { CSSProperties, ReactNode } from "react";
6import { growVariants, type Origin, revealTransition, viewportOnce } from "@/lib/motion";
7 
8type GrowFromOriginProps = {
9  children: ReactNode;
10  className?: string;
11  style?: CSSProperties;
12  delay?: number;
13  /** transform-origin corner/center the element grows from. */
14  origin?: Origin;
15  trigger?: "inView" | "mount";
16};
17 
18/**
19 * Grow from origin — fade + scale ~0.85 → 1, anchored to a transform-origin
20 * corner/center. The dropdown/tooltip/popover entrance. Mounts by default
21 * (menus don't wait on a scroll trigger); pass trigger="inView" to scope it
22 * to viewport entry instead. Transform-only — the reduced-motion provider
23 * strips it for free, no manual guard needed.
24 */
25export function GrowFromOrigin({
26  children,
27  className,
28  style,
29  delay = 0,
30  origin = "top",
31  trigger = "mount",
32}: GrowFromOriginProps) {
33  const base = growVariants(origin);
34  // growVariants bakes revealTransition into `animate` itself — a delay has
35  // to be merged into that same target, since a component-level `transition`
36  // prop only applies as a fallback when the variant has none of its own.
37  const variants: Variants = {
38    ...base,
39    animate: {
40      ...(base.animate as TargetAndTransition),
41      transition: { ...revealTransition, delay },
42    },
43  };
44  const play =
45    trigger === "mount"
46      ? ({ animate: "animate" } as const)
47      : ({ whileInView: "animate", viewport: viewportOnce } as const);
48 
49  return (
50    <m.div className={className} style={style} variants={variants} initial="initial" {...play}>
51      {children}
52    </m.div>
53  );
54}