The Hero component is the main landing section of the Music Store application, featuring an animated gradient background, large typography, and smooth GSAP entrance animations.
Overview
The Hero component creates a full-screen immersive experience with:
- Animated Grainient background
- Large “Music Store” title with Bebas Neue font
- ShinyText animated tagline
- Call-to-action button
- GSAP timeline animations for all elements
Props
The Hero component does not accept any props. It’s a self-contained layout component.
Dependencies
For managing animations and DOM references
GSAP (GreenSock Animation Platform) for smooth entrance animations
Custom animated gradient background component
Animated text with shimmering effect
Implementation
import { useEffect, useRef } from "react";
import gsap from "gsap";
import Grainient from "../Grainient/Grainient";
import ShinyText from "../ShinyText/ShinyText";
function Hero() {
const titleRef = useRef(null);
const textRef = useRef(null);
const btnRef = useRef(null);
useEffect(() => {
const ctx = gsap.context(() => {
gsap.timeline({ defaults: { ease: "power3.out" } })
.fromTo(titleRef.current,
{ y: 50, opacity: 0 },
{ y: 0, opacity: 1, duration: 1.5 }
)
.fromTo(textRef.current,
{ y: 30, opacity: 0 },
{ y: 0, opacity: 1, duration: 1.2 },
"-=1"
)
.fromTo(btnRef.current,
{ y: 20, opacity: 0 },
{ y: 0, opacity: 1, duration: 1 },
"-=0.8"
);
});
return () => ctx.revert();
}, []);
return (
<section className="relative h-screen flex text-white">
{/* Grainient Background */}
<div className="absolute inset-0 -z-10">
<Grainient
color1="#000000"
color2="#726e6e"
color3="#fafafa"
timeSpeed={0.9}
grainAnimated
/>
</div>
{/* CTA Button */}
<div ref={btnRef} className="absolute top-8 right-6 md:right-8">
<button
onClick={() => document.getElementById("categorias").scrollIntoView({ behavior: "smooth" })}
className="px-4 py-2 md:px-6 md:py-3 text-white bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl hover:bg-white/20 transition-all"
>
Mirar Tienda
</button>
</div>
{/* Title */}
<div ref={titleRef} className="absolute bottom-36 md:bottom-12 left-6 md:left-10">
<h1
className="font-bold leading-none"
style={{
fontSize: "clamp(3.5rem, 10vw, 11rem)",
fontFamily: "'Bebas Neue', sans-serif",
letterSpacing: "0.02em"
}}
>
Music<br />Store
</h1>
</div>
{/* Tagline */}
<div ref={textRef} className="absolute bottom-36 md:bottom-24 right-6 md:right-10">
<ShinyText
text={"ENCUENTRA TU SONIDO\nIDEAL CON NOSOTROS"}
speed={4}
color="#c9a84c"
shineColor="#ffe566"
/>
</div>
</section>
);
}
export default Hero;
Usage
import Hero from './components/Hero/Hero';
function App() {
return (
<div>
<Hero />
{/* Other content */}
</div>
);
}
Animation Timeline
The component uses a GSAP timeline with staggered animations:
- Title (1.5s) - Fades in from bottom with 50px offset
- Tagline (1.2s) - Starts 1s before title completes
- Button (1.0s) - Starts 0.8s before tagline completes
All animations use the power3.out easing for smooth deceleration.
Styling & Customization
Typography
The title uses responsive font sizing with CSS clamp:
font-size: clamp(3.5rem, 10vw, 11rem);
Glassmorphism
The CTA button uses glassmorphic styling:
className="bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl"
Grainient Configuration
The background is configured with grayscale colors for a monochromatic look:
The Hero component is designed to be the first visible section and takes up the full viewport height (h-screen).
