Air Dave

Single-page landing zaprojektowany jak edytowane wideo, nie strona internetowa. Hero z preloadowanym video webm (2 Mbps, marker LCP) startuje pierwszą klatkę razem z pierwszym renderem, bez pustego placeholderu na 2 sekundy.

Cztery sceny: reel w hero, „Jestem Dawid” (o mnie z konkretnym sprzętem DJI Mini 3 Pro), „Moje Realizacje” (galeria filmów i zdjęć z lotów) oraz kontakt. Każda sekcja ma pina i własną micro-narrację scroll-driven.

Galeria z horizontal scroll na desktop, sterowana pionowym scrollem przez ScrollTrigger. Na mobile karty nachodzą na siebie zamiast układać się stosem, co utrzymuje gęstość kompozycji w kadrze telefonu zamiast rozciągać sekcję na 3 ekrany.

Parallax na zdjęciach z lotów, scroll reveal na nagłówkach, magnetic-like hover na CTA. JSON-LD typu Person z jobTitle „Operator Drona”, og:image z autorskiego podpisu, meta theme-color w kinematograficznej czerni.

Stack: React, Vite, GSAP, ScrollTrigger, Netlify. Pojedynczy bundle bez SSR, bo to nie jest strona z setką podstron pod indeksowanie, tylko pokaz w czterech scenach. SPA daje instant pierwszy paint i pełną kontrolę nad GSAP-em bez hydration mismatchu.

Video w hero jako webm preloadowany przez `<link rel="preload" as="video">`, dzięki czemu LCP łapie się na pierwszej klatce video zamiast na fallbackowym obrazie. Bitrate 2 Mbps to świadomy kompromis między ostrością a wagą.

ScrollTrigger w każdej sekcji: `pin` zatrzymuje scenę na ekranie, `scrub` wiąże postęp scrolla z animacją, horizontal scroll przez translateX sterowane scrollem pionowym. Mobile overlapping cards to position absolute plus transform driven by ScrollTrigger progress. Wszystkie listenery cleaned up w return funkcji efektu.

Video w hero zamiast obrazu jest decyzją branżową. Drone to medium ruchu i klient szuka u operatora dynamiki, kompozycji i świadomości kadru. Statyczna galeria nie odpowiada na to pytanie. Pierwsza klatka strony już sprzedaje ruch, zanim klient przeczyta jedno zdanie.

Pin w każdej sekcji to świadomy reżyserski wybór. Klasyczny scroll to lista. Pinning robi z każdej sekcji scenę, którą widz dogląda do końca, zanim przejdzie dalej. Klient ogląda stronę jak film, nie przewija jak feed.

Horizontal scroll w galerii i nachodzące karty na mobile rozwiązują ten sam problem inaczej: zamiast rozciągać sekcje na pięć ekranów, kompresują kompozycję i każdy scroll dostarcza nowy kadr. Patrzy się gęściej, mniej się przewija.

React plus Vite zamiast Next.js, bo to nie strona z 200 podstronami pod SEO, ale 4-scenowy pokaz. SSR i statyczne renderowanie byłyby przeinwestowane. Vite daje pojedynczy bundle, błyskawiczny LCP i GSAP w pełni bez kompromisów. DJI Mini 3 Pro wymienione w o-mnie eliminuje pytanie „czym latasz”, zanim klient zdąży je zadać.