FOR FRAMER BUILDERS

Your site moves beautifully. Does the eye follow?

Framer makes motion effortless — which means motion is now your message's biggest competitor. Scan any Framer site and see the one track no timeline shows: where a first-time eye actually goes in the first 3 seconds.

Free · works on .framer.website previews too

home — effects timeline0:00 ▸ 0:03
hero.fade-up
badge.spring
cards.stagger
marquee.loop
bg.parallax
eye.path
NOT KEYFRAMED — NOBODY DIRECTED IT
Five tracks animate. The eye can only follow one thing at a time — and right now, nothing decides which.

The 3 tells of a motion-first site

Motion outbids the message

The eye is hardwired to track movement — a looping marquee or floating blobs will beat your static headline every single time. The heatmap shows it bluntly: heat on the decoration, cold on the promise.

The parallax hides the CTA

At load, your CTA sits below a full-viewport animated hero. The first 3 seconds — the ones that decide bounce — are spent on an intro the visitor didn't ask to watch.

Every section enters, none arrives

When everything fades-and-springs in, entrance stops being information. The eye habituates by section two; by section four the choreography reads as noise with easing.

DIRECT THE EYE LIKE YOU DIRECT THE MOTION

  • Scan the static frame first: pause everything (or scan the published page — we capture after load settles) and check the heat hits headline → proof → CTA.
  • One hero motion maximum, and make it carry the message (the product doing the thing), not ambiance around it.
  • Loops (marquees, floating shapes) are attention taxes billed every second — keep them out of the same viewport as the CTA.
  • Re-scan after each edit: deterministic model, real deltas. Ship when the eye path matches the story you're telling.

Keyframe the last track: the eye.

Free scan, 30 seconds — preview or production.