One long curve for big things

Big surfaces and strokes take 700ms on a curve that settles slowly.

Curve measured on linear.app; Linear publishes no official design.md.

A full-height panel

Open the panel, then close it before it lands.

700ms linearBad
transition: transform 700ms linear
700ms long curveGood
transition: transform 700ms cubic-bezier(0.32, 0.72, 0, 1)

Exception to the site's 300ms UI limit: 700ms is for full-height panels and drawn strokes only.

A drawn stroke

Draw the line, then reset it mid-way.

700ms linearBad
stroke-dashoffset 700ms linear
700ms long curveGood
stroke-dashoffset 700ms cubic-bezier(0.32, 0.72, 0, 1)
.panel {
  --long: cubic-bezier(0.32, 0.72, 0, 1); /* measured */
  transform: translateX(100%);
  transition: transform 700ms var(--long);
}
.panel[data-open] { transform: none; }

.stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 700ms var(--long);
}
.stroke[data-on] { stroke-dashoffset: 0; }

Why it matters, pros and cons

Why it matters

  • A big surface travels far; the curve front-loads that distance.
  • The long tail lets the eye settle instead of snapping to a stop.
  • Stroke drawing gets the same start-fast, land-soft feel.

Pros

  • Movement starts within a frame, so it never feels laggy.
  • Interrupting mid-way reverses smoothly from where it is.
  • One curve for every large surface keeps them related.

Cons

  • Over 300ms for UI; keep it to panels and strokes.
  • Small elements on 700ms feel sluggish.
  • Measured from the live site, not a published spec.