Mood Hero

Mood Hero is a complete agency & portfolio template built with React 19 (TypeScript) and Tailwind CSS. Playful wellness editorial hero section featuring warm amber sun crest, organic shadow foliage, 3D perspective floor grid, and trio of illustrated cards (Sun, Peace Hand, Sunflower).

The animation system uses Web Audio Synth + Interactive Mouse Parallax, which is documented here so you can judge the motion before wiring the template into a project.

Included in this template: Warm ambient canvas (#EDE8DE) with massive glowing amber sun crest and animated foliage shadows; Floating pill navigation with minimalist zen-timer dial icon and smooth backdrop blur; Social proof badge with overlapping user avatars and hand-drawn celebratory burst marks; Editorial typography ("Regulate your mood with our videos") with hand-drawn sparkle & telephone coil doodles; Mathematically foreshortened 3D perspective floor grid receding to a vanishing point.

Open the live preview to browse the sections, then use the source and deployment details on the template page. Templates are grouped by category on the UI HUB templates index so you can compare similar layouts directly.