TrueKind Landing Page Reveal
What it does
A preloader-to-hero landing reveal driven by a single GSAP timeline with a custom 'hop' ease: a two-digit counter rolls through milestone numbers (00, 27, 65, 98, 99) with a staggered vertical roll, the 'KindRoot' logo words slide together, a vertical divider scales up and fades, then two dark blocks wipe upward via clip-path while the background hero image scales from 1.5 to 1 and the nav, masked headline lines, paragraph and CTA pill slide and scale into place. Plays automatically once on page load.
How it's built
| Category | preloader |
|---|---|
| Tech | gsap |
| GSAP plugins | CustomEase |
| Complexity | page |
| Performance cost | light |
| 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.
# Skincare Landing Page Reveal — counter preloader into full-bleed hero
## Goal
Build a full-page preloader-to-hero reveal for a natural skincare brand landing page. On load, a single GSAP timeline (with a custom "hop" ease) rolls a giant two-digit counter through 00 → 27 → 65 → 98 → 99, slides the logo words together over a growing vertical divider, then wipes two dark overlay blocks upward with clip-path while the background hero image de-zooms from 1.5 to 1 and the nav, masked headline lines, subcopy and CTA pill animate into place. It plays automatically, exactly once.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugin `CustomEase`. Icons come from Ionicons v7 served from your own origin (`/vendor/ionicons/ionicons.esm.js` as `type="module"`, plus the `nomodule` fallback `ionicons.js`); get them with `npm i ionicons@7.1.0` and copy the whole `node_modules/ionicons/dist/ionicons/` folder, since the loader fetches its chunks and one SVG per icon relative to the script's own URL. No smooth-scroll library, no ScrollTrigger — everything runs on `DOMContentLoaded`.
## Layout / HTML
Two top-level siblings in `<body>`:
1. `div.loader` — fixed full-viewport overlay (`z-index: 2`) containing:
- `div.overlay` with two `div.block` children (side-by-side dark panels, each 100% height / 50% width via flex).
- `div.intro-logo` centered, with two words: `div.word#word-1 > h1 > span` containing "Kind" (the span gets the italic serif font) and `div.word#word-2 > h1` containing "Root".
- `div.divider` — a 1px-wide vertical white line, full height, horizontally centered.
- `div.spinner-container` (centered, `bottom: 10%`) with `div.spinner` inside.
…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
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.