The paper-slip menu
Transitions, Hover
NewLifetime
Back to the library
The liquid grid
A full-screen grid of cells that re-proportions under the pointer with a long lag, and a pill-shaped logo that snaps open.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.
The code for this animation is part of lifetime access.
The preview stays open: watch it, slow it down, try it on your phone.
Lifetime accessWhat it does
The screen is divided into thin-bordered cells with different radii: tight corners, wide corners, pill ends. Moving the mouse, columns widen and narrow and rows rise and fall: the grid chases the pointer with a long lag and feels liquid. On entry the grid breathes from slightly smaller to full size and the logo assembles in the middle: three square pills that snap open to their word’s width, and words coming out of a blur. If nobody moves, the grid wanders on its own.
How it works
Sizes in CSS variables
The grid is made of nested grids; column widths and row heights live in variables (--c1, --r1…) used in grid-template-columns and grid-template-rows. Changing one variable re-proportions everything without touching the cells.
The long lag
State lives in an object of numbers; gsap.quickTo makes it chase the pointer position in 1.2 seconds with power3, and on every frame the numbers become CSS variables. The lag is what makes it liquid.
Pills that snap open
The pills start square (as wide as they are tall) and go to their word’s measured width on a custom curve 0.754, 0.007, 0.094, 0.989: still for a long time, then it snaps and brakes. The words arrive from blur(6px).
On its own
If the pointer has not moved for two and a half seconds, a slow curve (two sines at different speeds) takes its place. With a finger the grid follows the touch: the stage has touch-action none.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
RITARDO | script.js | 1.2 | Seconds the grid takes to reach the pointer: higher, more liquid. |
MISURE | script.js | c1 34→58vw, r1 70→36%… | For each size, the value with the pointer at one end and the other, and on which axis. |
SCATTO | script.js | 0.754, 0.007, 0.094, 0.989 | The pills’ curve. |
border-radius delle celle | style.css | misti | Keep them different from each other: with a single radius it looks like a table. |
When to use it
For the opening of a report, an event or a brand that wants to feel like a living interface. Empty cells are a choice: if you put images in them, keep the same lag.
On phones
The cells follow the finger; without touch they wander on their own. The logo stacks into a column and the side labels disappear.
With reduced motion
Still grid, logo already open.
Pitfalls
- Set min-width: 0 and min-height: 0 on cells and columns: without them a cell will not shrink below its content and the grid will not narrow.
- Do not update the variables on every pointermove directly: the lag is the point. Use quickTo on numbers and write the variables once per frame.
- Measure word widths after document.fonts.ready and clear the fixed width at the end of the entrance (clearProps), or rotating the screen pushes the word out of its pill.
- The automatic drift must stop when someone moves the pointer, otherwise the two fight over the grid.
Libraries
GSAP 3.15.0, CustomEase (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.
Weight: 8.3 KB of our own files.
Testing
Tested on 27 September 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
