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.
Every Holistics Treatment in one Central Platform
Every Holistics Treatment in one Central Platform
Every Holistics Treatment in one Central Platform
Every Holistics Treatment in one Central Platform
Every Holistics Treatment in one Central Platform
Every Holistics Treatment in one Central Platform
Mock `TreatmentCard` + `Grid` like `/treatments`. Motion is on backdrops (bands, sheen, glow, rings, chroma frames); cards stay visually stable aside from hover.
Acupuncture
Osteopathy
Ayurveda
Homeopathy
Acupuncture
Osteopathy
Ayurveda
Homeopathy
Acupuncture
Most booked this weekOsteopathy
Ayurveda
Homeopathy
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.
.lab-letter (snippet: .letter) — opacity, textShadow key stops, translateY, stagger(50), outExpoEvery Holistics Treatment in one Central Platform
.lab-hero-title — letterSpacing + opacity, 2000ms, outQuartEvery Holistics Treatment in one Central Platform
translateY, rotate, stagger(40), outBackEvery Holistics Treatment in one Central Platform
.lab-hero-title with gradient + background-clip: text — backgroundPosition loopEvery Holistics Treatment in one Central Platform
.lab-hero-content — gentle translateY alternate loopEvery Holistics Treatment in one Central Platform