Tile Grid Preloader Reveal
What it does
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.
How it's built
| Category | preloader |
|---|---|
| Tech | gsap |
| GSAP plugins | Flip, SplitText |
| Complexity | page |
| Performance cost | medium |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# 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 page and a grid of **frosted glass tiles** (always an odd number of rows and columns, plus one hidden ring outside the viewport) **fills in random order**. A dark square **progress marker** sits on the middle row and **hops with GSAP Flip** across four stops — showing `25`, `50`, `75`, then a small logo — while the stops it leaves turn back into glass. When the marker lands in the centre, the veil is removed, and every tile **folds down on its top edge** (`scaleY → 0`, random order), briefly **blurring the hero photo** underneath through the glass; the hero then settles from a slight zoom, and the **headline characters, subtitle lines and nav words rise out of their masks**.
## Tech
Vanilla HTML/CSS/JS with ES module imports. `gsap` (npm) plus the plugins **`Flip`** and **`SplitText`**. Fonts: **Barlow Condensed** (800), **DM Mono** (500), **DM Sans** (500–600).
## Layout / HTML
```html
<div class="tg">
<div class="tg-preloader" aria-hidden="true">
<div class="tg-preloader__bg"></div>
<div class="tg-preloader__grid"></div>
<div class="tg-marker"><span class="tg-marker__value">25</span></div>
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in