VISUAL PHYSICS TUNER

config.ts Generator & Studio

Customize timing curves, displacement travel, and scale factors. See your physics animate in real time and copy the generated config into your repo.

1. Easing Curve (cubic-bezier)

[0.16, 1, 0.3, 1]

Blaze Snappy (Default)Swift arrival with gentle, natural landing decelerationSmooth FluidSilky continuous deceleration curve for editorial contentPunchy DynamicSlight spring overshoot for high-energy buttons and badgesStandard EaseOutClean industry standard ease-out curve

2. Duration & Travel Distance

duration.base:

0.85s

duration.fast:

0.65s

travel.md (Fades):

28px

travel.sm (Slides):

16px

staggerStep (List delay):

0.08s

3. Zoom & Blur Factors

zoom.in:

0.90x

zoom.out:

1.08x

blur.from:

8px

Live Physics Sandbox

slideUp (travel.sm=16px)

Slide Up Safe

fadeUp (travel.md=28px)

Fade Up Entrance

zoomIn (0.90x → 1x)

Zoom In Spring

blurIn (8px → 0px)

Blur In Focus

stagger sequence (0.08s delay per child):

Item 01

Item 02

Item 03

Item 04

Item 05

lib/motion/config.ts

// Yours. Every number lives here, and the update command ships every other file in this
// folder but never this one — new values arrive as a diff to paste, not as an overwrite.

import type { ViewportOptions } from "motion/react";

type CubicBezier = [number, number, number, number];

export const duration = {
  press: 0.12,
  fast: 0.65,
  base: 0.85,
  pulse: 1.1,
} as const;

export const travel = { sm: 16, md: 28 } as const;

export const staggerStep = 0.08;

export const ease: CubicBezier = [0.16, 1, 0.3, 1];

export const fade = { from: 0, to: 1 } as const;

export const zoom = { in: 0.9, out: 1.08 } as const;

export const pressScale = 0.97;

export const tiltAngle = 2.5;

export const blur = { from: 8, to: 0 } as const;

export const glow = { from: 0, to: 24 } as const;

// A finite count, not Infinity: the halo is a `filter`, and motion only cuts POSITIONAL keys
// short under a reduced-motion preference — a looping glow would run forever with no escape.
export const pulseRepeat = 2;

export const rest = { x: 0, y: 0, scale: 1 } as const;

// `amount` must be "some", never a number — a numeric threshold leaves a taller-than-viewport
// element stuck at its initial state forever.
export const viewport: ViewportOptions = {
  once: true,
  amount: "some",
  margin: "0px 0px -20% 0px",
};

Paste directly into your repository100% Type Safe