A set of buttons and controls I built from the scream canisters in Monsters, Inc.

I wanted every state to come from something the canister actually does in the film. The look comes from the Monsters, Inc. title cards, and the timing comes from going through the films frame by frame.

Role
Concept, interaction and motion design
Timeline
3 days, 7 design rounds
Deliverables
8 interactive design boards and a developer handoff
References
The Monsters, Inc. and Monsters University title sequences, film stills and a Disney Parks canister

Fill a canister

Every control in action

The loader

Two variations of the loader design, running on the same 1.42 second loop.

Variation 1: Full lineA canister gets clamped, filled, sealed and dropped through a trapdoor.
Variation 2: Compact lineA smaller line for loading in place. The full canister rolls off the end of the belt.

Why a scream canister?

In the movie, a scream canister fills up, seals, overloads and gets tagged out. Buttons do all of that too, so I gave each state a canister mechanic.

Sight glass
Progress. Seven cells fill in half a second.
Check valve
Busy. Extra clicks during a fill get ignored, and the cog jams.
Overpressure
Error. The valve blows and a red pen circles the cause. The same button retries.
Lockout tag
Disabled. A danger tag says why the button is locked.
Hold to seal
Confirm. Hold for a second to lock the cap.
Venting
Undo. The canister drains, faster than it filled.

Made the way the films were made

I went through the Monsters, Inc. and Monsters University title sequences one frame at a time.

Motion curves measured from the movies

Instead of grabbing stock easing curves, I measured mine from the films. I tracked 24 moves across the title cards and the Monsters University opening credits. One of them is a logo landing. It squashes from 33 px to 24 px over three frames.

  • Frame 1, 1.20 sThe logo lands, 33 px tall.
  • Frame 2, 1.24 sSquashed to 27 px.
  • Frame 3, 1.28 sFully squashed at 24 px, held for 2 frames.

The button press uses the curve I fit through those frames. Its first drawing lands at .661, right where the logo sits on frame 2.

02/3full 1.20 s1.24 s1.28 s Frame 2 sits two thirds downDrawing 1 of the press: .661

All 24 moves came down to 12 curves: press, release, snap, arrive, rise, drop, glide, run, overshoot, overshoot-soft, settle and whip.

What surprised me is how gentle the curves in the films are. The punch comes from the timing. Squashes hold for two frames, launches take one, and stops are sudden, so the buttons copy the timing too.
The press, release and snap curves from the motion board, each plotted against its tracked frames.
White dots are tracked frames, the yellow line is the fitted curve, and the purple steps are that same curve cut into drawings.

Timed in drawings

I counted every move in drawings at 24 frames per second. A press is two drawings (83 ms), a release is three (125 ms), and a fill takes the film's half second.

Eight drawings of the capsule button, from rest through the press and the fill to the seal.
  1. 02Anticipation. The dial winds back 15° before it cranks.
  2. 03The dial whips to 32° and the fill starts.
  3. 05Cell 7 holds for an extra drawing.
  4. 06Twist-lock. The gauge flashes.
  5. 07Follow-through. The check pops and three lines fly out.
  6. 08Settled at 710 ms.

Title lettering from the title cards

Letters drop in one at a time, and one always shows up late, just like the title cards.

Eight frames of a title falling in, letter by letter.
  1. 01The T enters stretched.
  2. 02Smear frame.
  3. 03Impact squash, on ones.
  4. 04Rebound, on twos.
  5. 05The late M dangles over its empty spot.
  6. 08The last letters pop yellow.

An exposure sheet for buttons

The more often you see a moment, the shorter I made it. Hover has no delay. A seal, which you only see now and then, gets a full twist-lock.

The exposure sheet: each moment, how often it is seen, why it moves, and its length as blocks of drawings.

Drawn from the real prop

I drew the canister from the official Disney Parks canister and checked it against film stills, down to the flat top, the wider cap and foot, the recessed bands and the seven-cell window. Seven cells of 1,200 SUV add up to the 8,400 SUV on the prop.

Flat cut paper

The title cards are flat paper shapes with no outlines, so the canisters, loader and titles follow that rule too. I hand cut the buttons at first, but smooth pills worked better as controls, so the paper look stayed with the illustrations.

Accessibility

  • Every control has a focus ring, in every browser.
  • Disabled buttons stay reachable by keyboard and tell you why they're locked.
  • With reduced motion on, nothing moves, and state still shows through color.
  • Loops stop when they scroll off screen.

Developer handoff

The handoff has the tokens, a state matrix, all 12 curves as CSS, timing for every move and an accessibility checklist. The motion is plain CSS with no animation library.