Preloader

Tile Grid Preloader Reveal

by Vanguardia · motionprompts.dev

Load sequence: an odd-numbered grid of frosted glass tiles fills in random order while a progress marker hops with GSAP Flip across four stops on the middle row (25, 50, 75, then the logo). The veil then drops away and every tile folds on its top edge in random order, briefly blurring the hero photo underneath, before the headline characters, subtitle lines and nav words rise from their masks.

Type: Web motion
Framework: GSAP
Trigger: load
Duration: 0.125–2.2s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power3
Complexity: 3/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, Flip, SplitText

random-stagger tile fill, Flip marker hops between grid stops, random-stagger scaleY collapse over a blurred hero, masked text rise

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev9,759 chars

# Tile Grid Preloader Reveal — Glass Tiles, Flip-Hopping Progress Marker & Masked Hero Text

## Goal
Build a landing-page load sequence. A pale veil covers the…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.