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
};