Motion

FadeUp

Opacity + 16px rise on entrance, `easing.standard`. The default entrance for most blocks — headline text, blurbs, cards. Auto-swaps to an opacity-only variant under prefers-reduced-motion.

Preview

Fades up 16px on entrance

Code

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

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

/**
 * FadeUp — opacity + 16px rise, `easing.standard`. Auto-swaps to an
 * opacity-only reduced variant under prefers-reduced-motion so callers
 * never have to branch on useReducedMotion themselves.
 */
export function FadeUp(props: HTMLMotionProps<"div">) {
  const reduced = useReducedMotion();
  return <motion.div variants={reduced ? reducedFade : fadeUp} {...props} />;
}

Installation

Usage
import { motion } from "framer-motion";
import { FadeUp } from "@/components/motion/FadeUp";
import { group } from "@/lib/motion";

<motion.div variants={group()} initial="hidden" animate="show">
  <FadeUp>Content</FadeUp>
</motion.div>

Props

PropTypeDefaultDescription
...propsHTMLMotionProps<'div'>—Any framer-motion div prop — initial/animate/whileInView when used standalone, or nothing when nested under a parent driving variant propagation (see group() in src/lib/motion.ts).

Accessibility

Reads prefers-reduced-motion via useReducedMotion() internally and falls back to a fast opacity-only fade — no transform, no stagger — so callers never re-implement that branch.

web design.