Scroll-Scrub Hero
Пошаговая инструкция

=== PROMPT 1 — START FRAME (Nano Banana 2) ===
Photorealistic top-down isometric view of [объект],
professional product photography style, soft directional lighting.
Clean white seamless background. 16:9, 2K. No objects touch edges.

=== PROMPT 2 — END FRAME (Nano Banana 2) ===
Same [объект], same angle — but now exploded into components:
[список компонентов floating mid-air].
Same white background, identical lighting. 16:9, 2K. No edges.

=== PROMPT 3 — VIDEO TRANSITION (Kling 3.0, 7s) ===
Smooth 7-second transition. [описание движения].
No text, no camera shake. Kling 3.0, multi-shot off, enhance off.

cp ~/Downloads/hero.mp4 ./public/video/hero.mp4

'use client'
import { useRef, useEffect } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

export default function HeroSection() {
  const sectionRef = useRef<HTMLElement>(null)
  const videoRef  = useRef<HTMLVideoElement>(null)
  const textRef   = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const video = videoRef.current
    const section = sectionRef.current
    if (!video || !section) return

    // prefers-reduced-motion → autoplay, no scrub
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      video.autoplay = true; video.loop = true; return
    }
    // mobile → autoplay loop fallback
    if (window.matchMedia('(max-width: 768px)').matches) {
      video.autoplay = true; video.loop = true; return
    }

    // scroll → video.currentTime
    ScrollTrigger.create({
      trigger: section, start: 'top top', end: 'bottom bottom',
      scrub: 0.5,
      onUpdate: (self) => {
        if (video.duration)
          video.currentTime = self.progress * video.duration
      },
    })

    // текст исчезает в первые 30% скролла
    gsap.to(textRef.current, {
      opacity: 0, y: -40,
      scrollTrigger: { trigger: section, start: 'top top',
                       end: '30% top', scrub: true },
    })

    return () => ScrollTrigger.getAll().forEach(t => t.kill())
  }, [])

  return (
    <section ref={sectionRef} style={{ height: '300vh' }}>
      <div className="sticky top-0 h-screen overflow-hidden bg-white">

        <video ref={videoRef} src="/video/hero.mp4"
          muted playsInline preload="auto"
          className="absolute inset-0 w-full h-full object-contain" />

        <div className="absolute inset-y-0 left-0 w-1/2
             bg-gradient-to-r from-[#0F0F0F] to-transparent" />

        <div ref={textRef}
             className="absolute left-8 top-1/2 -translate-y-1/2 z-10 max-w-lg">
          <h1 className="font-extrabold text-4xl text-white mb-4">
            Твой заголовок
          </h1>
          <a href="tel:+7XXXXXXXXXX"
             className="bg-[#FF6B00] text-white px-6 py-3 rounded-lg">
            Позвонить
          </a>
        </div>

      </div>
    </section>
  )
}

import HeroSection from '@/components/HeroSection'

export default function Home() {
  return <main><HeroSection /></main>
}

'use client'
import { useEffect } from 'react'
import Lenis from '@studio-freight/lenis'

export function SmoothScroll({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const lenis = new Lenis()
    const raf = (time: number) => { lenis.raf(time); requestAnimationFrame(raf) }
    requestAnimationFrame(raf)
    return () => lenis.destroy()
  }, [])
  return <>{children}</>
}

npm run dev       # открой localhost:3000, скролль вниз
npm run build     # должен собраться без ошибок
npm run lint      # чистый lint

# 1. Если репо ещё нет
git init -b main
gh repo create my-hero-site --public --source=. --push

# 2. Линкуй с Vercel (первый раз)
vercel link

# 3. Деплой в прод
git add . && git commit -m "Add scroll-scrub hero"
vercel deploy --prod