Fade-in Hero
A hero section with a smooth fade-in and upward slide animation on page load.
Fade-in Hero
A full-screen hero section that animates in with a fade and upward slide when the page loads.
Animation Process
The animation uses CSS @keyframes combined with the Intersection Observer API to trigger the effect only when the element enters the viewport.
"use client";
import { useEffect, useRef } from "react";
export function FadeInHero() {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
el.classList.add("animate-fade-in-up");
observer.unobserve(el);
}
},
{ threshold: 0.1 }
);
observer.observe(el);
return () => observer.disconnect();
}, []);
return (
<div
ref={ref}
className="opacity-0 translate-y-8 transition-all duration-700 ease-out"
>
<h1>Your headline here</h1>
</div>
);
}Key steps:
- Start with
opacity: 0andtranslateYoffset - On intersection, add the animation class
- The transition smoothly reveals the content
Source Code
View the full implementation on GitHub.