Design tokens

Motion

Nothing in Novix UI eases linearly. Motion is a language: spring physics for physical objects, cubic curves for typographic transitions.

Springs

Three presets cover every interaction we ship. Click any preset to copy its spring config.

snap

Buttons, tabs, toggles — anything you press.

k: 500 · c: 32

soft

Cards, popovers, sheets — anything that lifts.

k: 260 · c: 28

glide

Page transitions and hero reveals.

k: 140 · c: 22

Usage in motion/react

Apply spring tokens to motion components via the transition prop:

tsx

import { motion } from "motion/react";
 
// The "snap" spring preset for interactive elements
const snapSpring = { type: "spring", stiffness: 500, damping: 32 };
 
export function AnimatedCard() {
  return (
    <motion.div
      whileHover={{ scale: 1.02, y: -4 }}
      whileTap={{ scale: 0.98 }}
      transition={snapSpring}
      className="bg-surface border border-border rounded-xl p-5"
    >
      <h3 className="text-foreground font-semibold">Interactive Card</h3>
    </motion.div>
  );
}

Reduced motion

Every animation in Novix UI checks prefers-reduced-motion. When enabled, springs collapse to instant transitions; only opacity fades remain.

tsx

import { useReducedMotion } from "motion/react";
 
const reduce = useReducedMotion();
const transition = reduce
  ? { duration: 0 }
  : { type: "spring", stiffness: 500, damping: 32 };