A folder is a useful lie. It says that a project has a shape, an inside, and a small set of things worth pulling out. This experiment gives the work archive that physical grammar at three levels of fidelity: an icon that points, a drawn plate that introduces itself, and an object that opens.
All three draw from the same four categories (experience, projects, labs, and crafts) and the same underlying data. Only the amount of ceremony changes.
Icon
The lightest version: a lucide folder and a label. Hovering lifts and tilts the folder, borrowing the gesture of picking something up. It is CSS only, with no state to manage.
Illustrated
A drawn folder with a tab, a work/route label, an item count, a preview plate, and a View action inside the folder itself. The silhouette and previews are built in inline SVG, so a Figma export can replace the plate without changing the structure.
Interactive
The full object. Hover tips the folder and teases its featured items; activation opens it further. Shown here with the projects collection.
States
- Resting
- A closed folder keeps its label and a hint of the items inside.
- Preview
- Pointer hover or keyboard focus fans the items out slightly.
- Open
- Click, tap, or Enter lifts the flap and the items clear the pocket.
- Reset
- Activate again, press Escape, or click outside to close.
Note
One internal state covers resting, preview, and open, so the three can never disagree. The flap and the cards are CSS transforms; Motion only retargets them, which keeps the sequence interruptible and cheap. Reduced motion removes the movement without removing a state.
The icon and illustrated variants are links first. The interactive variant is a button with a link in its panel, so navigation never hides inside a state toggle.
Footnotes
- Rare UI's Folder Component was the behavioral reference for the hover fan-out and the opening flap. The composition, structure, and visual treatment here are original.
- The icon treatment follows the existing /work category navigation, extended with a fourth folder for experience. The route is archived, but the original taxonomy is kept intact.
If you enjoyed reading this or found it insightful, feel free to share it with others or send feedback. It helps me keep on researching and writing.
Say hiPublished on Oct. 23, 2026