Hero Animation Lab

Compare six hero background styles (drift → FOMO), three `/treatments`-style grid flavours, then five hero-banner text motion studies (Anime.js v4: animate, stagger) — ethereal glow, optical expansion, sequential reveal, metallic shine, subtle float.

1) Ambient Gradient Drift

Every Holistics Treatment in one Central Platform

2) Aurora Sweep

Every Holistics Treatment in one Central Platform

3) Mesh Pulse + Grain

Every Holistics Treatment in one Central Platform

4) Classic Corporate
Grid + slow linear band — classic, reliable, deterministic

Every Holistics Treatment in one Central Platform

5) Shiny & Sleek
Metallic base + sweeping specular highlight

Every Holistics Treatment in one Central Platform

6) Innovative / FOMO
Pulsing rings + electric glow — urgency and “got to have it”

Every Holistics Treatment in one Central Platform

Treatments page — grid UX (preview)

Mock `TreatmentCard` + `Grid` like `/treatments`. Motion is on backdrops (bands, sheen, glow, rings, chroma frames); cards stay visually stable aside from hover.

7) Treatments grid — Classic, corporate, reliable
Structural grid + slow linear accent band — motion stays in the backdrop; cards stay steady.
A

Acupuncture

O

Osteopathy

Ay

Ayurveda

H

Homeopathy

8) Treatments grid — Shiny, slick, chromatic
Animated gradient frame + specular sheen sweep across each card — premium, reflective, still on-brand cyan/sky.
A

Acupuncture

O

Osteopathy

Ay

Ayurveda

H

Homeopathy

9) Treatments grid — Innovative, FOMO, "got to have it"
Radial energy behind the grid, pulsing rings on a featured card, urgency chip — still azure/sky, not neon purple.
Trending
A

Acupuncture

Most booked this week
O

Osteopathy

Ay

Ayurveda

H

Homeopathy

Hero banner — text motion (Anime.js)

Samples mirror the snippets you listed, adapted to v4 (animate, stagger(…), easing). Class names are prefixed with lab- so multiple demos can coexist on this page; map .lab-letter → .letter and .lab-hero-title → .hero-title, .lab-hero-content → .hero-content in the real hero.

Hero text — Ethereal glow
Per-letter .lab-letter (snippet: .letter) — opacity, textShadow key stops, translateY, stagger(50), outExpo

Every Holistics Treatment in one Central Platform

Hero text — Optical expansion
Single .lab-hero-title — letterSpacing + opacity, 2000ms, outQuart

Every Holistics Treatment in one Central Platform

Hero text — Sequential reveal
Per-letter — translateY, rotate, stagger(40), outBack

Every Holistics Treatment in one Central Platform

Hero text — Metallic shine
.lab-hero-title with gradient + background-clip: text — backgroundPosition loop

Every Holistics Treatment in one Central Platform

Hero text — Subtle float
Wrapper .lab-hero-content — gentle translateY alternate loop

Every Holistics Treatment in one Central Platform