All studies

Interaction

Budget slider

A thumbless bar slider: drag speed raises a wake of bars that trails the head and flattens as it settles, and the tiers the budget covers light up below.

08 / 74

Where it earns its place

A pricing or quote page where one range drives what is included: project budget, seat count, usage tiers.

What we changed

  • Built into a budget control from $15,000 to $80,000 that lights the engagement tiers it covers, from a landing page to a WebGL launch moment.
  • Kept the physics: a critically damped head, its velocity smoothed by a second spring, and a cos-squared wake that trails further behind than it leads.
  • Bar count follows the measured track width (one per 10 px), so the texture is identical in the grid card, on the stage and on a phone.
  • Kept the original's instant keyboard steps (arrows, Page keys, Home, End); bars now sit on a baseline so the wake rises like a wave, and reduced motion draws the same meter with no wake.
  • Cut the colour, crest, glide and smoothing props; lit bars are signal cyan, the rest nickel, and the focus ring sits on the track itself.