The 27.4-second reference recording contains repeated demonstrations of the same four phases. Frame inspection shows that pointer position—not a click or carousel state—controls the entire interaction.
01 / Setup
Installation
Copy the component stylesheet and preserve the panel and postage-stack hierarchy.
<link rel="stylesheet" href="/document-folder.css" />
02 / Anatomy
Three nested hover zones
.document-folder:hoverseparates the two front panels to reveal the pocket.:has(.postage:hover)raises the collection and recloses the panels behind it.- Hovering the exposed rear stamp translates and rotates only that document.
03 / Frame analysis
Observed motion phases
The source was sampled at 100ms during transitions and at 500ms across the full capture.
Side panels translate outward and rotate 18° around their inner hinges.
The two stamps scale and move upward as one preserved stack.
When the pointer reaches a stamp, the panels close behind the enlarged collection.
The rear stamp travels right and rotates to reveal its full printed face.
04 / Contract
CSS API
| Token / selector | Default | Purpose |
|---|---|---|
--document-folder-width | 17rem—22rem | Scales the complete object and its postage collection. |
--document-folder-green | #063f35 | Primary archive material color. |
--document-folder-ease | cubic-bezier(0.16, 1, 0.3, 1) | Shared physical settling curve. |
.postage--rear | Second layer | Receives the independent fan transform. |
05 / Behavior
Accessibility
The root can be focused to open the folder, each stamp is a native button, focus-visible mirrors hover, and reduced-motion users receive the same states without long transitions.