Skip to content
Motion Atlas

Live examples of what AI can make for a website, each with the prompt that asks for it and the source to copy.

All examples / Compare

The same reveal on scroll, made two ways

Feature rows that fade and rise into place as they scroll into view, built twice. One is pure CSS on a scroll timeline (animation-timeline: view()): no script at all, and in a browser without scroll-driven animations the rows simply show. The other uses a small IntersectionObserver script with CSS transitions, which works in every current browser. Scroll inside each frame to compare; the note under each one names the words in its prompt that pick the technique.

Tamberlow · Features

Bookkeeping that keeps up with a busy stall

Five things that happen while you serve customers. Scroll on to see them.

  • Receipts in one snap

    Photograph a receipt and the amount, date and shop are filed for you.

  • Bank payments sort themselves

    Each payment lands in the right category before you open the app.

  • Tax totals, ready each quarter

    The figures your accountant asks for, added up as you go.

  • Polite nudges for late invoices

    One friendly reminder goes out a week after the due date, never more.

  • Locked with your fingerprint

    Every figure stays on your phone until you choose to share it.

Scroll inside ↓

Scroll reveal: feature rows that fade in as they enter

editorial harbor view timeline

Say 'animation-timeline: view() with animation-range: entry' for a pure-CSS reveal that follows the scroll itself, with no script; browsers without scroll timelines show the finished list.

Prompt tested

Tamberlow · Features

Bookkeeping that keeps up with a busy stall

Five things that happen while you serve customers. Scroll on to see them.

  • Receipts in one snap

    Photograph a receipt and the amount, date and shop are filed for you.

  • Bank payments sort themselves

    Each payment lands in the right category before you open the app.

  • Tax totals, ready each quarter

    The figures your accountant asks for, added up as you go.

  • Polite nudges for late invoices

    One friendly reminder goes out a week after the due date, never more.

  • Locked with your fingerprint

    Every figure stays on your phone until you choose to share it.

Scroll inside ↓

Reveal on entry: feature rows shown by an IntersectionObserver

editorial harbor intersection observer css transitions

Say 'IntersectionObserver adds an attribute, CSS transitions animate it' for a version that works in every browser and plays each row once on entry, at its own pace.

Prompt tested