What Microsoft Fluent 2 does
Fluent 2 states four motion principles: functional, natural (following physical laws such as inertia, gravity, weight and velocity), consistent and appealing; its motion page names ease-in, ease-out and ease-in-out but gives no values. Fluent UI's global tokens supply them: decelerate max cubic-bezier(0.1,0.9,0.2,1), mid cubic-bezier(0,0,0,1), min cubic-bezier(0.33,0,0.1,1); accelerate max cubic-bezier(0.9,0.1,1,0.2), mid cubic-bezier(1,0,1,1), min cubic-bezier(0.8,0,0.78,1); easy-ease max cubic-bezier(0.8,0,0.2,1) and easy-ease cubic-bezier(0.33,0,0.67,1). Durations run ultra fast 50, faster 100, fast 150, normal 200, gentle 250, slow 300, slower 400 and ultra slow 500 ms.
Microsoft Fluent 2's system, as published
- Curves · Decelerate Max
- cubic-bezier(0.1,0.9,0.2,1)
- Curves · Decelerate Mid
- cubic-bezier(0,0,0,1)
- Curves · Decelerate Min
- cubic-bezier(0.33,0,0.1,1)
- Curves · Accelerate Max
- cubic-bezier(0.9,0.1,1,0.2)
- Curves · Accelerate Mid
- cubic-bezier(1,0,1,1)
- Curves · Accelerate Min
- cubic-bezier(0.8,0,0.78,1)
- Curves · Easy Ease Max
- cubic-bezier(0.8,0,0.2,1)
- Curves · Easy Ease
- cubic-bezier(0.33,0,0.67,1)
- Curves · Linear
- cubic-bezier(0,0,1,1)
- Duration Ms · Ultra Fast
- 50
- Duration Ms · Faster
- 100
- Duration Ms · Fast
- 150
- Duration Ms · Normal
- 200
- Duration Ms · Gentle
- 250
- Duration Ms · Slow
- 300
- Duration Ms · Slower
- 400
- Duration Ms · Ultra Slow
- 500
- Principles
- functional, natural, consistent, appealing
Why it works
Having each curve in three strengths lets the same gesture be gentle or punchy without switching curve families. The named duration steps keep timing consistent across products.
Best for
Productivity software, enterprise apps and calm product marketing where motion should feel natural and functional
What breaks it
- Mixing strengths within one piece
- Motion with no function
- Page transitions longer than 500 ms
Sources
- fluent2.microsoft.design: Fluent 2 motion principles and easing types (no numeric values on the page)
- github.com: Fluent UI global curve tokens
- github.com: Fluent UI global duration tokens
Steal it for your brand
The same system, written in your colors, type and shapes. Nothing of Microsoft Fluent 2's look comes with it.
The recipe
- Use the recipe's curves and durations, which follow the brand's motion keyword (gentle for calm, sharp for crisp, overshooting for playful); keep the same strength everywhere in the piece.
- Decelerate things entering, accelerate things leaving, and easy-ease things that move within the view.
- Keep exits shorter than entrances and page-level changes within 500 ms.
- Give every motion a job: show where something came from, confirm an action, or guide the eye; cut motion that only decorates.
What you'll need
- The customer's motion style keyword
Recipe as JSON
{
"recipe": {
"easing_enter": {
"by": "style.motion",
"map": {
"calm": [
0.33,
0,
0.1,
1
],
"crisp": [
0,
0,
0,
1
],
"playful": [
0.1,
0.9,
0.2,
1
]
},
"default": [
0,
0,
0,
1
]
},
"easing_exit": {
"by": "style.motion",
"map": {
"calm": [
0.8,
0,
0.78,
1
],
"crisp": [
1,
0,
1,
1
],
"playful": [
0.9,
0.1,
1,
0.2
]
},
"default": [
1,
0,
1,
1
]
},
"easing_move": {
"by": "style.motion",
"map": {
"calm": [
0.33,
0,
0.67,
1
],
"crisp": [
0.8,
0,
0.2,
1
],
"playful": [
0.8,
0,
0.2,
1
]
},
"default": [
0.33,
0,
0.67,
1
]
},
"duration_enter_ms": {
"by": "style.motion",
"map": {
"calm": 300,
"crisp": 200,
"playful": 250
},
"default": 250
},
"duration_exit_ms": {
"by": "style.motion",
"map": {
"calm": 200,
"crisp": 100,
"playful": 150
},
"default": 150
},
"duration_page_ms": {
"by": "style.motion",
"map": {
"calm": 500,
"crisp": 300,
"playful": 400
},
"default": 400
}
},
"steps": [
"Use the recipe's curves and durations, which follow the brand's motion keyword (gentle for calm, sharp for crisp, overshooting for playful); keep the same strength everywhere in the piece.",
"Decelerate things entering, accelerate things leaving, and easy-ease things that move within the view.",
"Keep exits shorter than entrances and page-level changes within 500 ms.",
"Give every motion a job: show where something came from, confirm an action, or guide the eye; cut motion that only decorates."
]
}See it working
- Microsoft Fluent 2: The motion principles and easing types the tokens implement
The lesson
Give each easing curve a few named strengths and name your durations, so a gesture can be gentler or punchier without a new curve.
The move
A chart plotted from Fluent's tokens shows three cards, "Decelerate", "Accelerate" and "Easy ease", each with curves in blue shades on a square graph and the values listed beneath it, such as "max 0.1, 0.9, 0.2, 1". Two rows of bars below list eight durations from "ultraFast 50 ms" to "ultraSlow 500 ms".
Why it works
- Our readOverlaying a family's strengths on one graph shows how max, mid and min differ in steepness, which a list of numbers hides.
- Our readBar lengths grow with each duration, so a timing can be picked by size and reused under the same name in every product.
- Vendor claimFluent UI's published global tokens define these curves and the eight duration steps this chart plots. (source)
What not to copy
Don't copy the exact numbers. Keep the structure: few curve families, a strength scale inside each, and a short named duration ladder.
