Archive folders
Glass folders that lean toward you, open, and spread out what is inside.
Hover a folder, click it, then click a sheet: it takes you to that project. The + drops the next project into Websites, and ··· opens a menu.
Custom animation / motion design
Custom animation, motion, and interactive elements that set the site apart from a template look.
from HUF 60,000
A folder with a back panel, files inside, and a frosted glass sheet in front that blurs whatever moves behind it. Hover and it leans toward you; click and the work fans out, every sheet a real link.
- backdrop-filter
- CSS 3D
- Pre-rendered art
How it works
Three layers sit behind one another: a back panel with a picture, the files in the middle, and the glass in front, which blurs what is behind it (CSS backdrop-filter). The folder is not a picture of a folder: the files are real elements between the two panels, so the glass frosts them live as they move. The lean, the fan and the bounce are worked out by CSS on the graphics card; JavaScript only passes on whether the folder is open and where the pointer is.
The back picture is not made on the visitor's machine: it is a pre-rendered image of a few tens of kilobytes, so at rest the folder costs nothing and does no calculation. The folder can also paint a pattern by itself, but it does that in small slices between frames, and only once it is near the screen. It works from the keyboard (Enter, arrows, Esc), and for visitors who ask for reduced motion everything simply snaps into place.
Want something like this on your own site?
Motion and WebGL are part of what I do. We'll work out what fits your site while keeping it fast.
Get an estimate
Content editorChange your site's content without coding, and see the result at once.