Components
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.
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>
);
}