Skip to main content
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

​
useEffect, useRef
React Hooks
For managing animations and DOM references
​
gsap
Animation Library
GSAP (GreenSock Animation Platform) for smooth entrance animations
​
Grainient
Component
Custom animated gradient background component
​
ShinyText
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:
  1. Title (1.5s) - Fades in from bottom with 50px offset
  2. Tagline (1.2s) - Starts 1s before title completes
  3. 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);
This ensures the title scales from 3.5rem (mobile) to 11rem (large screens) based on viewport width.

​
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:
​
color1
string
default:"#000000"
Black base color
​
color2
string
default:"#726e6e"
Medium gray
​
color3
string
default:"#fafafa"
Light gray/white
The Hero component is designed to be the first visible section and takes up the full viewport height (h-screen).