Skip to content
FreshlyCited

§06 · Motion

Every page tells one story.

Our animations act out the customer's real work in three beats: the problem, what we do, what you get. The beats carry the meaning as text, so the scene can stay decorative, and anyone who prefers less motion gets the finished frame at once.

Six rules for moving things.

  1. 01

    One story, three beats

    01 · The problem → 02 · What we do → 03 · What you get. The beats carry the story as text; the scene is decorative.

  2. 02

    One signature animation per page

    The story card on guides, docs and the blog; one scene per section on the home page. Never stack competing animations.

  3. 03

    Simulate the real work

    Real chips, real yoursite.com URLs and real edge cases: a messy paste, an "Already seen" skip, a refund. No abstract geometry.

  4. 04

    One focal point

    In the hero, the animation acts out the headline right under it. Nothing competes beside it.

  5. 05

    End on the end goal

    Every story ends on a call to action, by default "Check my pages free".

  6. 06

    Google at the centre

    Only Google ("Seen by Google") and Bing ("Sent to Bing") ever light up. ChatGPT and Perplexity read "We don't submit to it".

Twelve scenes, one per topic.

Pick the variant that matches what the page is about. Each one below is the real story card, playing the story of a live guide. Replay it, or click a beat to jump.

index-gate

The page waits at the index gate; the push opens it; the page is filed and re-checked.

Use it for: Getting a page into the index (the default).

Live on: /ai-search-optimization

The story · 3 steps

Illustration with sample pages, not your data.

Check my pages freeFree plan: 10 free links to try (once you verify your email), then 100 free checks a month, no card.

Timing and easing.

Scenes switch state on data-beat and CSS transitions do the motion. The home page's scroll scenes use GSAP ScrollTrigger.

Motion timing
ItemValue
Story beats3,000 / 3,200 / 3,400 ms; plays once at 35% in view; Replay button; beats are clickable
Scene easingcubic-bezier(.2, .7, .2, 1)
Pop-in (ig-pop)0.35 s ease-out: a 4 px rise, 0.98 → 1 scale
Attention flash (ig-flash)1.2 s gold wash, once or twice, never looping
Footnote pulseAn unlit [1] pulses gold every 1.4 s until it lights
Reduced motionEverything sits inside prefers-reduced-motion: no-preference. Otherwise the end state shows at once, every beat readable

Less motion, same story.

Every animation sits inside prefers-reduced-motion: no-preference. With reduced motion on, the card shows its last beat straight away, every beat stays readable and every control still works.

DoShow the end state at once, with all three beats readable

Don'tHide content until an animation finishes

DoMark the scene aria-hidden and let the beats carry the story

Don'tPut meaning only in motion or only in colour

DoFlash gold once or twice to draw the eye

Don'tLoop an attention flash, or stack competing animations

Scenes for the blog and docs.

Seven more variants, made for the blog index and the API and MCP docs.

Blog and docs variants
VariantThe sceneUsed on
pressAn article comes off the press, into Google's index, then surfaces in a search and an AI Overview/blog
mcp-connectA terminal: an agent's tool call, a curl, or AGENTS.md driving the callMCP, REST API and AGENTS.md docs
client-installThe client's own three steps: install, connect, first tool callPer-client install docs
tool-sortThe MCP tools file from a jumble into their groupsTool reference
recipe-timelineA recipe's steps on one line, each with the tool it callsRecipes
oauthThe real OAuth 2.1 handshake as a sequence diagramAuth docs
rate-windowA fixed window of 60 a minute; the 61st request gets 429 and Retry-AfterRate limits