Motion

Clay is squishy, so things should move like it. Parlemen uses motion with four spring presets taken from the company profile site, so the components and the brand feel the same.

npm i motion

Springs

Never use durations for UI that responds to the user. Pick a spring.

Where it moves

ButtonLifts on hover, flattens and spreads when pressed (squish).
TabsActive pill slides between triggers, content floats in (snappy, gentle).
SidebarActive pill slides to the new page, icons wiggle on hover (snappy).
DialogPops in with a tilt, shrinks away on close (bouncy).
Theme togglePill slides, icon spins in (snappy, bouncy).
Copy buttonIcon swaps with a pop (bouncy).
Docs pagesEach page floats up on navigation (gentle).

Rules

  • Respond to input within one frame. Springs start instantly, durations feel laggy.
  • One thing moves at a time. Shared pills use layoutId instead of fading two elements.
  • Bounce is for arrivals, not for exits. Exits are quick and quiet.
  • Respect reduced motion. Providers sets MotionConfig reducedMotion="user", so transforms are skipped for people who ask.

Usage

import { motion } from "motion/react";
import { springs } from "@/lib/motion";

<motion.div whileTap={{ scale: 0.95 }} transition={springs.squish} />

{/* Sliding active pill */}
{active && <motion.span layoutId="pill" transition={springs.snappy} />}