@calebhill/animations

Shared staggered fade/blur/slide animation utilities for Framer Motion.

A small set of entrance-motion primitives — weighted easing curves, a blur hierarchy, and ready-made container/item variants — extracted so multiple sites can share one motion vocabulary.

Install

npm install @calebhill/animations framer-motion

framer-motion is a peer dependency (>=11.0.0).

Usage

import { motion } from "framer-motion";
import { contentContainerVariants, contentItemVariants } from "@calebhill/animations";

export function ProjectList({ projects }) {
  return (
    <motion.ul
      variants={contentContainerVariants}
      initial="hidden"
      animate="visible"
    >
      {projects.map((p) => (
        <motion.li key={p.id} variants={contentItemVariants}>
          {p.title}
        </motion.li>
      ))}
    </motion.ul>
  );
}

Respecting reduced motion

prefers-reduced-motion should mean fewer and gentler animations, not none. The get* helpers keep the opacity fade and the stagger cascade — which aid comprehension — while dropping the travel and blur that trigger motion sickness.

import { useReducedMotion } from "framer-motion";
import { getContentItemVariants } from "@calebhill/animations";

const reduce = useReducedMotion();
<motion.li variants={getContentItemVariants(reduce)} />;

API

Easing

easingConfigs — weighted ease-out curves (cubic-bezier(0.22, 1, 0.36, 1)): slow, heavy deceleration that settles cleanly with no overshoot.

| Key | Duration | Use | | --- | --- | --- | | general | 0.72s | General UI transitions | | headerStagger | 1.8s | Hero / header entrances | | listStagger | 1.2s | Project and content lists |

springConfigs is a deprecated alias for easingConfigs, kept for backwards compatibility.

Blur

blurHierarchy — higher tiers blur more, so visual priority falls out naturally.

| Key | Value | | --- | --- | | header | 18 | | content | 14 |

Variants

| Export | Role | | --- | --- | | headerContainerVariants | Header container — staggers children by 0.12s after a 0.1s delay | | headerItemVariants | Header item — fade + 24px rise + blur | | contentContainerVariants | Content container — staggers children by 0.1s after a 0.3s delay | | contentItemVariants | Content item — fade + 20px rise + blur | | getHeaderItemVariants(reduceMotion) | Header item, reduced-motion aware | | getContentItemVariants(reduceMotion) | Content item, reduced-motion aware |

Pair a container with its matching item variants and drive both from initial="hidden" animate="visible".

Notes

Entrance variants animate full transform strings rather than Framer's y shorthand. These run during page load and hydration — exactly when the main thread is busiest — so keeping them on the compositor is what makes them stay smooth.

License

MIT