Website design, motion and AI build guides

In short

A scroll-animated website should be judged on a working preview before it is built. A showcase page should be at least three viewport heights long. Looping motion that lasts more than five seconds needs a way to pause it. Core Web Vitals are measured at the 75th percentile of real visits.

Key takeaways

• The Journal currently holds 98 guides on animated websites, AI website builders, scroll motion and performance.
• Comparison guides carry a disclosure because Scrollhaus publishes them, and statements about other products come from their public websites.
• Google’s good Core Web Vitals thresholds are LCP of 2.5 seconds or less, INP of 200 milliseconds or less and CLS of 0.1 or less.

Sources and references

• Core Web Vitals thresholds (web.dev)
• WCAG 2.2: Pause, Stop, Hide (W3C)
• Google guidance on helpful, people-first content

Start with direction, not a blank prompt

A working reference lets you evaluate the story, hierarchy and motion before generation begins. Use AI credits to refine the identity and implementation instead of repeatedly asking a model to invent the entire direction.

Read the complete guide to starting from a proven direction.

Try the motion in working websites

Open these live examples to see how a scroll sequence, typography and section transitions work together. Compare the experience on desktop and phone, then return to the guides for implementation details.

• FLEDGE — The sabbatical school
• HIBISCA — Umbrellas that bloom
• HOP & SPOKE — Bunny bicycle couriers
• KAGE — Masks carved for the shadow
• KALEIDO — Atelier of colour
• KINGYO — The goldfish line
• KOTORA — The smallest blade
• MIMIC — Sunglasses worth changing for
• PETALA — A flower opera
• ROCKSTEADY — DJs for hire
• ROSE LUNE — A floral atelier
• SOFTEN — A mountain rest house