Hero motion samples for overcode.io
Three ways to keep the idea you like (scattered words that arrange themselves, the mark merging into the wordmark top-left) without making the visitor scroll to read the headline. Same words, same type, same mark; only the timing differs. Built from the live page for WI-26. Nothing here is live.
Alands scattered, settles itselfFrame one is the same scattered words as today. They fly home on their own in about 1.2 s, no scroll needed. Scrolling then merges the mark into the header wordmark over about half a screen.Bscroll assembles it, or it finishes by itselfSame scroll-driven assembly as today, but four times shorter: one flick (about a third of a screen) brings the words home and starts the mark merge. If the visitor has not scrolled within 1.8 s, the words settle on their own.Cheadline readable from frame one, the rest settlesThe eyebrow and headline start only a little off their place, so they read at once. The lede and buttons do the full scatter and settle beneath them in about 1 s. Scroll merges the mark as in A.How to compare: open each sample fresh (reload), watch the first two seconds without touching anything, then scroll once. On a phone, do the same with one flick. The live site for reference: overcode.io (there the words only arrange after about a screen of scrolling).
Current wording is kept on purpose so the motion is the only thing being compared. The copy changes from the review (manufacturers, automation, one primary button) are a separate decision and work with any of the three.