Grow from Origin

Scale

Fade + scale (~0.85 → 1) anchored to a transform-origin corner — the dropdown/popover entrance.

origin="top-left"

origin="top-right"

origin="bottom-left"

origin="center"

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/grow-from-origin.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/grow-from-origin.tsx

components/motion/grow-from-origin.tsx

"use client";

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

type GrowFromOriginProps = {
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
  delay?: number;
  /** transform-origin corner/center the element grows from. */
  origin?: Origin;
  trigger?: "inView" | "mount";
};

/**
 * Grow from origin — fade + scale ~0.85 → 1, anchored to a transform-origin
 * corner/center. The dropdown/tooltip/popover entrance. Mounts by default
 * (menus don't wait on a scroll trigger); pass trigger="inView" to scope it
 * to viewport entry instead. Transform-only — the reduced-motion provider
 * strips it for free, no manual guard needed.
 */
export function GrowFromOrigin({
  children,
  className,
  style,
  delay = 0,
  origin = "top",
  trigger = "mount",
}: GrowFromOriginProps) {
  const base = growVariants(origin);
  // growVariants bakes revealTransition into `animate` itself — a delay has
  // to be merged into that same target, since a component-level `transition`
  // prop only applies as a fallback when the variant has none of its own.
  const variants: Variants = {
    ...base,
    animate: {
      ...(base.animate as TargetAndTransition),
      transition: { ...revealTransition, delay },
    },
  };
  const play =
    trigger === "mount"
      ? ({ animate: "animate" } as const)
      : ({ whileInView: "animate", viewport: viewportOnce } as const);

  return (
    <m.div className={className} style={style} variants={variants} initial="initial" {...play}>
      {children}
    </m.div>
  );
}

Usage

Basic

Fade + scale ~0.85 → 1, anchored to origin. Plays on mount by default — the dropdown/tooltip/popover entrance.

import { GrowFromOrigin } from "@/components/motion/grow-from-origin";

<GrowFromOrigin origin="top-left">
  <DropdownMenu />
</GrowFromOrigin>

Origin

Anchor the grow to any of 9 corners/edges/center to match where the trigger sits.

<GrowFromOrigin origin="top-right">
  <PopoverContent />
</GrowFromOrigin>

<GrowFromOrigin origin="bottom-left">
  <Tooltip />
</GrowFromOrigin>

<GrowFromOrigin origin="center">
  <Modal />
</GrowFromOrigin>

Trigger on scroll

Scope it to viewport entry instead of mount — for a card that grows in as the page scrolls.

<GrowFromOrigin origin="center" trigger="inView">
  <PricingCard />
</GrowFromOrigin>

Props

Prop	Type	Default	Description
children	ReactNode	—	The popover/menu content that grows in, anchored to origin.
origin	"top" \| "top-left" \| "top-right" \| "bottom" \| "bottom-left" \| "bottom-right" \| "left" \| "right" \| "center"	"top"	The transform-origin corner/edge/center it scales up from.
trigger	"inView" \| "mount"	"mount"	Menus/tooltips play on mount by default; pass trigger="inView" to scope it to scroll entry instead.
className	string	—	Passed straight through — GrowFromOrigin becomes your layout element.
style	CSSProperties	—	Inline style passthrough.
delay	number	0	Seconds before this instance animates.