Animation

Animate a meaningful transition

Use a short transition to clarify hover, opening or a state change. Avoid perpetual movement around forms and reading content. Preserve the final state when motion is reduced; an animation should never be required to understand the interface.

Pimolu's shared CSS includes reduced-motion treatments. Review custom application animation separately, including components with continuous progress or media.

Provide a quiet CSS alternative

Keep motion scoped to the element that changes. Avoid transition: all and layout shifts during keyboard navigation.

.resource-link {
  transition: border-color 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .resource-link {
    transition: none;
  }
}

Using Motion in an application

This website already uses motion/react. Motion is an application dependency, not a required Pimolu peer dependency. If your application uses it, configure reducedMotion on MotionConfig and choose an appropriate static state.

Do not add a second animation framework just to animate Pimolu. Verify focus, Escape and dismissal during animated overlays, not only after their transition finishes.

"use client";

import type { ReactNode } from "react";
import { MotionConfig, motion } from "motion/react";

export function Reveal({ children }: { children: ReactNode }) {
  return (
    <MotionConfig reducedMotion="user">
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
        {children}
      </motion.div>
    </MotionConfig>
  );
}