GSAP SVG Monogram Preloader with Curtain Reveal
Overview
A luxury preloader for React and Next.js. An interlaced two-letter monogram draws itself in a gold stroke with a travelling shimmer, a thin numeral counter runs, and a two-part curtain lifts to reveal your page. GSAP and SVG only.
The monogram is two hand-written SVG outlines, an M and a tall leaning O, woven with masks so each passes over the other once. Every stroke draws with a bright point of gold riding its leading end, then a slow band of light crosses the finished crest. The ivory curtain lifts with the crest on it, a gold curtain follows it up a moment later, and your page settles into place underneath.
Details
- Category
- Preloader
- Interaction
- On Load
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 020 / Preloader
GSAP Column Preloader & Blooming Lily Hero Section
On Load · On Scroll · Mouse Move · On Hover
No. 091 / Transitions
WebGL Velvet Curtain Page Reveal Transition
On Load · On Scroll · On Click
No. 023 / Hero
GSAP Botanical Drink Slider Hero with Pour Preloader
On Load · On Scroll · Drag · Mouse Move · On Click
(02)FAQ
GSAP SVG Monogram Preloader with Curtain Reveal — FAQ
01What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. Wrap your page in it as children. Set --maison-font on a parent to choose the numeral's typeface; the demo uses Italiana, and it falls back to Didot and Georgia.
02How do I use my own initials?
Pass monogram with first and second as arrays of closed SVG paths in a 400 by 400 box, and split as the x position where the letters swap which one is on top. The paths are stroked and filled as they are, so outlines of real letterforms work best.
03Does the counter measure real loading?
No. It's a timed intro of about five seconds, set with duration, and it doesn't wait for your images or data. If you need it to wait for something, mount it once that has loaded.
04How do I make it run only once?
Set once. It writes a flag to sessionStorage when it finishes, under storageKey, and is skipped until the tab is closed. If storage is blocked it simply plays each time.
05What happens with reduced motion?
The finished crest and a counter at 100 show for 0.7 seconds, then the overlay fades out and scroll is released. Nothing draws, travels or lifts. Without JavaScript the overlay never shows at all.