Motion

PopIn

Opacity + scale 0.85→1 on entrance, `easing.emphasized` (overshoot). Reserved for the small set of elements the motion system allows overshoot on — the primary button and logo mark — not a general-purpose entrance.

Preview

I

Code

src/components/motion/PopIn.tsx
"use client";

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

/**
 * PopIn — opacity + scale 0.85→1, `easing.emphasized` (overshoot). Reserve
 * for the same small set of elements the motion system allows emphasized
 * easing on (per hyliox-motion-system.md), not general-purpose entrances.
 */
export function PopIn(props: HTMLMotionProps<"div">) {
  const reduced = useReducedMotion();
  return <motion.div variants={reduced ? reducedFade : popIn} {...props} />;
}

Installation

Usage
import { PopIn } from "@/components/motion/PopIn";

<PopIn initial="hidden" animate="show">
  <LogoMark size={64} />
</PopIn>

Props

PropTypeDefaultDescription
...propsHTMLMotionProps<'div'>—Any framer-motion div prop.

Accessibility

Same reduced-motion fallback as FadeUp — opacity-only, no overshoot, when the user has requested less motion.

web design.