Landing page motion

Hierarchy

A landing page has one job per section. Motion should follow that hierarchy rather than compete with it:

Hero            1 strong interaction
Feature section 2–4 lighter interactions
Navigation      subtle
CTA             one tactile response

Avoid every section competing for attention. If the hero and the feature grid and the pricing cards all move equally, the page has no shape.

Hero

One composed interactive moment beats four demos in a row. Let surfaces overlap and sit at different depths, and give the user something obvious to point at within the first second.

Do not add continuous ambient animation to fill space. Motion that happens without the user reads as a screensaver, and it competes with the copy they are trying to read.

Feature sections

Pick one card behaviour and repeat it. Mixing Jelly, Tilt and Liquid in a single grid makes the section look like a component showcase rather than a product.

Navigation

Subtle or nothing. Navigation is chrome; a menu that performs is a menu that distracts from what it is pointing at.

CTA

One tactile response — a Magnetic Button in open space, or a Ripple Button in a dense footer. Not both.

The screenshot test

Take a screenshot of the page at rest. If it does not communicate the product, motion will not fix it; it will only make the problem move.