Claude ile animasyonlu web sitesi: şablon, video ve tek prompt ile 3 adımda sinematik landing page

Create a cinematic 16:9 image in an Arcane-inspired animation style featuring <SUBJECT> standing firmly on the ground in a powerful heroic pose. The scene should feel like the middle of an intense action sequence where time has suddenly frozen.

Around <SUBJECT>, dust, debris, sparks, cloth fragments and other elements are suspended in mid-air, frozen in motion. Everything around is paused mid-action while <SUBJECT> remains calm, grounded and dominant.

The lighting should be dramatic, with golden highlights, deep shadows, flying particles and a strong sense of motion frozen in time. The mood should feel epic and visually intense, like a high-budget animated scene.

Create a video where the original picture, character and subject remain exactly the same. The scene should feel like a dramatic mid-action freeze-frame moment. The camera slowly zooms in toward the main subject, revealing the entire frozen scene around it. As the zoom progresses, show all the objects, dust, debris and action elements suspended in mid-air, as if time has suddenly stopped.

The focus should stay on the main subject, while everything around it is frozen in motion. The camera movement should feel cinematic, intense and immersive, ending on a powerful close-up of the subject.

Create a React + Vite + Tailwind CSS v4 landing page for BRAND_NAME, a premium website about THEME. The page has a scroll-driven video background, 3 content sections, and a glassmorphism footer. Use ONLY these dependencies: react 19, motion (framer-motion v12+), gsap, lucide-react, tailwindcss v4 with @tailwindcss/vite plugin. The design is dark, cinematic, minimal, with Manrope (sans) and JetBrains Mono (mono) fonts.

Background video: VIDEO_URL

GLOBAL SETUP
vite.config.ts: Use @tailwindcss/vite plugin + @vitejs/plugin-react. Alias @ to project root.
src/index.css: import Manrope and JetBrains Mono from Google Fonts, then @import "tailwindcss", and set --font-sans and --font-mono in @theme.
Define keyframe animations: flyOutRight / flyInLeft (250% translateX, 0.5s) for arrow button hover, and flyOutUp / flyInUp (150% translateY, 0.4s) for nav text hover. All use cubic-bezier(0.4, 0, 0.2, 1) easing with forwards fill mode.

COMPONENT: ScrollReveal. A GSAP-powered word-by-word scroll reveal with three ScrollTrigger animations (rotation from baseRotation to 0, opacity from baseOpacity to 1 with 0.05 stagger, blur from blurStrength to 0px).
COMPONENT: Reveal. A motion.div wrapper for viewport-triggered fade-in with easing [0.16, 1, 0.3, 1].
COMPONENT: NavItem. Hover-animated navigation link with vertical text fly animation using a cycle counter pattern.

SCROLL-DRIVEN VIDEO (CRITICAL)
Use a video.seeking guard inside the scroll handler. Without it, rapid scroll events queue up competing currentTime assignments causing visible frame tearing. Map scroll fraction from 0 (top) to 1 (when footer is 20% of viewport from top). The video must be muted and playsInline.

LAYER STRUCTURE
1. Fixed video background (fixed inset-0 z-0 bg-black) with object-fit: cover.
2. Fixed header (z-20) that slides up out of view between 500px and 800px of scroll.
3. Scrollable content (relative z-10 pointer-events-none) with pointer-events-auto on interactive areas.

SECTION 1: HERO. 12-col grid. A short, bold headline about THEME bottom-left at clamp(2.5rem, 6vw, 5rem). Description paragraph center-right with max-w-[460px]. Two-part CTA button (text + arrow) with white/8 backdrop-blur-[80px], turning solid white on hover.
SECTION 2: ScrollReveal heading + 3-column feature grid.
SECTION 3: FOOTER. Glassmorphism card with rgba(26,26,26,0.6), backdrop-blur 80px, border rgba(255,255,255,0.1). Top CTA + 4-col footer grid (Brand, Company, Services, Connect) + copyright bar.

DESIGN TOKENS
Pure black background. Text in white, white/64, white/40. Glass: #1A1A1A at 40% opacity, blur 80px. Container 90% of viewport width with clamp-based spacing.

Keep the scroll-driven video background, glassmorphism footer and cinematic dark aesthetic intact.