Genie Effect

Summary

A web recreation of the iconic Mac OS X Genie Effect that lets you drag-scrub browser windows through the classic fluid minimization animation, fully interactive mid-flight.

Visual description

A pale sage graph paper background holds three overlapping window panes with classic three dot title bars labelled quadrato, cerchio and triangolo. Two show generative line drawings, a blue rotated square spiral and an orange looping circular scribble, while the third plays a grainy archival video clip of an older man in glasses working at a bench beside a spotted disc. Along the bottom edge sit four small shape buttons, an outlined square, circle and triangle plus a solid green tile, and a fifth window is caught mid transition, stretched into a thin curved ribbon arcing up out of its dock position.

Key takeaway

Animate a window collapsing into its dock as a curved tapering ribbon rather than a straight scale down, so the motion path itself communicates where the panel went.

Reuse notes

Reach for this as a motion still reference. Pairs with experimental directions. Original by Peter Petrash.