Preloader (intro sequence)
A branded loading layer that plays before the main experience is revealed, useful only when real assets must become ready first.
See it
What it is
A preloader is the first rendered layer: a logo, progress mark, or short sequence that holds the stage while the experience behind it becomes ready. It was a staple of Flash-era websites, where a .swf really did have to stream in before its timeline could play, and Skip Intro was a standard button.
Today it earns its keep only when there is a real readiness boundary, such as a WebGL scene, a game level, or a tightly timed media sequence. Drive progress from assets that actually matter and let the user through as soon as the minimum set is ready. A normal content page should render useful content instead of staging an intro.
Gotcha: a preloader hides waiting but does not improve loading speed. Fake counters that race to 99 percent advertise that fact, and replaying the intro on every visit turns branding into a toll gate. Provide a timeout and error path, avoid blocking navigation, and skip the sequence for reduced motion and repeat visits.
Ask AI for it
Build a branded preloader for this WebGL experience. Track the actual critical asset promises with Promise.allSettled(), including texture fetches, HTMLImageElement.decode(), and 'document.fonts.ready', and map completed items to a visible progress bar. Reveal the app as soon as the critical set settles, or after an 8 second timeout with an inline retry message. Exit the loader with a 250ms Web Animations API opacity fade, store completion in sessionStorage so it runs once per tab, and skip straight to the app under 'prefers-reduced-motion: reduce'.