Cinematic App Hero

A high-fidelity cinematic hero section optimized for premium app showcases and modern landing pages. Powered by a complex GSAP ScrollTrigger timeline, it features a pure CSS 3D iPhone mockup, staggered animations, and dynamic mouse-tracking lighting. Engineered with physical skeuomorphic materials, glassmorphism floating badges, and tactile depth-effect buttons inspired by the Apple Design System. A completely self-contained, zero-image visual engine incorporating SVG progress rings, film grain, and interactive scroll-driven storytelling.

Created by

Installation

npx shadcn@latest add https://21st.dev/r/easemize/cinematic-app-hero

import { CinematicHero } from "@/components/ui/cinematic-app-hero";

export default function CinematicHeroDemo() {
  return (
    <div className="overflow-x-hidden w-[100%] min-h-screen">
      <CinematicHero />
    </div>
  );
}

Dependencies