# Zoom-Out Mark Preloader ## Goal Build a full-viewport hero page for a fictional coastal smokehouse whose loading screen is not a loading screen. The page opens **completely white with a counter in the corner**, and when the counter reaches 100 the white recedes — because the white was never a veil. It was the inside of the brand's `+` mark, blown up until the solid crossing of its two arms covered the whole viewport. As the mark shrinks back to its normal size the hero photograph is **discovered around it**, not uncovered beneath it, and the mark comes to rest exactly on the `+` that sits between the two words of the headline. Then, and only then, the two words fly in from opposite edges, and once they have settled the mark turns 360° on its own axis. The one idea to get right: **there is one mark, not a veil plus a mark.** Everything else in this brief exists to keep that illusion from breaking. ## Tech Vanilla HTML/CSS/JS as `index.html` + `styles.css` + an ES-module `script.js` (`