Interaction density

The rule

Do not put motion on everything.

A page should have a few signature interactive surfaces and many calm ones. When every surface responds, none of them mean anything — the eye has nowhere to land, and the page reads as restless rather than alive.

A working budget

For a typical screen:

• 1 signature interaction (Jelly Card, Liquid Card, Morph Card)
• 2–4 supporting responses (Spotlight Card, Glow Border, a Magnetic Button)
• everything else calm: static surfaces, plain buttons, ordinary lists

How to choose which one is signature

The signature interaction should sit on whatever the page is *for*: the hero demo, the featured product, the thing you would point at if you had one sentence to explain the page. Never on chrome, and never on something the user has to read carefully.

Symptoms of saturation

• more than one thing moves under a single pointer sweep
• a grid where every card leans
• interactions on elements the user must read while they move
• a page you cannot screenshot at rest and still understand

In a grid

Grids are where density goes wrong most often. Use one Jelly Card as the feature, Spotlight Cards for the rest. If every item deserves emphasis, none of them do — drop the whole grid to a calm surface and put the emphasis somewhere else.