Motion Primitives

The MotionPrimitives file exports several lightweight wrapper components (like <FadeIn>, <SlideUp>, and <ScaleIn>) that make it incredibly easy to orchestrate standard UI entrance animations without writing verbose Framer Motion variants every time.

Live Preview

Installation

Exported Components

All primitives accept standard className and Framer Motion HTMLMotionProps in addition to their custom props.

1. FadeIn

Standard opacity fade from 0 to 1.

• duration (default: 0.5): Length of transition.
• delay (default: 0): Wait before animating.

2. SlideUp

Translates upwards along the Y-axis while fading in. Uses a custom bezier curve for a snappy entrance.

• yOffset (default: 40): Starting position on the Y axis.

3. ScaleIn

Bounces from a smaller scale up to 1 using a backOut ease, creating a subtle pop effect.

• initialScale (default: 0.8): Starting scale percentage.

4. BlurIn

Transitions a CSS blur filter down to 0px while fading in. Excellent for typography or heavy images.

• initialBlur (default: "10px"): Starting blur amount.

5. RotateIn

Combines a slight rotation with scale and fade. Best used for floating cards or staggered grids.

• initialRotation (default: -15): Starting rotation in degrees.

6. StaggerContainer & StaggerItem

Use these together to orchestrate sequential animations for lists or grids.

• <StaggerContainer>

  • staggerChildren (default: 0.1): Delay between each child animating.
  • delayChildren (default: 0.1): Delay before the first child starts.

• <StaggerItem>

  • yOffset (default: 30): Starting position on the Y axis for the child slide-up animation.

Viewport Logic

All motion primitives utilize whileInView instead of animate, meaning they will automatically trigger when they scroll into the viewport. They also use viewport={{ once: true, margin: "-50px" }}, meaning they wait until they are 50px inside the screen to trigger, and they will only animate once per page load.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { MotionPrimitives } from "@/components/creative/motion-primitives";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { MotionPrimitives } from "@/components/creative/motion-primitives";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <MotionPrimitives
      >
        <div>Content goes here</div>
      </MotionPrimitives>
    </div>
  );
}