GSAP Editorial Night Hero with Growing Botanical SVG
Overview
A dark, editorial masthead hero: a neon title rises letter by letter off a hairline while a procedurally generated indigo plant grows from its root, its branches drawing and every leaf swinging open, labels scramble in from noise and bubbles drift past a breathing moon.
A neon hairline draws across the page and the masthead rises out of it one letter at a time, set in Archivo at 64% width so it spans the full measure, then the hairline retracts. Night falls in behind it: a cursor light, an indigo aura and a moon fade up while the plant grows from its root. The branches draw as strokes, the tapered trunk reveals itself through a mask and each leaf swings open from its stem as the growth reaches it.
Details
- Category
- Hero
- Interaction
- On Load + Mouse Move + On Hover + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 22 componentsBuilt with the same techniques
No. 020 / Preloader
GSAP Column Preloader & Blooming Lily Hero Section
On Load · On Scroll · Mouse Move · On Hover
No. 019 / Scroll
GSAP Pinned Service Cards with Animated Reveals
On Scroll · On Hover · Mouse Move · On Click
No. 018 / Scroll
GSAP WebGL Knockout Dive & Aperture Scroll Section
On Scroll · On Load · Mouse Move · On Hover
(02)FAQ
GSAP Editorial Night Hero with Growing Botanical SVG — FAQ
01What do I need to install?
npm install gsap @gsap/react. SplitText, ScrambleText, DrawSVG and ScrollTrigger all come with gsap. It's built for React or Next.js; its styles are plain CSS, so it doesn't need Tailwind.
02Which fonts does it use?
Archivo for the masthead, logo, subtitle and menu, loaded with next/font as --font-archivo with axes: ["wdth"], since the masthead is set at 64% width and widens on wide screens. The labels and copy are Space Mono as --font-space-mono. The example loads both. Each falls back to a system face, but the masthead's fit is measured from Archivo.
03Can I change the text?
Yes: title, nav, issue, subtitle, lede, cta and aside are all props. The masthead's size in .nocturne-title is measured so the eight letters of "Nocturne" span the full width, so a word of a different length needs a new font-size there (and the font-stretch steps under it).
04Does it need image files?
No. The plant is generated SVG and the grain, ink and speckle textures are painted on a canvas the first time the hero mounts, so there is nothing to put in /public.
05Can I put sections below it?
Yes. It's one screen tall and doesn't pin, so the page simply scrolls on. Its ambient loops pause while it's off screen.
06What happens with reduced motion?
The hero fades in finished, with no intro, loops, parallax or magnetic controls, and the menu opens and closes without its wipe.