Tuning lab

Tune the feel

Drag a slider, then press Replay or open any page: the whole site uses these values.

Gentle spring

Snappy spring

Text stagger

Light defines form over time.

Reveal

Current tokens as code
export const defaultTokens: MotionTokens = {
  "springs": {
    "snappy": {
      "stiffness": 420,
      "damping": 32,
      "mass": 0.6
    },
    "gentle": {
      "stiffness": 140,
      "damping": 22,
      "mass": 1
    }
  },
  "durations": {
    "page": 0.55,
    "marquee": 28
  },
  "ease": {
    "out": [
      0.22,
      0.8,
      0.12,
      1
    ]
  },
  "distance": {
    "reveal": 28,
    "parallax": 90
  },
  "stagger": 0.045,
  "scrollLerp": 0.1,
  "camera": {
    "ease": 5,
    "autoRotate": 0.5,
    "scrollTurn": 0.75
  },
  "steps": {
    "stagger": 0.5,
    "drop": 140,
    "slide": 200,
    "jump": 1,
    "length": 1
  },
  "loop": {
    "pixelsPerSecond": 14
  },
  "braille": {
    "press": 0.92,
    "rise": 10,
    "announce": 0.8
  },
  "explode": {
    "stagger": 0.4,
    "length": 2.2,
    "jump": 1.2
  },
  "fold": {
    "length": 2.6,
    "jump": 1.2
  },
  "draw": {
    "length": 1.6,
    "start": 0.12,
    "end": 0.82
  },
  "crossfade": {
    "length": 0.8,
    "lead": 0.3,
    "fade": 0.5,
    "cover": 0.6,
    "reveal": 0.5,
    "draw": 0.8,
    "heads": 0.12,
    "hold": 0.6,
    "jump": 1.2
  },
  "checker": {
    "length": 2.2,
    "start": 0.14,
    "end": 0.86,
    "fade": 0.06,
    "last": 0.28
  },
  "rise": {
    "length": 2.6,
    "jump": 1.2
  },
  "sequence": {
    "length": 5,
    "jump": 1.4
  },
  "magnetic": 0.35,
  "hoverScale": 1.015,
  "textRise": 110,
  "labDemoTravel": 400
};