Components
Loading preview...
A high-fidelity Cinematic Scroll Reveal Footer optimized for modern SaaS and app landing pages. Built with a GSAP ScrollTrigger engine to create a smooth "curtain reveal" parallax effect. It features a built-in, physics-based Magnetic Button primitive for interactive glassmorphism pills with overshoot animations. The visual hierarchy includes a theme-adaptive animated aurora glow, dynamic grid patterns, a diagonal scrolling marquee, and giant masked typography. Fully portable in a single file, React Strict-Mode safe, and natively uses shadcn/ui and Tailwind v4 oklch tokens for automatic light/dark mode compatibility.
@easemize
npx shadcn@latest add https://21st.dev/r/easemize/motion-footer"use client";
import { CinematicFooter } from "@/components/ui/motion-footer";
export default function Demo() {
return (
<div className="relative w-full bg-background] min-h-screen font-sans selection:bg-white/20 overflow-x-hidden">
{/*
MAIN CONTENT AREA
We use a high z-index and minimum height to allow the user
to scroll down and reveal the footer securely underneath.
*/}
<main className="relative z-10 w-full min-h-[120vh] bg-background flex flex-col items-center justify-center text-white border-b border-white/10 shadow-m] rounded-b-3xl">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_center,rgba(255,255,255,0.03)_0%,transparent_60%)] pointer-events-none" />
<h1 className="text-4xl md:text-5xl font-light tracking-[0.2em] text-neutral-400 mb-8 uppercase text-center px-4">
Scroll down to reveal
</h1>
<div className="w-[1px] h-32 bg-gradient-to-b from-neutral-400 to-transparent" />
</main>
{/* The Cinematic Footer is injected here */}
<CinematicFooter />
</div>
);
}