Staging motion · 2026
Directing the Interface
Four staging moves I used to direct this site.
Making something move is easy. Deciding what should move, when it should move, and what someone should understand because of it is the real work. When I rebuilt my portfolio, I didn’t want animation as a polish pass at the end—I wanted it to shape how the site is read.
Gestalt helped me see how the eye groups a scene. Theater gave me language for directing that over time: who enters, what recedes, what stays continuous. The demos below are the four staging moves I ended up using.
Before the easing curve
The question behind every animation
Before I touch duration or easing, I ask four questions. Each maps to a staging move.
- 01What is the subject?
- 02What belongs together?
- 03What should remain continuous?
- 04What is about to happen?
| Perceptual need | Staging move |
|---|---|
| Separate subject from environment | Spotlight |
| Make related elements behave as one unit | Ensemble |
| Preserve an object through change | Set Change |
| Prepare the viewer for a larger action | Wind-Up |
Act I · Figure / Ground
One subject holds the light
A stage can’t ask the audience to look everywhere at once.
When everything stays equally bright and active, the viewer has to decide what matters while the UI keeps competing for attention. A confirmation dialog may sit above a dashboard, but if the charts and controls stay loud, the dialog never really becomes the foreground—it’s just another rectangle in a busy scene.
Making the modal enter more dramatically doesn’t fix that. Relighting the stage does. Soften the dashboard, drop contrast, use a restrained blur and scrim so context remains without detail shouting. Only then does the publish dialog enter. Gestalt calls this figure and ground. Theater calls it a spotlight.
Workspace softens first. Dialog enters into clear figure.
Behind the staging
- Dialog and backdrop share one focus state—not two unrelated animations.
- Background contrast and detail drop before the dialog finishes entering.
- Focus moves into the dialog and stays there until it closes.
- With reduced motion, the spatial entrance goes away, but the figure–ground hierarchy stays.
ReactMotionFocus trapprefers-reduced-motion
Act II · Common Fate
The cast enters as one composition
A hero section is rarely one object.
Headline, supporting copy, CTA, preview—they’re one introduction. Animate each piece on its own timing and easing, and the composition stops feeling like a group. The eye groups by behavior too: shared direction, rhythm, and tempo.
I stage an entrance instead. The headline sets the trajectory. The supporting line follows. Controls come in a beat later. Timing is staggered, but the movement comes from the same system. They don’t enter simultaneously. They enter together.
Same direction and easing family; only delay differs.
Act III · Continuity & Closure
Keep the object while the scene transforms
Processing flows often replace the whole screen between steps.
A CSV upload starts as a compact row. If that row disappears into a spinner page, then a disconnected results screen, the file you chose never feels continuous—even when the job succeeds. Set change keeps the filename and icon in place while a progress path carries the same object through validation and analysis, then expands into the result.
Same file row throughout. Progress continues; the result expands from it.
Act IV · Anticipation
The beat before the change
Fast feedback still needs a cue when the next change is large.
A drawer that suddenly takes half the viewport can be technically responsive and still feel visually rude—the interface changed before you understood what caused it. Before a big stage change, I give a short cue: the export control compresses, the label shifts, it holds for a fraction of a beat, then the drawer enters. That small preparation says the action was received and something larger is coming. With reduced motion, I keep the immediate state change and drop the wind-up movement.
Control acknowledges first. Drawer follows on the next beat.
Finale · All four
Directing the full interaction
These four moves show up together in real product UI—including this site.
A single drawer can use all of them. Wind-Up prepares you before it opens. Spotlight softens the workspace once the drawer has focus. Ensemble coordinates the drawer title, controls, and footer. Set Change keeps the relationship between the trigger and the panel.
I start with what someone should understand in that moment, pick the staging move that supports it, and only then mess with springs and easing. Duration still matters—it just can’t invent the meaning on its own.
The browser already gives us a stage. I’d rather direct attention than make every component perform.