Design System · Motion

Motion & Animations

The VELYON motion language. A unified system of springs, easings, and choreographed sequences engineered for interfaces that feel inevitable. Every curve, every duration, every delay has intent.

01 — Entrances

Entrance Animations

Foundational entrance choreography. Each variant uses the VELYON signature ease [0.22, 1, 0.36, 1] for elegant deceleration.

Fade In

Opacity 0 → 1

tsx

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
/>

Fade Up

Translate + opacity

tsx

<motion.div
  initial={{ opacity: 0, y: 24 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
/>

Fade Down

Descends into view

tsx

<motion.div
  initial={{ opacity: 0, y: -24 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
/>

Fade Left

Enter from right

tsx

<motion.div
  initial={{ opacity: 0, x: 32 }}
  animate={{ opacity: 1, x: 0 }}
  transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
/>

Fade Right

Enter from left

tsx

<motion.div
  initial={{ opacity: 0, x: -32 }}
  animate={{ opacity: 1, x: 0 }}
  transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
/>

Scale In

Grows from 0.85

tsx

<motion.div
  initial={{ opacity: 0, scale: 0.85 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
/>

Scale Out

Shrinks from 1.15

tsx

<motion.div
  initial={{ opacity: 0, scale: 1.15 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
/>

Blur In

Resolves from blur

tsx

<motion.div
  initial={{ opacity: 0, filter: "blur(12px)" }}
  animate={{ opacity: 1, filter: "blur(0px)" }}
  transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
/>

Slide Up + Fade

Composite motion

tsx

<motion.div
  initial={{ opacity: 0, y: 40, scale: 0.96 }}
  animate={{ opacity: 1, y: 0, scale: 1 }}
  transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
/>

Stagger Children

Sequential reveal

tsx

const container = {
  hidden: {},
  show: { transition: { staggerChildren: 0.1 } },
};
const item = {
  hidden: { opacity: 0, y: 24 },
  show: { opacity: 1, y: 0 },
};

02 — Physics

Spring Presets

Physically-modeled springs. Click any card to replay and feel the difference between stiffness and damping configurations.

Gentle

k:120 · d:14

tsx

transition={{
  type: "spring",
  stiffness: 120,
  damping: 14,
}}

Bouncy

k:300 · d:10

tsx

transition={{
  type: "spring",
  stiffness: 300,
  damping: 10,
}}

Stiff

k:400 · d:30

tsx

transition={{
  type: "spring",
  stiffness: 400,
  damping: 30,
}}

Smooth

k:200 · d:20

tsx

transition={{
  type: "spring",
  stiffness: 200,
  damping: 20,
}}

03 — Curves

Easing Curves

The mathematical bones of motion. From standard easing to the VELYON custom cubic-bezier.

ease

easeIn

easeOut

easeInOut

velyon

04 — On Scroll

Scroll Animations

Motion that responds to the viewport. Scroll up and down to retrigger the reveal sequences.

Viewport-Aware Composition

Elements enter as they cross into the viewport, with whileInView driving timing. The choreography layers content for narrative pacing.

Composable Sequences

Stagger delays cascade through children — number, headline, body — each separated by 100ms. The eye reads in rhythm with motion.

Bidirectional Replay

Set once:false on the viewport prop to retrigger animations whenever an element re-enters. Use sparingly — restraint is luxury.

The VELYON Signature

All scroll motion uses ease [0.22, 1, 0.36, 1] for confident deceleration. The feel: arrivals that resolve, never abrupt, never sluggish.

05 — States

Loading States

The pause between intent and resolution. Considered loaders communicate progress without anxiety.

Skeleton Shimmer

Content-shaped placeholders

Pulse

Radial wave indicator

Spinner

Continuous rotation

Dots Bounce

Staggered vertical motion

VELYON.MOTION.v1.0